나만의 자바 스크립트 상태 관리 라이브러리 작성

자바 스크립트 애플리케이션 개발에 대해 이야기 할 때 편재하는 것이 하나 있다면 상태 관리입니다. 주 또는 주 관리가 무엇인지 그리고 그것이 오늘날 왜 그렇게 중요한지 모른다면 이 주제에 대해 David Meister 또는 Medium에서 사용할 수 있는 다른 일부 기사 를 읽을 수 있습니다.

같은 거기 준비 인기있는 솔루션이 많이있다 돌아 오는 , MobxVuex은 쉽게 당신의 프로젝트 중 하나를 채택하는 데있어 이러한 솔루션을 사용하는 방법에 대한 많은 문서가있다.

거의 모든 사람에게 충분하지만, 일부 (나와 같은)는 이러한 마법 라이브러리가 내부에서 어떻게 작동하는지 궁금 할 수 있습니다. 이를 돕기 위해 저는 소규모 프로젝트에서 사용할 수있는 간단한 상태 관리 라이브러리를 구축하려고했습니다.이 기사는 제가 달성 할 수있는 것에 관한 것입니다.

상태 관리는 기본적으로 양방향 경로 관리입니다. 애플리케이션이 상태를 업데이트하도록하고 상태가 변경되었음을 애플리케이션의 다른 부분에 알려야합니다. 그러면 이들이 이에 대응하고 필요한 모든 작업을 수행 할 수 있습니다.

첫 번째 부분은 쉬운 부분입니다. 우리가해야 할 일은 내부 상태 (객체)가있는 클래스와 호출 될 때 메서드가받은 새로운 상태에 따라이 상태를 변경하는 메서드를 작성하는 것입니다.

이를 위해 getter 및 setter 패턴을 사용하여 상태를 검색하고 상태 변경을 직접 거부합니다 (false 반환).

변경 불가능한 방식으로 상태를 변경하기 위해 setState 메소드를 제공합니다. 생성자 메서드를 사용하여 초기 상태를 설정할 수 있도록합니다.

state get 메소드에서 내부 상태의 복제 본인 새 객체를 반환하므로 소비자는 내부 상태에 대한 참조를 유지하지 않습니다.

우리가 사용할 또 다른 중요한 기능은 ECMA 표준에서 구현되는 클래스 전용 속성입니다. 내가 무슨 말을하는지 모르는 경우이 문서를 읽고 계속 읽어야합니다.

이 기능은 현재 브라우저에서 사용할 수 없으므로 사용하려면 아래처럼 .babelrc 파일에 @ babel / plugin-proposal-class-properties 플러그인을 설치 (npm 설치 — 저장)하고 지정해야합니다. babel을 사용하여 라이브러리를 컴파일하십시오.

두 개의 간단한 도우미 함수도 추가 할 것입니다. 하나는 객체를 복제하는 것이고 다른 하나는 전달 된 값이 객체인지 확인하는 것입니다.

이 모든 설명 후 시작 코드는 다음과 같습니다.

이 부분이 끝났 으면 이제 두 번째 부분으로 넘어가겠습니다. 이를 수행하려면 애플리케이션의 다른 부분에서 상태가 변경되었음을 알리는 방법을 고려해야합니다. 이를 위해 개발 세계에서 매우 잘 알려진 패턴 인 pubsub 또는 게시자-구독자를 사용할 것입니다.

위키 백과에 따르면, 발행-구독발행 자라고 하는 메시지 발신자가 메시지를 구독자라고하는 특정 수신자에게 직접 보내도록 프로그래밍하지 않고 대신 발행 된 메시지를 어떤 구독자인지 알 수없는 클래스로 분류 하는 메시징 패턴입니다 . 무엇이든있을 수 있습니다. 마찬가지로 구독자는 하나 이상의 클래스에 관심을 표시하고 게시자가있는 경우 어떤 게시자가 있는지 알지 못한 채 관심있는 메시지 만받습니다.” 그것이 무엇인지 이해하지 못했거나 그것에 대해 더 알고 싶다면 pubsub 및 옵저버 패턴을 설명하는이 hackernoon 기사 를 읽을 수 있습니다 .

따라서 상태 관리를 변경하고 publish 및 subscribe 메서드를 사용하여 Pubsub 클래스를 추가합니다. 이 클래스는 Store 클래스의 setState 메서드에서 구독자 알림을 관리하는 데 사용됩니다. 또 다른 변경 사항은 Pubsub 클래스에서 구독 메서드를 단순히 호출하는 구독 메서드를 Store 클래스에 추가 한 것입니다. 이런 식으로 상태 변경에 대한 일부 코드를 실행하려면 호출해야하는 함수를 전달하는 subscribe 메서드를 호출합니다. 이 콜백 함수는 다음 상태를 수신하므로 이에 반응 할 수 있습니다. 이제 코드는 다음과 같습니다.

이제 다음 코드를 사용하여 상태 관리 솔루션을 테스트 할 수 있습니다.

이 코드를 실행하면 모든 것이 작동하고 상태가 수정 될 때마다 두 콜백 함수가 모두 호출되고 상태가 콘솔에 기록되는 것을 볼 수 있습니다.

이것은 소규모 애플리케이션에 적합 해 보이지만 대부분의 경우 상태의 특정 부분이 수정 될 때만 콜백 함수를 실행하려고합니다. 그렇지 않으면 불필요한 코드 실행이 발생하여 성능 문제가 발생할 수 있습니다. pubsub 패턴은 명명 된 채널을 사용하여이를 구현합니다. 따라서 구독을 원할 때마다 관심있는 채널을 알려야합니다. 게시 방법도 마찬가지입니다. wnich 채널에서 정보를 게시해야 함을 알려야 통신 구독자에게 알립니다.

이런 종류의 솔루션은 적어도 나에게는 최적으로 보이지 않습니다. 그래서 우리는 다른 유형의 구현을 시도 할 것입니다. 구독자가 관심있는주의 어느 부분에 대해 알려야하는 곳입니다.

시장에서 사용 가능한 솔루션에는 이러한 종류의 솔루션을 가장 쉬운 방법 (IMHO)으로 구현하는 것이 있습니다. React-redux 연결 방법입니다. 설명서 에서 확인할 수 있듯이 연결 메서드 첫 번째 매개 변수 인 mapStateToProps는 업데이트 된 상태를 수신하고이 상태의 일부인 객체를 반환하는 함수입니다. 이렇게하면 connect 메소드가 컴포넌트의 props를 업데이트해야하는지 여부를 알 수 있습니다.

우리의 작은 상태 관리 라이브러리에서도 똑같이 할 수 있습니다. 누군가 상태 변경을 구독하고 싶을 때마다 mapStateToProps와 유사한 콜백 함수 및 기타 함수를 전달합니다. 이제부터이 두 번째 함수를 config 함수라고 부를 것입니다.

이 가정하에 subscribe 메서드를 변경하여이 두 함수를 수신하고 callbackList 배열의 객체 ({callback, config})에 저장하십시오. 게시 메서드에서 Store 클래스에 저장된 현재 및 다음 상태를 수신합니다. 그런 다음 콜백 함수를 호출하는 루프 내에서 두 상태를 각 구독자의 구성 함수에 적용하고 같지 않은지 확인합니다. 이것이 참이면 config 함수에 적용된 다음 상태의 결과를 전달하는 콜백 함수를 호출합니다. 이런 식으로 읽을 때 모든 것이 너무 어려워 보이지만 코드를 작성하자마자 매우 간단하다는 것을 알게 될 것입니다.

객체 비교를 담당하는 또 다른 도우미 메서드 인 isEqual을 구현할 것입니다. 매우 간단하며 JSON.stringify 메서드를 사용하여 주어진 두 개체가 같은지 여부를 결정합니다.

따라서 최종 코드는 다음과 같습니다.

우리가 이미 작성한 테스트 코드를 수정하여 첫 번째 콜백은 상태에서 a가 변경 될 때만 호출되고 두 번째 콜백은 b 값이 변경 될 때만 호출됩니다.

위의 코드를 실행하면 첫 번째 콜백이 두 번 호출되고 해당 a 값이 기록됩니다. 그런 다음 두 번째 콜백이 두 번 호출되어 b 값만 기록하고 처음 1 다음 2를 기록합니다. a 값은 두 번째 구성 함수에 정의되어 있지 않기 때문에 기록되지 않습니다.

그래서 저는 우리가 여기에 있지 않고이 기사가 달성해야 할 것을 성취했다고 생각합니다.

모두 즐기시기 바랍니다.

모든 제안이나 관찰은 언제나 환영합니다.

추신 : 코드를 빌드하는 데 babel을 사용하고 싶지 않다면 최종 코드를 jsbin에 비공개 클래스 매개 변수와 테스트 부분없이 남겨 두었 습니다.

Suggested posts

JavaScript 테스트의 기초

JavaScript 테스트의 기초

"잠깐만 요, JavaScript 테스팅에 대한 또 다른 기사"라고 생각할 수 있습니다. 예, JavaScript 테스트의 기본 사항에 대해 더 많이 이야기하고 싶은 이유는이 주제에 대한 많은 기사가 JavaScript 테스트를 작성하기위한 코드 스 니펫과 도구를 보여줌으로써 매우 유사한 방식으로 작성 되었기 때문입니다.

Big-O 렌즈를 통한 Javascript의 배열 및 객체 성능

Big-O 렌즈를 통한 Javascript의 배열 및 객체 성능

프로그램의 효율성은 요소의 검색, 정렬, 액세스, 삽입 및 제거와 같은 작업을 수행하기 위해 엄청난 양의 데이터를 처리 할 때 시간 복잡성에 직접적으로 의존합니다. 성능 향상의 필요성에 따라 객체와 배열을 선택적으로 사용할 수 있습니다.

Related posts

성능 최적화 된 A / B 테스트 솔루션

성능 최적화 된 A / B 테스트 솔루션

의제 : 소개 : TL;하지만 읽을 수 있습니다. A / B 테스트, CloudFront 및 Lamba @ edge에 대해 이미 알고있는 경우 AWS Lambda @ edge를 사용한 A / B 테스트로 직접 이동하십시오. A / B 테스트 란 무엇입니까? A / B 테스트는 웹 사이트의 두 가지 버전에 대한 사용자의 참여를 비교하는 데 초점을 맞춘 UX 연구 방법론입니다.

fp-ts (Typescript)에서 Option 및 둘 중 하나 사용

저는 함수형 프로그래밍을 좋아합니다. 몇 년 동안 실수를하거나 토끼 구멍을 뚫는 것으로부터 저를 몇 번 구해 주었기 때문입니다. 동일한 입력이 주어지면 출력이 항상 동일하다는 것을 알면 안심입니다.

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드 구성 요소에서 이미지를 미리 보는 방법

Syncfusion Blazor 파일 업로드는 하나 이상의 파일, 이미지, 문서, 오디오, 비디오 및 기타 파일을 서버에 업로드하기위한 구성 요소입니다. 여러 파일 선택, 진행률 표시 줄, 자동 업로드, 끌어서 놓기, 폴더 (디렉터리) 업로드, 파일을 포함하는 다양한 기능을 갖춘 HTML5 업로드 구성 요소 (<input type =”file”>)의 확장 버전입니다. 검증 등.

6 React 개발자로서 후회

내가 일찍했으면하는 것

6 React 개발자로서 후회

React는 배울 수있는 훌륭한 도구입니다. 그것은 우리가 우리 자신의 방식으로 일을 할 수있게합니다.