Day24 - 在 XState 中的阶层式状态 Hierarchical States

还记得我们在 Day 14 的例子吗？

这是一个比较符合现实情境的 Input 元件状态，只有当 input content 有改变时， valid / invalid 的情境才是有意义的。也就是说 changed 这个父阶层底下会有 valid / invalid 的两种「状态」及改变状态的「事件」。

1. 如何在 XState 描述 Hierarchical States

以下是 2 个一般的 FSM

  // door machine config
  const doorMachinceConfig = {
    id: "door",
    initial: "关着",
    states: {
      关着: {
        on: { 开门: "开了" }
      },
      开了: {
        on: {
          关门: { target: "关着" }
        }
      }
    }
  };
  
 // some FSM config
 const someFSMConfig = {
    id: "myId",
    initial: "state1",
    states: {
      state1: {
        on: {
          event1: { target: "state2" }
        }
      },
      state2: {
        on: {
          event2: { target: "state1" }
        }
      }
    }
  };

我们说阶层状态，也就是某个状态底下有子状态、子状态机的意思！
那就是把某个状态机的定义丢进另一个状态机之下的「特定状态後」，就可以完成了！

比方说，someFSMConfig 的 state2 是个阶层状态，底下是一个 doorMachine，那...

  // door machine config
  const doorMachinceConfig = {
    id: "door",
    initial: "关着",
    states: {
      关着: {
        on: { 开门: "开了" }
      },
      开了: {
        on: {
          关门: { target: "关着" }
        }
      }
    }
  };
  
 // some FSM config
 const someFSMConfig = {
    id: "myId",
    initial: "state1",
    states: {
      state1: {
        on: {
          event1: { target: "state2" }
        }
      },
      state2: {
        on: {
          event2: { target: "state1" }
-       }
+       },
+       ...doorMachinceConfig,
      }
    }
  };

只要把这个子状态机的定义丢进父状态底下即可！

范例可参考Example Demo

2. 完成需求

const inputMachine = Machine({
  id: "inputMachine_v2",
  type: "parallel",

  states: {
    enabled: {
      initial: "enabled",
      states: {
        disabled: {
          on: {
            ENABLE: { target: "enabled" },
          },
        },
        enabled: {
          on: {
            DISABLE: { target: "disabled" },
          },
        },
      },
    },
    changed: {
      initial: "unchanged",
      states: {
        unchanged: {
          on: {
            CHANGE: { target: "changed" },
          },
        },
        changed: {
          initial: "valid",
          states: {
            invalid: {
              on: {
                VALIDATE: { target: "valid" },
              },
            },
            valid: {
              on: {
                INVALIDATE: { target: "invalid" },
              },
            },
          },
        },
      },
    },
  },
});

DEMO Visualizer