Skip to content

XState

XState 是一个用于 JavaScript 和 TypeScript 应用的状态管理和编排解决方案。

它使用事件驱动编程、状态机、状态图和演员模型以可预测、稳健和可视化的方式处理复杂逻辑。XState 提供了一种强大且灵活的方式来管理应用程序和工作流状态，允许开发人员将逻辑建模为演员和状态机。它与 React、Vue、Svelte 和其他框架很好地集成，并且可以在前端、后端或任何 JavaScript 运行的地方使用。

安装​

XState 可以在 npm 上获取：

npm install xstate

创建一个简单的状态机​

import { createMachine, assign, createActor } from 'xstate';

const countMachine = createMachine({
  context: {
    count: 0,
  },
  on: {
    INC: {
      actions: assign({
        count: ({ context }) => context.count + 1,
      }),
    },
    DEC: {
      actions: assign({
        count: ({ context }) => context.count - 1,
      }),
    },
    SET: {
      actions: assign({
        count: ({ event }) => event.value,
      }),
    },
  },
});

const countActor = createActor(countMachine).start();

countActor.subscribe((state) => {
  console.log(state.context.count);
});

countActor.send({ type: 'INC' });
// logs 1
countActor.send({ type: 'DEC' });
// logs 0
countActor.send({ type: 'SET', value: 10 });
// logs 10

查看更多备忘单示例.

创建一个更复杂的状态机​

import { createMachine, assign, createActor } from 'xstate';

const textMachine = createMachine({
  context: {
    committedValue: '',
    value: '',
  },
  initial: 'reading',
  states: {
    reading: {
      on: {
        'text.edit': { target: 'editing' },
      },
    },
    editing: {
      on: {
        'text.change': {
          actions: assign({
            value: ({ event }) => event.value,
          }),
        },
        'text.commit': {
          actions: assign({
            committedValue: ({ context }) => context.value,
          }),
          target: 'reading',
        },
        'text.cancel': {
          actions: assign({
            value: ({ context }) => context.committedValue,
          }),
          target: 'reading',
        },
      },
    },
  },
});

const textActor = createActor(textMachine).start();

textActor.subscribe((state) => {
  console.log(state.context.value);
});

textActor.send({ type: 'text.edit' });
// logs ''
textActor.send({ type: 'text.change', value: 'Hello' });
// logs 'Hello'
textActor.send({ type: 'text.commit' });
// logs 'Hello'
textActor.send({ type: 'text.edit' });
// logs 'Hello'
textActor.send({ type: 'text.change', value: 'Hello world' });
// logs 'Hello world'
textActor.send({ type: 'text.cancel' });
// logs 'Hello'

下载 XState VS Code 扩展​

阅读更多关于我们的开发者工具。

包​

  • 🤖 xstate: 核心有限状态机和状态图库 + 演员
  • 📉 @xstate/graph: XState 的图遍历工具
  • ⚛️ @xstate/react: 在 React 应用中使用 XState 的 React hooks 和工具
  • 💚 @xstate/vue: 在 Vue 应用中使用 XState 的 Vue 组合函数和工具
  • 🎷 @xstate/svelte: 在 Svelte 应用中使用 XState 的 Svelte 工具
  • ✅ @xstate/test: 用于测试任何软件的基于模型的测试工具（使用 XState）