Back to Details

jotai

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

@json-render/jotai

@json-render/jotai

Jotai adapter for json-render's 
StateStore
interface. Wire a Jotai atom as the state backend for json-render.
适配json-render的
StateStore
接口的Jotai适配器，可将Jotai atom绑定为json-render的状态后端。

Installation

安装

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

Usage

使用方法

tsx
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
<StateProvider store={store}>
  {/* json-render reads/writes go through Jotai */}
</StateProvider>
tsx
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>

With a Shared Jotai Store

配合共享Jotai Store使用

When your app already uses a Jotai 
<Provider>
with a custom store, pass it so both json-render and your components share the same state:
tsx
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>
当你的应用已经通过自定义store使用了Jotai 
<Provider>
时，传入该store即可让json-render和你的组件共享同一份状态：
tsx
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>

API

API

jotaiStateStore(options)

jotaiStateStore(options)

Creates a 
StateStore
backed by a Jotai atom.
OptionTypeRequiredDescription
atom
WritableAtom<StateModel, [StateModel], void>
YesA writable atom holding the state model
store
Jotai 
Store
NoThe Jotai store instance. Defaults to a new store. Pass your own to share state with 
<Provider>
.
创建一个由Jotai atom驱动的
StateStore
。
选项类型必填描述
atom
WritableAtom<StateModel, [StateModel], void>
是用于存储状态模型的可写atom
store
Jotai 
Store
否Jotai store实例，默认创建新store。如需与
<Provider>
共享状态请传入自定义store。