XState

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

安装

您必须安装 xstate 和 jotai-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/xstate 被 jotai-xstate 取代。）