了解下 JavaScript状态管理库 XState

Coding 部落 2023-05-15

1532

XState是一个JavaScript状态管理库，帮助你在你的应用程序中设计和实现复杂的状态机。它是一个强大的工具，可以帮助你写出更多可维护的、没有错误的代码。

XState是基于状态机的概念，状态机是一种数学计算模型，可以用来表示系统的行为。一个状态机包括一组状态，一组状态间的转换，以及一组当状态机从一个状态转换到另一个状态时执行的动作。

XState提供了许多功能，使你在应用程序中设计和实现状态机变得容易。这些功能包括：

一个可视化的状态机编辑器，帮助你直观地设计你的状态机
一个编译器，将你的状态机转换为JavaScript代码
一个调试器，帮助你浏览你的状态机并检查其行为
一些内置的状态机，你可以用来实现常见的任务，如加载数据、验证用户输入和管理错误。

使用 XState 的好处

下面是使用XState的一些好处：

富有表现力和灵活性：XState提供了一个强大而灵活的语法来定义状态机。你可以使用XState来轻松地定义复杂的状态机。
可扩展性：XState是高度可扩展的。你可以创建你自己的自定义动作、转换和防护来扩展XState的功能。
可测试性：XState很容易测试。你可以使用XState的内置调试器来测试你的状态机并检查其行为。
可维护性：XState可以帮助你写出更多可维护的代码。通过使用XState，你可以避免与JavaScript应用程序中的状态管理相关的常见问题，如全局状态和状态突变。

如何使用

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

import { createMachine } from 'xstate';


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

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

id
- 去标识状态机
initial
- 指定这台状态机应该处于的初始状态节点
states
- 定义每个子状态：

import { createMachine } from 'xstate';


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

然后，我们需要向状态节点添加转换（transitions）。

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 状态机一旦达到这些状态就会终止运行：

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)。看起来这样：

运行我们的状态机

在 Node/Vanilla JS

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

import { createMachine, interpret } from 'xstate';


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


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


// 开启 service
promiseService.start();
// => 'pending'


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

在 React

如果我们想在 React 组件中使用我们的状态机，我们可以使用 useMachine Hook：

你需要安装 @xstate/react

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


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


  return (
    <div>
      {/** 你可以监听 service 处于什么状态 */}
      {state.matches('pending') && <p>Loading...</p>}
      {state.matches('rejected') && <p>Promise Rejected</p>}
      {state.matches('resolved') && <p>Promise Resolved</p>}
      <div>
        {/** 你可以发送事件到运行的 service 中 */}
        <button onClick={() => send('RESOLVE')}>Resolve</button>
        <button onClick={() => send('REJECT')}>Reject</button>
      </div>
    </div>
  );
};

使用场景

当你需要在你的JavaScript应用程序中管理复杂的状态时，你应该使用XState。XState是一个强大的工具，可以帮助你写出更多可维护的、没有错误的代码。

下面是一些你可能想使用XState的情况：

当你的应用程序有大量的状态时
当你的应用程序有复杂的状态转换时
当你需要能够测试你的应用程序的状态时
当你需要能够调试你的应用程序的状态时

如果你不确定你是否应该使用XState，我建议你试试。它是一个强大的工具，可以帮助你写出更好的代码。

详细的使用方法可以访问：

https://github.com/statelyai/xstate

javascript 状态机

文章转载自Coding 部落，如果涉嫌侵权，请发送邮件至：contact@modb.pro进行举报，并提供相关证据，一经查实，墨天轮将立刻删除相关内容。

了解下 JavaScript状态管理库 XState

运行我们的状态机

在 Node/Vanilla JS

评论