Quick Start

시작하기 페이지의 핵심 내용을 실제로 실행되는 예제와 함께 한 번에 확인합니다.

1. 설치

@byeolnaerim/global-rx-state는 React hook과 RxJS BehaviorSubject를 사용합니다. 그래서 앱에는 react, rxjs가 함께 있어야 합니다.

bash

2. 같은 name으로 store 공유하기

Named mode는 컴포넌트 내부에서 편하게 호출할 수 있도록 설계되었습니다. 같은 name으로 createRxState를 호출하면 같은 global store를 반환합니다. 다음 값이 이전 값에 의존한다면 setValue((prev) => next) 형태의 functional setter를 사용하세요.

tsx

3. runtime key가 필요하면 createRxStateTuple 사용하기

서버에서 받은 workspace id, route parameter, 사용자가 누른 tab 이름처럼 name이 런타임에 결정되는 경우에는 createRxStateTuple이 자연스럽습니다. 아래 예제는 tab마다 서로 다른 draft store를 사용합니다.

tsx

4. 변경 규칙이 있으면 reducer로 모으기

단순 값은 setter로 충분하지만, 여러 action에 따라 상태가 바뀌거나 값들이 서로 의존한다면 createRxReducer로 변경 규칙을 한 곳에 모으는 편이 안전합니다.

tsx