zustand

@json-render/zustand

json-render の StateStore インターフェース向け Zustand アダプターです。Zustand のバニラストアを json-render の状態バックエンドとして接続します。

インストール

npm install @json-render/zustand @json-render/core @json-render/react zustand

Zustand v5 以降が必要です。バニラストアインターフェースの破壊的な API 変更により、Zustand v4 はサポートされていません。

使用方法

import { createStore } from "zustand/vanilla";
import { zustandStateStore } from "@json-render/zustand";
import { StateProvider } from "@json-render/react";

// 1. Create a Zustand vanilla store
const bearStore = createStore(() => ({
  count: 0,
  name: "Bear",
}));

// 2. Create the json-render StateStore adapter
const store = zustandStateStore({ store: bearStore });

// 3. Use it
<StateProvider store={store}>
  {/* json-render reads/writes go through Zustand */}
</StateProvider>

ネストされたスライスを使用する場合

const appStore = createStore(() => ({
  ui: { count: 0 },
  auth: { token: null },
}));

const store = zustandStateStore({
  store: appStore,
  selector: (s) => s.ui,
  updater: (next, s) => s.setState({ ui: next }),
});

API

zustandStateStore(options)

Zustand ストアをバックエンドとする StateStore を作成します。

オプション	型	必須	説明
store	StoreApi<S>	はい	Zustand のバニラストア（zustand/vanilla の createStore から作成）
selector	(state) => StateModel	いいえ	json-render のスライスを選択します。デフォルトでは状態全体が選択されます。
updater	(nextState, store) => void	いいえ	次の状態をストアに適用します。デフォルトでは浅いマージを行います。ネストされたスライスの場合は上書きするか、完全置換には (next, s) => s.setState(next, true) を使用してください。