Commencer
Installez le package et créez le premier magasin nommé, puis choisissez le style de création approprié.
Installation
bash
npm install @byeolnaerim/global-rx-state rxjs reactTrois styles de création
La méthode la plus courante est createRxStated'utiliser l'API d'objet nommé. En appelant le même nom, vous regardez le même magasin global, ce qui permet une utilisation facile même à l'intérieur des composants React. Le nom est calculé à l'exécution, mais si un tuple est nécessaire, createRxStateTupleutilisez-le, et si les règles de changement d'état doivent être regroupées en action/réducteur. createRxReducerUtiliser.
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);