JotaiJotai

状態
Primitive and flexible state management for React

XState

Jotai 的状态管理原始而灵活,但有时也意味着过于自由。 XState 是一个复杂的库,可为状态管理提供更好、更安全的抽象。

安装

您必须安装 xstatejotai-xstate 才能使用此功能。

npm install xstate jotai-xstate
# or
yarn add xstate jotai-xstate

atomWithMachine

atomWithMachine 使用 XState machine 创建一个新原子。 它接收一个函数 getMachine 来创建一个新状态机。 getMachine 在第一次使用时调用 get 参数,您可以使用它读取其他原子值。

import { useAtom } from "jotai";
import { atomWithMachine } from "jotai-xstate";
import { assign, createMachine } from "xstate";
const createEditableMachine = (value: string) =>
createMachine<{ value: string }>({
id: "editable",
initial: "reading",
context: {
value,
},
states: {
reading: {
on: {
dblclick: "editing",
},
},
editing: {
on: {
cancel: "reading",
commit: {
target: "reading",
actions: assign({
value: (_, { value }) => value,
}),
},
},
},
},
});
const defaultTextAtom = atom("edit me");
const editableMachineAtom = atomWithMachine((get) =>
// `get` 仅可用于初始化状态机
createEditableMachine(get(defaultTextAtom))
);
const Toggle = () => {
const [state, send] = useAtom(editableMachineAtom);
return (
<div>
{state.matches("reading") && (
<strong onDoubleClick={send}>{state.context.value}</strong>
)}
{state.matches("editing") && (
<input
autoFocus
defaultValue={state.context.value}
onBlur={(e) => send({ type: "commit", value: e.target.value })}
onKeyDown={(e) => {
if (e.key === "Enter") {
send({ type: "commit", value: e.target.value });
}
if (e.key === "Escape") {
send("cancel");
}
}}
/>
)}
<br />
<br />
<div>
Double-click to edit. Blur the input or press <code>enter</code> to
commit. Press <code>esc</code> to cancel.
</div>
</div>
);
};

存储在全局 Provider 中的可重启状态机(无 Provider 模式)

当您的状态机达到其最终状态时,它无法再接收任何事件。 如果您的 atomWithMachine 在全局范围内初始化(也称为无 Provider 模式), 要重新启动它,您需要像这样向您的状态机发送一个 RESTART 事件:

import { RESTART } from "jotai-xstate";
const YourComponent = () => {
const [current, send] = useAtom(yourMachineAtom);
const isFinalState = current.matches("myFinalState");
useEffect(() => {
// 在组件卸载时重新启动全局初始化的状态机
return () => {
if (isFinalState) send(RESTART);
};
}, [isFinalState]);
};

示例

使用 atomWithMachine 检查示例:

可重启状态机:

教程

查看有关 Jotai 和 XState 的课程。

React 与 Jotai 和 XState 的复杂状态管理

(注意:在课程中,它使用 jotai/xstatejotai-xstate 取代。)