jotai

用途

@json-render/jotai 是 json-render 的 Jotai 适配器，用来对接 json-render 的 StateStore 接口。它的作用是把一个 Jotai atom 接入 json-render，作为其状态后端，从而让 json-render 的读写在 Jotai 中完成，方便在使用 Jotai 做状态管理的项目里集成 json-render。

安装

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

基本使用

核心步骤为三步：创建持有 json-render 状态的 atom、通过 jotaiStateStore 创建 StateStore 适配器、接入 StateProvider。

import { atom } from "jotai";
import { jotaiStateStore } from "@json-render/jotai";
import { StateProvider } from "@json-render/react";

// 1. Create an atom that holds the json-render state
const uiAtom = atom<Record<string, unknown>>({ count: 0 });

// 2. Create the json-render StateStore adapter
const store = jotaiStateStore({ atom: uiAtom });

// 3. Use it

{/* json-render reads/writes go through Jotai */}

接入后，json-render 的读写操作都会经过 Jotai。

与共享 Jotai Store 配合

如果应用已经在使用 Jotai 的 <Provider> 以及自定义 store，可以把该 store 传给适配器，使 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}>
    {/* Both json-render and useAtom() see the same state */}
  </StateProvider>
</JotaiProvider>

这样 json-render 与 useAtom() 看到的是同一份状态。

API

jotaiStateStore(options)

创建一个由 Jotai atom 支撑的 StateStore。

选项	类型	是否必需	说明
atom	WritableAtom<StateModel, [StateModel], void>	是	持有状态模型的可写 atom
store	Jotai Store	否	Jotai store 实例，默认新建一个 store。传入自己的 store 即可与 <Provider> 共享状态

适用场景

• 项目本身使用 Jotai 作为状态管理方案，需要把 json-render 的状态纳入同一套状态体系。
• 应用已存在自定义 Jotai store 和 <Provider>，希望 json-render 与业务组件读写同一份状态。

限制

资料未提供除上述 atom 与 store 选项外的其他配置项、兼容版本范围、性能特性或错误处理方式，相关事实暂未提供。