Day16 - 快速回顾 Finite State Machine, State Chart + 浅嚐 XState

回顾 Finite State Machine

1. 什麽是一个 State ?

一个 state 是指某个 物件 / 实体 / 行为系统，在某个时机点 / 情况底下的型态、模式、状况，但不是描述在这个状况下所有的资料，比如在某些状态下，可能会有无限的资料存在。
by XState - Concepts

范例

主体：水
状态：固态、液态、气态。

2. 什麽是一个 Finite State Machine ?

用来描述一个系统、物件或实体的行为的数学运算模型，在一个时机点下，只能有个状态存在。

具有以下特点

1. 要有一个初始状态 (Initial State)
2. 存在一些数量有限的状态 (Finite States)
3. 存在一些数量有限的事件 (Finite Events)
4. 有一张表纪录着 什麽事件 配 什麽状态，可以转移到另一个什麽状态 (Transition Mapping)
5. 存在一些数量有限的的结束状态（可为 0 个）(Finite Final States)

范例

3. 什麽是一个 State Chart ?

State Chart 是一位有名的数学家 David HAREL 提出在现实世界的复杂系统可以怎麽用一个不错的视觉表达的形式(A VISUAL FORMALISM FOR COMPLEX SYSTEMS)，简单来说，就是 FSM 的加强版、现实生活版。

前面稍微介绍过 State Chart 的一些内容

1. Action: 让我们除了状态转移外，能实际执行相对的 side effect
2. Hierarchical States: 为了避免状态大爆炸，一个父状态允许有多个依赖於父亲的阶层式的子状态存在
3. Parallel States: 为了避免状态大爆炸，一个状态可以包含多个互相独立平行的状态
4. Guard: 一个守卫，除了对的事件 + 对的状态之外，可以多一些条件判断，来限制状态转移
5. State Chart 还有一系列内容含 History State, Delayed Event, Delayed Transition etc...

4. 为什麽要用 Finite State Machine, State Chart

在一个复杂应用系统、使用场景中，明确(Explicitly)说出你的状态能有哪些、状态该如何转移、限制你系统及状态的可能性，避免系统状态跑出例外或漏想清楚的地方（ 可见Day1 Day2 Day6 Day7 这几篇的比较 ）

浅嚐 XState

1. 什麽是 XState ?

XState 就是一个以 JavaScript / TypeScript 实作 Finite State Machine 跟 State Chart 的套件。我们可以藉此方便快速建立我们 App 中的 State Chart 来作为状态管理。

JavaScript and TypeScript finite state machines (opens new window)and statecharts (opens new window)for the modern web. by XState

2. 我的第一个 XState API - createMachine

前些日子我们也曾手动尝试自己建立 2 个版本的 state machine ，但来到复杂的 state chart，我们还是依靠於别人写好的火箭，不重复造轮子了。

还记得我们在 Day 09、Day 10 有 2 个自制版本的 createMacine

[Day 09] 的 createMacine 是 Pure function - 无状态版，要自己另外储存 previousState, nextState

[Day 10] 的 createMacine 是 有状态版，会回传我们一个 machine 的 object instance ，里面记忆着当前的状态(currentState)。

今天介绍的 XState API - createMachine 是我们 Day 09 制作的 Pure function - 无状态版，只不过里面吃的参数 machineConfig 可以处理得远比我们的 util function 多，这里的 machineConfig 是连 State Chart 的那些内容也可以一起写入设定的(eg Action, Guard Codition, Parallel States, Hierarchical States)

范例

定义、设定 config

const doorMachine = createMachine({
  // Machine identifier
  id: "door",

  // Initial state
  initial: "关着",

  // State definitions
  states: {
    关着: {
      on: {
        // 可以用字串描述
        开门: "开了"
      }
    },
    开了: {
      on: {
        // 也可用物件描述
        关门: { target: "关着" }
      }
    }
  }
});

取得状态、转移状态

const state0 = doorMachine.initialState;
console.log(state0);
const state1 = doorMachine.transition(state0, "开门");

Codesandbox 参考

https://codesandbox.io/s/xstate-01-tt1xr?file=/src/index.js