XState
Jotai 的状态管理原始而灵活,但有时也意味着过于自由。 XState 是一个复杂的库,可为状态管理提供更好、更安全的抽象。
安装
您必须安装 xstate
和 jotai-xstate
才能使用此功能。
npm install xstate jotai-xstate# oryarn 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") && (<inputautoFocusdefaultValue={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> tocommit. 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/xstate
被 jotai-xstate
取代。)