Day20 - 在 XState 与 Side Effect 互动吧～ action API

1. Action 与 Side Effect

昨天，我们确认了状态能被储存起来，然而我们这个开门，只是状态转换成「开了」这个字串而已，我们没有实际执行任何 Side Effect 来开门，还记得我们在 Day 11 提及 Action 吗？

Action 就是状态机对外与 Side Effect 沟通互动的方式之一。

斯斯有两种，啊不是～是 Action 有三种

• entry actions are executed upon entering a state
• exit actions are executed upon exiting a state
• transition actions are executed when a transition is taken.
  by XState - action

Actions are most commonly triggered on entry or exit of a state, although it is possible to place them on a transition itself.
by StateCharts.dev

这里 XState 和 StateCharts.dev 官网介绍到，作为 action 的 side effect 可以在 3 个地方被执行

• 一个是离开 (Exit) 时的 Action，指得是当你要离开 (exit) 某个状态时，你要执行的 side effect
• 一个是转移 (Transition) 时的 Action，指得是当你在状态转移 (transition) 的过程中，要执行的 side effect
• 最後是要进入 (Enter) 时的 Action，指得是当你要进入 (enter) 某个状态时，要要执行的 side effect

2. 需求探讨

那此时我们要来界定 实际上「拉开大门」跟「关上大门」的 side effect 是哪种 action 呢？

这个范例满有趣的～因为...

「开了」一定只会回到「关着」
「关着」一定只会回到「开了」

一体两面，那究竟是该把「拉开大门」、「关上大门」要放在 Entry action or Exit action or Transition action 呢？？

以关门为例

1. 选择采用 Entry Action 的话，当 state 要 进入「关着」状态时，就要执行「关上大门」 side effect
2. 选择采用 Exit Action 的话，当 state 要 离开「开了」状态时，就要执行「关上大门」 side effect
3. 选择采用 Transition Action 的话，当 state 在「开了」转移「关着」的过程时，就要执行「关上大门」 side effect

还是有些微差异，不过这就是看各自的商业需求了

1. 放在 Entry 的话...
   因为 machine 的 service 一被建立之後，就会进入到初始状态「关着」，所以 onEntry 会被呼叫
   

2. 放在 Exit 的话...
   因为 machine 的 service 一被停止之後，就会关闭状态机，离开最後一个状态，所以 onExit 会被呼叫
   

3. 放在 Transition 的话...
   就会跟我们某个转移事件底下把 target, actions 放在一起，为啥是 actions 呢？因为 side effect 可以同时执行很多个，依照本状态机的现实情境，可能会比较适合将 side effect 放在 Transition Action
   

3. XState 的 action API

那具体来说 Action 该怎麽被写在 XState 呢？其实就跟 states , events 一样！可以一开始就先写在 Machine 的 config～

TLDR:
codesandbox DEMO

3.1 描述你的 Actions

首先将 Action 的描述放在 createMachine 的第二个参数 extraOptions

import { createMachine } from "xstate";
const doorMachine = createMachine(machineConfigs, extraOptions)

那今天只学习到 Actions 相关的 option ，我们先给一个 key 为 actions 的 object

这个 object 里面的 key 是 Action Name；value 是 callback function，当你在 machineConfigs 定义 entry / exit / transition 要执行什麽 action 时，就可以使用这组 Action Name 指名

const doorMachine = createMachine(machineConfigs, 
  {
    actions: {
      拉开大门: (c, e) =>
        console.error("side effect..........拉开厚重的门...."),
      关上大门: () => console.error("side effect..........推回厚重的门....")
    }
  }
)

这边暂时不介绍 callback function (c, e)=>... 可以拿到的 c, e 是什麽东西，会在明天为大家介绍

3.2 更新你的 Machine Config

3.2-1 采用 Entry 的话

 states: {
      关着: {
        entry: "关上大门", // 一个 action 可以用字串
        on: {
          开门: { target: "开了"}
        }
      },
      开了: {
        entry: ["拉开大门"], // 多个 action 可以用 array
        on: {
          关门: { target: "关着" }
        }
      }
    }

3.2-2 采用 Exit 的话

 states: {
      关着: {
        on: {
          开门: { target: "开了" }
        }
        exit: "拉开大门"
      },
      开了: {
        on: {
          关门: { target: "关着" }
        }
        exit: ["关上大门"]
      }
    }

3.2-3 采用 Transition 的话

    states: {
      关着: {
        on: {
          开门: {
            target: "开了",
            actions: ["拉开大门"]
          }
        }
      },
      开了: {
        on: {
          关门: { target: "关着", actions: ["关上大门"] }
        }
      }
    }

codesandbox DEMO

参考文献

https://xstate.js.org/docs/guides/actions.html