RxJS를 이용한 리덕스 상태 관리 저장소 작성 방법

RxJS를 이용한 리덕스 상태 관리 저장소 작성 방법

Vue와 몇 년을 일한 후, 최근에 Angular 11과 함께 일하기 시작했고 RxJS와 NgRx를 소개받았다.

RxJS의 기본을 배우고 그 힘을 깨닫자마자, 상태를 관리하기 위해 다른 라이브러리를 설치할 필요가 없다는 생각이 들기 시작했습니다.

그래서 저는 제 프로젝트에서 NgRx를 대체할 작은 상태 관리 모듈을 작성하기로 결정했습니다. 내가 제안한 제약조건은 Redux와 유사하게 만드는 것에 기초하고 있으며 아래에 열거되어 있다.

마지막 제약 조건은 분명 Redux 자체에서 영감을 얻은 것은 아니지만, 우리 모두가 알다시피 비동기 작업이 필요합니다. 리덕스에서는 리덕스툰크 나 리덕스사가 와 같은 플러그인을 사용하여 그렇게 하기 때문에 비슷한 것을 구현해 보기로 했습니다.

모든 것을 정의하면 코드를 작성할 수 있습니다.

우리는 RxJsStore 라는 이름으로 우리 클래스를 정의하기 시작할 것이다. 관리할 상태 유형을 아직 모르기 때문에 클래스 인스턴스가 생성될 때 사용자가 상태 유형을 알릴 수 있도록 제네릭을 사용합니다. TypeScript에서는 클래스 이름 뒤에 T 를 추가하여 이 작업을 수행합니다.

게다가, 우리는 이미 우리의 환원기와 상태를 저장할 사적인 변수를 만들 수 있다. 저는 상태를 비공개로 만들어서 클래스 외부에서 직접 변경할 수 없도록 합니다. 클래스 메서드만 가능합니다.

RxJS I은 국가 관리에 사용할 수 있는 세 가지 주요 유형, 즉 관찰 가능한 것, 주제, 행동주제를 찾아냈다. 이 경우, 원하는 시간에 마지막으로 방출되는 값을 얻을 수 있기 때문에 Behavior Subject 를 사용하는 것이 더 좋습니다.

옵저버블과 피사체를 이용하면 배출 순간에 청약 방식으로만 배출량을 구할 수 있어 문제가 될 수 있다.

특히 여러분이 (나와 같은) TypeScript에 대해 너무 많이 알지 못하는 경우, 리듀서 유형은 조금 더 복잡할 것입니다. 그러나 기본적으로 감쇠기는 현재 상태와 동작(유형 및 페이로드)의 두 가지 파라미터를 수신하고 업데이트된 내용을 반환하는 함수입니다.

유형 설명에 대괄호를 사용하여 함수 매개 변수(및 해당 유형)인 TypeScript와 함수 응답 유형을 가리키는 화살표를 알 수 있습니다. 활자를 이용한 화살표 함수 같은 거죠.

클래스 생성자에서는 Redux와 마찬가지로 두 개의 매개 변수를 수신합니다.

환원기 유형 정의가 정확하도록 Action 인터페이스도 정의해야 합니다.

먼저 이것부터 시작하겠습니다.

다음으로 구독, 발송 및 선택을 작성할 수 있습니다. 가입 방식은 RxJS의 BehaviorSubject가 이미 구현돼 있어 가장 쉽다. 콜백 기능을 수신하고 비공개 상태에 가입하기만 하면 됩니다. 콜백 기능은 현재 상태 값을 수신하고 아무것도 반환하지 않습니다(무효). 이 표기법은 환원기 유형을 정의하기 위해 사용한 것과 매우 유사합니다. 반환 유형인 Subscription 은 RxJS에서 제공합니다.

디스패치 방법은 동작을 수신하고 현재 상태와 동작을 환원기에 적용한 다음 결과를 사용하여 상태를 업데이트합니다. BehaviorSubject의 가치를 업데이트하려면 next 방식을 사용해야 한다.

한 줄로 할 수 있다는 것을 알지만, 좀 더 읽기 쉽도록 상수를 만들기로 했습니다. 이것과 관련된 언급이 사라지지 않도록 화살표 함수로 선언해야 한다는 점도 빼놓을 수 없다. 이 방법은 asyncDispatch 로 불리기 때문에 필요했습니다.

이제 내가 이해하기로는 가장 어려운 선택 방식이 나온다.

이 방법을 사용하면 특정 상태 키 변경 내용을 청취할 수 있습니다. 이렇게 하면 콜백 함수가 불필요하게 호출되지 않습니다. 그러나 RxJS는 작업에 필요한 도구를 제공할 수 있을 만큼 강력합니다.

먼저 메소드는 사용자가 구독하고 변경사항에 대응할 수 있는 관찰 가능 항목을 반환합니다. 선택한 키의 값이 변경될 때만 이 Observable 이 새 값을 방출하도록 하려면 둘 이상의 RxJS 연산자를 사용해야 합니다.

이를 위해 특수 연산자 파이프(pipe)를 사용했습니다. 각각 다른 연산자가 되는 매개 변수를 원하는 양만큼 수신할 수 있으며 순서대로 적용합니다.

파이프 내부의 첫 번째 연산자는 Distinct UntilKeyChanged 가 될 것이다. 그것은 우리가 변화를 주시할 키를 나타내는 문자열을 수신하고 키 값이 바뀌지 않는 한 옵서버블 이 새로운 값을 방출하는 것을 막을 것이다. 두 번째는 펑크다. 키를 수신하고 상태의 현재 값을 반환합니다.

저에게 가장 어려운 부분은 매개 변수의 유형과 반환 값을 정의하는 것이었습니다. 매개 변수가 문자열이어야 하고 상태 키에 대해 자동으로 검증되어야 합니다. 그리고 반환 값은 상태 키와 같은 유형이어야 합니다. 이를 위해 TypeScript keyof 와 Extends 를 활용하겠습니다.

기본적으로 상태 (T) 키를 포함하는 열거형을 확장하는 새로운 type(K) 을 만든다. 따라서 변수에서 우리는 K형 키를 받고 관찰 가능한 상태(T) 키(K)를 반환한다.

이제 마지막 부분인 asyncDispatch. 이 기능을 구현하기 위해 작업 유형, 문자열 및 비동기 러너 메서드를 수신합니다. 그리고 나서 우리는 주자가 실행되기를 기다리기 위해 대기할 것이다. 그런 다음 수신된 유형을 전달하는 작업과 페이로드로 반환되는 러너 값을 디스패치합니다. 그렇게 간단해요? 생각합니다

유형의 경우 매개 변수는 문자열(작업 이름)과 비동기 함수(비동기 함수)가 됩니다. 실행자는 현재 상태 값을 매개 변수로 받고(필요한 경우 상태 값에 따라 다른 작업을 수행할 수 있음) 약속 을 반환합니다.

메소드 유형을 안전하게 하기 위해 제네릭을 사용하여 러너 리턴 유형 R 을 받았습니다. 비동기 대기 유형을 사용 중이므로 반환 유형은 void(없음) 유형입니다. 반품 유형을 설명할 수는 없지만, 우리는 TypeScript를 사용하고 있기 때문에, 나는 그것이 쓸모없더라도 그것을 하는 것을 선호한다.

수업에 대한 참조를 잃지 않기 위해 화살표 함수로 선언해야 했습니다. 생성자에서 바인드를 수동으로 만들려고 했지만 작동하지 않았습니다.

RxJS에서 필요한 모든 부품 설명, 서면 및 모든 가져오기를 통해 우리 클래스는 아래 코드:

그것을 테스트하기 위해 간단한 코드를 작성했다. 국가는 카운터(counter)와 이름(name)의 두 가지 키를 갖고 있다. 감량기는 인크레멘트와 디크레멘트(카운터), 체인지네임(CHANGE_NAME) 등 3가지로 구성돼 있다. 3개 모두 실행할 페이로드에 종속됩니다.

제가 5초 지연된 asyncDispatch 를 사용해 봤기 때문에, 비록 이것이 첫 번째 디스패치라고 부르는 것은 다른 모든 디스패치가 끝난 후에 실행된다는 것을 알 수 있습니다. 이 약속은 5로 결정되므로 카운터는 마지막에 0으로 다시 업데이트됩니다.

우리는 또한 선택된 방법이 예상대로 작동한다는 것을 알 수 있다. 제가 주목한 한 가지 단점은 Behavior Subject 가 창작에 가치를 부여한다는 것입니다. 그래서 4가 아니라 6이 나온다는 것입니다. 하지만 저는 괜찮다고 생각합니다.

결론

소스 코드는 내 GitHub 및 npm 패키지에서 사용할 수 있습니다. 이 글에서 유용한 것을 배웠기를 바랍니다. 읽어주셔서 감사합니다.

from http://sup-poster.tistory.com/7 by ccl(A) rewrite - 2021-09-23 05:01:08