始める

パッケージをインストールし、最初の名前付きストアを作成した後、状況に応じた作成スタイルを選択します。

インストール

bash

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

3つの作成スタイル

最も一般的な方法は createRxStateで名前付きオブジェクトAPIを使用することです。同じ名前で呼び出すと同じグローバルストアを参照するため、Reactコンポーネント内でも簡単に使用できます。名前はランタイムで計算されますが、タプル形式が必要な場合は createRxStateTupleを使用し、状態変更ルールをアクション/リデューサーにまとめる必要がある場合は createRxReducerを使用します。

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

次のステップ

インストール

peerDependencies、importパス、package boundaryを確認します。

クイックスタート

共有カウンター、ランタイムキー、リデューサーの例をライブ結果とともに確認します。

クイックスタートに移動