mcpField
Z
zustand

zustand

github.com/vercel-labs开发18.9k1.9k 次安装今天更新
代码仓库

关于 zustand

@json-render/zustand 将 Zustand vanilla store 接入 json-render 的 StateStore 接口，适合希望用现有 Zustand store 管理 json-render 状态的开发者，并支持选择状态切片和自定义更新方式。

主要功能

  1. 01以 Zustand 作为 StateStore 后端
  2. 02选择状态切片
  3. 03自定义状态更新方式

适用场景

  1. 01用 vanilla store 为 json-render 提供状态
  2. 02将 json-render 连接到应用的嵌套状态切片

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/vercel-labs/json-render --skill zustand

安装后在 Claude Code 中输入/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。

选项类型必填描述
storeStoreApi<S>是Zustand 原生存储（来自 zustand/vanilla 中的 createStore）
selector(state) => StateModel否选择 json-render 切片。默认为整个状态。
updater(nextState, store) => void否将下一个状态应用到存储。默认为浅合并。可针对嵌套切片进行重写，也可以使用 (next, s) => s.setState(next, true) 进行完全替换。

评论

支持 Markdown