xstate

用途

@json-render/xstate 是 json-render 的 XState Store 适配器，用于实现 json-render 的 StateStore 接口。它的作用是把 @xstate/store 的 atom 接入为 json-render 的状态后端，使 json-render 的状态读取与写入都通过 @xstate/store 进行。适用于需要在 json-render 中使用 @xstate/store 做状态管理的场景。

主要能力

提供 xstateStoreStateStore(options) 这一 API，用于创建一个由 @xstate/store atom 支撑的 StateStore。该函数接收 options 参数，其中包含一个必填的 atom 选项，类型为 Atom<StateModel>，即来自 createAtom 的 @xstate/store atom，用于保存 json-render 的状态模型。

使用方式

安装命令：

npm install @json-render/xstate @json-render/core @json-render/react @xstate/store

要求 @xstate/store v3 及以上版本。

使用步骤（依据示例）：

1. 创建 atom：

import { createAtom } from "@xstate/store"; const uiAtom = createAtom({ count: 0 });

1. 创建 json-render 的 StateStore 适配器：

import { xstateStoreStateStore } from "@json-render/xstate"; const store = xstateStoreStateStore({ atom: uiAtom });

1. 使用：

通过 StateProvider 接入（来自 @json-render/react）：

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

之后 json-render 的读写都会经过 @xstate/store。

API

xstateStoreStateStore(options)

创建一个由 @xstate/store atom 支撑的 StateStore。

选项：

• atom：类型 Atom<StateModel>，必填，为来自 createAtom 的 @xstate/store atom，用于保存 json-render 状态模型。

适用场景

当项目已经使用或计划使用 @xstate/store 进行状态管理，并希望将其作为 json-render 的状态后端时，可以使用该适配器，从而让 json-render 的状态读写统一走 @xstate/store。

限制

需要 @xstate/store v3+。文档中仅提供了上述安装、使用示例与 API 说明，其他功能、收费、价格、平台与效果信息暂未提供。