Zustand

作者 vercel-labsfc2a696a50a3无许可证18K 个星标收录于 2026年10月8日更新于 2026年10月8日仓库昨天更新

Zustand adapter for json-render's StateStore interface. Use when integrating json-render with Zustand for state management via @json-render/zustand.

精选仅含说明Software Development

AI 生成的概览

将 Zustand vanilla store 接入 json-render 的 StateStore 接口的适配器。

功能: 该技能介绍 @json-render/zustand 包，它把 Zustand vanilla store 适配为 json-render 的 StateStore 接口。内容涵盖安装方式、通过 StateProvider 接入 store 的基本用法示例，以及使用 selector 和 updater 选项处理嵌套切片的示例。还列出了 zustandStateStore 的选项：store、selector 和 updater。
适用场景: 当需要把 json-render 与 Zustand 集成，让 json-render 的读写经由 Zustand store 时使用。也适用于从较大的 store 中选取嵌套切片，或自定义新状态的应用方式。
运行要求: 需要 Zustand v5 或更高版本（不支持 v4），以及通过 npm 安装 @json-render/zustand、@json-render/core、@json-render/react 和 zustand 这些包。不包含脚本，仅为说明文档。

@json-render/zustand

Zustand adapter for json-render's StateStore interface. Wire a Zustand vanilla store as the state backend for json-render.

Installation

Requires Zustand v5+. Zustand v4 is not supported due to breaking API changes in the vanilla store interface.

Usage

tsx

import { createStore } from "zustand/vanilla";import { zustandStateStore } from "@json-render/zustand";import { StateProvider } from "@json-render/react";
// 1. Create a Zustand vanilla storeconst bearStore = createStore(() => ({  count: 0,  name: "Bear",}));
// 2. Create the json-render StateStore adapterconst store = zustandStateStore({ store: bearStore });
// 3. Use it<StateProvider store={store}>  {/* json-render reads/writes go through Zustand */}</StateProvider>

import { createStore } from "zustand/vanilla";import { zustandStateStore } from "@json-render/zustand";import { StateProvider } from "@json-render/react";
// 1. Create a Zustand vanilla storeconst bearStore = createStore(() => ({  count: 0,  name: "Bear",}));
// 2. Create the json-render StateStore adapterconst store = zustandStateStore({ store: bearStore });
// 3. Use it<StateProvider store={store}>  {/* json-render reads/writes go through Zustand */}</StateProvider>

With a Nested Slice

tsx

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

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

Creates a StateStore backed by a Zustand store.

Option	Type	Required	Description
`store`	`StoreApi<S>`	Yes	Zustand vanilla store (from `createStore` in `zustand/vanilla`)
`selector`	`(state) => StateModel`	No	Select the json-render slice. Defaults to entire state.
`updater`	`(nextState, store) => void`	No	Apply next state to the store. Defaults to shallow merge. Override for nested slices, or use `(next, s) => s.setState(next, true)` for full replacement.

来源与署名

来源：vercel-labs/json-render位于skills/zustand提交fc2a696

许可证：无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

Zustand

@json-render/zustand

Installation

Usage

With a Nested Slice

API

`zustandStateStore(options)`

来源与署名

更多来自 vercel-labs/json-render 的技能

Remotion

Svelte

Xstate

Solid

Vue

Shadcn Svelte

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices