XState 是一個實作 finite-state machine 有限狀態機 ( FSM ) 的套件，可以讓使用者在實作時強迫將流程和順序規劃出來，同時達成資料 ( context ) 與狀態 ( State )分離。這邊筆記下相關的概念和實作摘要。
概念
1. 一個 Machine 會需要列舉兩種：State 和 EventType
2. 一個 Machine 在初始化時，會有一個初始的 State 和 Context
3. Context 就是預設的資料欄位，採用 Key-Value 的物件型式
4. 不同的 State 之間，內部可有 always, invoke, on 三種類型。
always：代表立刻執行，內容是一個陣列，可依序由前往後進行判斷，然後跳到不同的狀態
invoke：代表非同步取得資料，並外加 onDone 和 onError
on：代表在該狀態時，可以觸發怎樣的 EventType
5. guards – 可列出多個 回傳 true/false 的 Function。如此一來可在狀態的 cond 參數中，寫 Function 的名字來觸發
6. services – 第三方或是自行撰寫的函式，與後端 API 拿資料
7. actions – 如同 setter，用來改變狀態機的 context 內容
8. predictableActionArguments 建議設定為 true，請見文件
9. 若要創造全域的狀態，可在 App.tsx 內載入撰寫，請見文件
10. 若要符合 TypeScript 型別，你需要定義機器的 Context, StatusType, EventType, Event，並在 xstate 所提供的 create 函式將其傳入，這樣型別才會正確
11. 若要監測你的 Machine，可以額外安裝 xstate/inspect
12. 在所有的狀態最上層，可添加 invoke 來讓狀態機在初始化時，可以先與後端 API 拿一些資料、建立 WebSocket 連線…等，然後再切換狀態
13. 切換狀態是用 EventType 的事件名稱
14. 撰寫 Unit Test 時，別忘記引入實際運行時用的 TS 定義，否則會報錯
程式碼
參考資料
1. XState – Actions
2. @xstate/react
3. XState – Global State/React Context
4. Day18 – Interpreting Machines – 1 ：什麼是 Interpret ？
5. xstate 初探: xstate + react & pixi.js 實作簡易遊戲模型
