Bắt đầu
Cài đặt gói và tạo cửa hàng được đặt tên đầu tiên, sau đó chọn kiểu tạo phù hợp.
Cài đặt
bash
npm install @byeolnaerim/global-rx-state rxjs reactBa kiểu tạo
Cách phổ biến nhất là tạoRxStatesử dụng API đối tượng được đặt tên. Khi gọi cùng một tên, nó sẽ nhìn vào cùng một cửa hàng toàn cầu, vì vậy có thể sử dụng dễ dàng trong các thành phần React. Tên được tính toán tại thời gian chạy, nhưng nếu cần dạng tuple thì tạoRxStateTuplesử dụng và nếu cần tập hợp quy tắc thay đổi trạng thái thành action/reducer. tạoRxReducer.
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);