Getting Started
Install the package and create the first named store, then choose the appropriate creation style.
Installation
bash
npm install @byeolnaerim/global-rx-state rxjs reactThree creation styles
The most common way is to use the named object API. createRxStateCalling with the same name will refer to the same global store, making it easy to use even within React components. If the name is calculated at runtime but a tuple format is needed, createRxStateTupleuse it, and if state change rules need to be gathered into action/reducer. createRxReduceruse this.
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);