시작하기
패키지를 설치하고 첫 named store를 만든 뒤, 상황에 맞는 creation style을 선택합니다.
설치
bash
npm install @byeolnaerim/global-rx-state rxjs react세 가지 creation style
가장 일반적인 방식은 createRxState로 named object API를 사용하는 것입니다. 같은 name으로 호출하면 같은 global store를 바라보기 때문에 React 컴포넌트 내부에서도 편하게 사용할 수 있습니다. name이 runtime에 계산되지만 tuple 형태가 필요하면 createRxStateTuple을 사용하고, 상태 변경 규칙을 action/reducer로 모아야 한다면 createRxReducer를 사용합니다.
tsx
import {
createRxState,
createRxStateTuple,
createRxReducer,
} from "@byeolnaerim/global-rx-state";
// 1. Named object mode
// 컴포넌트 내부에서 같은 name으로 호출해도 같은 store를 받습니다.
export function CounterButton() {
const { setCount, useCount } = createRxState(0, "count");
const count = useCount();
return (
<button onClick={() => setCount((prev) => prev + 1)}>
{count}
</button>
);
}
// 2. Named tuple mode
// 서버에서 받은 workspaceId, 사용자가 선택한 tabName처럼
// store key가 runtime에 결정될 때 유용합니다.
export function useTabDraftState(tabName: string) {
return createRxStateTuple(
{ title: "", content: "" },
`tab-draft:${tabName}`,
{ storage: "auto" },
);
}
// 3. Reducer mode
// 업데이트 규칙이 많거나 값들이 서로 의존하면 reducer로 모읍니다.
export function CartSummary() {
const { dispatchCart, useCart } = createRxReducer(
initialCart,
cartReducer,
"cart",
{ storage: "auto" },
);
const cart = useCart();
return <div>{cart.items.length}</div>;
}
// 4. Anonymous tuple mode
// name이 없는 tuple store는 모듈 최상위에서만 만들고 export해서 사용합니다.
// 함수나 컴포넌트 내부에서 호출하지 마세요.
export const [setNoNameCount, getNoNameCount, useNoNameCount] =
createRxState(0);