人工智能AI 应用前端MCP 服务【免费下载链接】json-renderThe Generative UI framework项目地址https://gitcode.com/GitHub_Trending/js/json-render点击查看免费下载json-render/xstate是 json-render 为StateStore接口提供的 XState Store 适配器它把xstate/store的原子atom接入 json-render 的渲染管线让 LLM 生成的 UI 读写状态时直接穿透到 XState Store。读完本文你将掌握xstateStoreStateStore的完整用法、选项参数、底层适配机制以及如何与 Redux/Zustand 等其他后端共存。背景StateStore 是 json-render 状态层的抽象边界json-renderThe Generative UI framework以 JSON 描述驱动 UI 生成。在渲染过程中组件会通过statePath从状态模型中读写数据而状态模型的读写统一收敛到一个抽象接口上——StateStore定义在 packages/core/src/types.tsexport interface StateStore { get: (path: string) unknown; // 按 JSON Pointer 路径读值 set: (path: string, value: unknown) void; // 写值并通知订阅者 update: (updates: Recordstring, unknown) void; // 批量写值单次通知 getSnapshot: () StateModel; // 供 useSyncExternalStore 使用 getServerSnapshot?: () StateModel; // SSR 快照 subscribe: (listener: () void) () void; // 订阅变更返回退订函数 }StateModel就是Recordstring, unknown路径采用 RFC 6901 风格的 JSON Pointer如/user/name。核心包默认提供createStateStore见 packages/core/src/state-store.ts但生产环境中你可能希望把状态交给已有的状态管理库——此时只需实现StateStore即可而json-render/xstate正是这条路的 XState Store 实现。安装npm install json-render/xstate json-render/core json-render/react xstate/store注意事项该适配器要求xstate/storev3peerDependencies声明为3.0.0见 packages/xstate/package.jsonjson-render/core是唯一运行时依赖包同时输出 CJS 与 ESM 双格式并附带类型声明见 tsup.config.ts。快速上手import { createAtom } from xstate/store; import { xstateStoreStateStore } from json-render/xstate; import { StateProvider } from json-render/react; // 1. 创建 atom const uiAtom createAtom({ count: 0 }); // 2. 创建 json-render 的 StateStore 适配器 const store xstateStoreStateStore({ atom: uiAtom }); // 3. 使用 StateProvider store{store} {/* json-render 的读写都会经过 xstate/store */} /StateProviderStateProvider由json-render/react导出见 packages/react/src/contexts/state.tsx传入自定义store后渲染器内部所有状态读写包括setState内置动作都会走这个 store。若要避免类型推断过宽可以显式标注泛型const uiAtom createAtomRecordstring, unknown({ count: 0 });API 参考xstateStoreStateStore(options)创建一个由xstate/store原子支撑的StateStore。签名与选项如下源码见 packages/xstate/src/index.ts选项类型必填说明atomAtomStateModel是通过createAtom创建的xstate/store原子持有 json-render 状态模型返回类型为StateStore同时从json-render/core重新导出该类型方便你直接import type { StateStore } from json-render/xstate。底层实现三个回调完成适配实现极简——只提供了getSnapshot、setSnapshot、subscribe三个回调交给核心包的createStoreAdapter定义于 packages/core/src/state-store.ts拼装出完整StateStorereturn createStoreAdapter({ getSnapshot: () atom.get(), setSnapshot: (next) atom.set(next), subscribe(listener) { const sub atom.subscribe(() { listener(); }); return () sub.unsubscribe(); }, });三个回调分别对应读取getSnapshot直接委托给atom.get()get(path)则由适配器用getByPath在快照上按 JSON Pointer 取值写入setSnapshot把整个新状态模型交给atom.set(next)。适配器负责set/update的路径级更新——它用immutableSetByPath先做不可变更新再整体写入原子只浅拷贝路径沿途的对象未触碰的分支保持原引用结构共享见 packages/core/src/state-store.ts通知subscribe转发原子的变更事件退订时调用sub.unsubscribe()。可选但已内置的能力createStoreAdapter还替你处理了三件“看不见”的事xstate 适配器无需自己实现无变化跳过set/update前先按引用比较新旧值值没变就不调用setSnapshot不产生冗余通知批量更新update一次性应用多个路径只在确有变化时通知一次SSR 快照getServerSnapshot自动回退到getSnapshot可直接配合useSyncExternalStore服务端渲染。测试验证适配行为有据可查适配器的契约行为由 packages/xstate/src/index.test.ts 中的 12 个 Vitest 用例完整锁定可直接作为使用时的行为参考get/set 往返store.get(/count)读取初始值store.set(/count, 42)后快照同步更新update 多值批量一次update({ /a: 1, /b: hello })全部生效订阅通知set、update都会触发一次监听器退订后不再通知快照不可变写入/user/name后旧快照仍保持原值且新旧快照中的user不是同一引用结构共享只更新/a/x时b分支的引用保持不变a分支被替换——这正是immutableSetByPath的浅克隆策略外部写入同步直接调用atom.set({ count: 99 })后store 的get与快照都能读到新值监听器也会被触发——说明适配器与原子是双向同步的。进阶让外部代码与 json-render 共享同一份 UI 状态由于适配器读写的就是同一个原子你可以在 json-render 之外直接操作它实现跨模块状态共享const uiAtom createAtomRecordstring, unknown({ drawer: { open: false, activeTab: settings }, }); const store xstateStoreStateStore({ atom: uiAtom }); // 其他模块事件处理、路由守卫、定时任务等直接改原子 uiAtom.set({ ...uiAtom.get(), drawer: { open: true, activeTab: profile } }); // 渲染器内 store.get(/drawer/open) true且订阅者收到通知配合xstate/storev3 的原生能力你还可以为 UI 状态定义 transitions、actors 或选择器让 UI 状态管理完全复用 XState 生态的模型——json-render 只会把它当成一个普通StateStore来读写。生态对照适配器模式一以贯之json-render/xstate并非孤例。仓库中packages/redux用同样的createStoreAdapter包装 Redux store见 packages/redux/src/index.ts还额外支持selector从 Redux 状态树中选取 UI 切片、以及dispatch回调把新状态写回。这种“核心只定义接口 各状态库各出一个适配器”的设计让 json-render 的状态层保持框架无关项目里已有 Redux 用reduxStateStore已有 XState 用xstateStoreStateStore否则直接用内置的createStateStore即可渲染逻辑完全不用改。适用场景与注意事项适合项目已基于xstate/store管理 UI 状态需要把 json-render 生成的界面状态接入 XState 的动作/订阅体系希望 UI 状态与业务状态共享同一套原子模型注意适配器通过引用比较判断变化因此写入对象/数组时务必传入新的引用避免原地修改导致更新被跳过StateStore.set的类型注释明确说明了这一点见 packages/core/src/types.ts嵌套层级过深的扁平化有深度上限保护见flattenToPointerspackages/core/src/state-store.ts。小结json-render/xstate用不到 50 行代码通过getSnapshot/setSnapshot/subscribe三个回调把xstate/store原子完整接入 json-render 的StateStore抽象路径读写、批量更新、无变化跳过与结构共享等能力均由核心包的createStoreAdapter统一提供。需要接入 XState 生态时记住这一行即可const store xstateStoreStateStore({ atom: uiAtom });赞分享人工智能AI 应用前端MCP 服务【免费下载链接】json-renderThe Generative UI framework项目地址https://gitcode.com/GitHub_Trending/js/json-render点击查看免费下载相关推荐XState移动端适配React Native状态管理终极指南XState移动端适配React Native状态管理终极指南 XState是一个强大的状态管理库专为处理复杂逻辑而设计通过状态机、状态图和角色模型来管理前端后端json-render/redux将 Redux 接入 json-render 的 StateStore 后端适配器实战指南json render/redux将 Redux 接入 json render 的 StateStore 后端适配器实战指南 导读 json render人工智能AI 应用前端MCP 服务上一篇PyInstaller提取器pyinstxtractor完整实战指南一条命令从打包程序里挖出全部Python源码下一篇星露谷农场管理终极指南5大免费MOD实现自动化生产与智能储物3分钟上手创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
