Loslegen
Installieren Sie das Paket und erstellen Sie den ersten benannten Speicher, dann wählen Sie den passenden Erstellungsstil aus.
Installation
bash
npm install @byeolnaerim/global-rx-state rxjs reactDrei Erstellungsstile
Die gebräuchlichste Methode ist createRxStatedie Verwendung der benannten Objekt-API. Wenn Sie mit dem gleichen Namen aufrufen, wird auf denselben globalen Speicher zugegriffen, sodass es auch innerhalb von React-Komponenten bequem verwendet werden kann. Der Name wird zur Laufzeit berechnet, aber wenn ein Tupel erforderlich ist, createRxStateTupleverwenden Sie die Funktion, und wenn die Statusänderungsregeln in Aktionen/Reduzierern zusammengefasst werden müssen. createRxReducerverwenden Sie.
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);