122. 精读《robot 源码 - 有限状态机》

1 概述

本期精读的是有限状态机管理工具 robot 源码。

有限状态机是指有限个数的状态之间相互切换的数学模型，在业务与游戏开发中有限状态都很常见，包括发请求也是一种有限状态机的模型。

笔者将在简介中介绍这个库的使用方式，在精读中介绍实现原理，最后总结在业务中使用的价值。

2 简介

这个库的核心就是利用 createMachine 创建一个有限状态机：

import { createMachine, state, transition } from 'robot3';

const machine = createMachine({
  
  
  inactive: state(
transition('toggle', 'active')
  ),
  active: state(
transition('toggle', 'inactive')
  )
});

export default machine;

如上图所示，我们创建了一个有限状态机 machine，包含了两种状态：inactive 与 active，并且可以通过 toggle 动作在两种状态间做切换。

与 React 结合则有 react-robot:

import { useMachine } from 'react-robot';
import React from 'react';
import machine from './machine'

function App() {
  
  
const [current, send] = useMachine(machine);

return (
    <button type="button" onClick={
   
   () => send('toggle')}>
      State: {
   
   current.name}
    </button>
  )
}

通过 useMachine 拿到的 current.name 表示当前状态值，send 用来发送改变状态的指令。

至于为什么要用有限状态机管理工具，官方文档举了个例子 - 点击编辑后进入编辑态，点击保存后返回原始状态的例子：

点击 Edit 按钮后，将进入下图的状态，点击 Save 后如果输入的内容校验通过保存后再回到初始状态：

如果不用有限状态机，我们首先会创建两个变量存储是否处于编辑态，以及当前输入文本是什么：

let editMode = false;
let title = '';

如果再考虑和后端的交互，就会增加三个状态 - 保存中、校验、保存是否成功：

let editMode = false;
let title =