xstate
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
Chinese@json-render/xstate
@json-render/xstate
XState Store adapter for json-render's interface. Wire an atom as the state backend for json-render.
StateStore@xstate/storeInstallation
安装
bash
npm install @json-render/xstate @json-render/core @json-render/react @xstate/storeRequires v3+.
@xstate/storebash
npm install @json-render/xstate @json-render/core @json-render/react @xstate/store需要 v3及以上版本。
@xstate/storeUsage
使用方法
tsx
import { createAtom } from "@xstate/store";
import { xstateStoreStateStore } from "@json-render/xstate";
import { StateProvider } from "@json-render/react";
// 1. Create an atom
const uiAtom = createAtom({ count: 0 });
// 2. Create the json-render StateStore adapter
const store = xstateStoreStateStore({ atom: uiAtom });
// 3. Use it
<StateProvider store={store}>
{/* json-render reads/writes go through @xstate/store */}
</StateProvider>tsx
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进行 */}
</StateProvider>API
API
xstateStoreStateStore(options)
xstateStoreStateStore(options)xstateStoreStateStore(options)
xstateStoreStateStore(options)Creates a backed by an atom.
StateStore@xstate/store| Option | Type | Required | Description |
|---|---|---|---|
| | Yes | An |
创建一个由 atom提供支持的。
@xstate/storeStateStore| 选项 | 类型 | 是否必填 | 描述 |
|---|---|---|---|
| | 是 | 来自 |