Mulai

Instal paket dan buat toko bernama pertama, lalu pilih gaya pembuatan yang sesuai.

Instalasi

bash

npm install @byeolnaerim/global-rx-state rxjs react

Tiga gaya pembuatan

Cara yang paling umum adalah createRxStatemenggunakan API objek bernama. Karena memanggil dengan nama yang sama akan melihat toko global yang sama, ini dapat digunakan dengan nyaman di dalam komponen React. Nama dihitung pada runtime, tetapi jika diperlukan dalam bentuk tuple createRxStateTuplegunakan dan jika aturan perubahan status perlu dikumpulkan dalam action/reducer. createRxReducergunakan.

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);

Langkah berikutnya

Instalasi

Periksa peerDependencies, jalur impor, dan batas paket.

Mulai Cepat

Periksa contoh shared counter, runtime key, dan reducer dengan hasil langsung.

Pergi ke Quick Start