XState 中文网

# 入门

¥Getting Started

这些 XState v4 文档不再维护

XState v5 现已推出！阅读有关 XState v5 的更多信息 (opens new window) 和 查看 XState v5 文档 (opens new window)。

¥XState v5 is out now! Read more about XState v5 (opens new window) and check out the XState v5 docs (opens new window).

# 我们的第一台机器

¥Our first machine

假设我们想要将 Promise (opens new window) 建模为状态机。首先，使用 NPM 或 Yarn 安装 XState：

¥Suppose we want to model a Promise (opens new window) as a state machine. First, install XState using NPM or Yarn:

npm install xstate --save

如果你使用 VSCode，则应该安装我们的 VSCode 扩展 (opens new window)，以便你可以随时可视化正在构建的机器。

¥If you're using VSCode, you should install our VSCode Extension (opens new window) to allow you to visualize the machine you're building as you go.

然后，在你的项目中导入 createMachine，这是一个创建状态机的函数。

¥Then, in your project, import createMachine, which is a function that creates a state machine.

import { createMachine } from 'xstate';

const promiseMachine = createMachine(/* ... */);

我们将把 机器配置 传递到 createMachine。我们需要提供：

¥We'll pass the machine configuration to createMachine. We'll need to provide the:

  • id - 识别机器

    ¥id - to identify the machine

  • initial - 指定该机器应处于的初始状态节点

    ¥initial - to specify the initial state node this machine should be in

  • states - 定义每个子状态：

    ¥states - to define each of the child states:

import { createMachine } from 'xstate';

const promiseMachine = createMachine({
  id: 'promise',
  initial: 'pending',
  states: {
    pending: {},
    resolved: {},
    rejected: {}
  }
});

然后，我们需要将 transitions 添加到状态节点。

¥Then, we need to add transitions to the state nodes.

import { createMachine } from 'xstate';

const promiseMachine = createMachine({
  id: 'promise',
  initial: 'pending',
  states: {
    pending: {
      on: {
        RESOLVE: { target: 'resolved' },
        REJECT: { target: 'rejected' }
      }
    },
    resolved: {},
    rejected: {}
  }
});

我们还需要将 resolved 和 rejected 状态节点标记为 最终状态节点，因为 Promise 机器一旦达到这些状态就会终止运行：

¥We'll also need to mark the resolved and rejected state nodes as final state nodes since the promise machine terminates running once it reaches those states:

import { createMachine } from 'xstate';

const promiseMachine = createMachine({
  id: 'promise',
  initial: 'pending',
  states: {
    pending: {
      on: {
        RESOLVE: { target: 'resolved' },
        REJECT: { target: 'rejected' }
      }
    },
    resolved: {
      type: 'final'
    },
    rejected: {
      type: 'final'
    }
  }
});

我们的机器现在已准备好进行可视化。你可以复制/粘贴上面的代码和 在 Stately Viz 上可视化它 (opens new window)。其外观如下：

¥Our machine is now ready to be visualized. You can copy/paste the code above and visualize it on Stately Viz (opens new window). Here's how it'll look:

# 运行我们的机器

¥Running our machine

我们如何运行机器取决于我们计划在哪里使用它。

¥How we run our machine depends on where we're planning to use it.

# 在 Node/Vanilla JS 中

¥In Node/Vanilla JS

为了 interpret 机器并使其运行，我们需要添加一个解释器。这将创建一个服务：

¥To interpret the machine and make it run, we need to add an interpreter. This creates a service:

import { createMachine, interpret } from 'xstate';

const promiseMachine = createMachine({
  /* ... */
});

const promiseService = interpret(promiseMachine).onTransition((state) =>
  console.log(state.value)
);

// Start the service
promiseService.start();
// => 'pending'

promiseService.send({ type: 'RESOLVE' });
// => 'resolved'

# 在反应中

¥In React

如果我们想在 React 组件中使用我们的机器，我们可以使用 useMachine 钩子：

¥If we wanted to use our machine inside a React component, we could use the useMachine hook:

你需要安装 @xstate/react

¥You'll need to install @xstate/react

import { useMachine } from '@xstate/react';

const Component = () => {
  const [state, send] = useMachine(promiseMachine);

  return (
    <div>
      {/** You can listen to what state the service is in */}
      {state.matches('pending') && <p>Loading...</p>}
      {state.matches('rejected') && <p>Promise Rejected</p>}
      {state.matches('resolved') && <p>Promise Resolved</p>}
      <div>
        {/** You can send events to the running service */}
        <button onClick={() => send('RESOLVE')}>Resolve</button>
        <button onClick={() => send('REJECT')}>Reject</button>
      </div>
    </div>
  );
};

← 安装 →