Jotai适配器：连接Jotai状态管理与JSON-Render的桥梁 | 状态管理解决方案
jotai by vercel-labs/json-render
安装命令
npx skills add https://github.com/vercel-labs/json-render --skill jotai🇨🇳中文介绍
@json-render/jotai
适用于 json-render StateStore 接口的 Jotai 适配器。将 Jotai atom 作为 json-render 的状态后端进行连接。
安装
npm install @json-render/jotai @json-render/core @json-render/react jotai
使用方法
import { atom } from "jotai";
import { jotaiStateStore } from "@json-render/jotai";
import { StateProvider } from "@json-render/react";
// 1. 创建一个持有 json-render 状态的 atom
const uiAtom = atom<Record<string, unknown>>({ count: 0 });
// 2. 创建 json-render 的 StateStore 适配器
const store = jotaiStateStore({ atom: uiAtom });
// 3. 使用它
<StateProvider store={store}>
{/* json-render 的读写操作将通过 Jotai 进行 */}
</StateProvider>
与共享的 Jotai Store 一起使用
当你的应用已经使用了带有自定义 store 的 Jotai <Provider> 时，将其传入，以便 json-render 和你的组件共享相同的状态：
import { atom, createStore } from "jotai";
import { Provider as JotaiProvider } from "jotai/react";
import { jotaiStateStore } from "@json-render/jotai";
import { StateProvider } from "@json-render/react";
const jStore = createStore();
const uiAtom = atom<Record<string, unknown>>({ count: 0 });
const store = jotaiStateStore({ atom: uiAtom, store: jStore });
<JotaiProvider store={jStore}>
<StateProvider store={store}>
{/* json-render 和 useAtom() 将看到相同的状态 */}
</StateProvider>
</JotaiProvider>
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者，精准高效
