跳到內容
inorisense
關於我 數位花園
部落格

[考察] 有限狀態機

TypeScript 提供型別檢查；XState 則控制流程邏輯檢查 1

有限狀態機 Finite-state machine

Section titled “有限狀態機 Finite-state machine”

Atomics

Section titled “Atomics”

Necessary Parts In A Machine

Section titled “Necessary Parts In A Machine”
  • id: machine identifier
  • initial: initial state
  • context object: local context for entire machine
  • states object: state definitions

Optional Parts In A Machine

Section titled “Optional Parts In A Machine”
  • actions: the mapping of action names to their implementation
  • delays: the mapping of delay names to their implementation
  • guards: the mapping of transition guard (cond) names to their implementation
  • services: the mapping of invoked service (src) names to their implementation
  • activities (deprecated): the mapping of activity names to their implementation

States 狀態

Section titled “States 狀態”

State Node Types

Section titled “State Node Types”
  • atomic
  • compound
  • parallel
  • final
  • history

Transient State Node 過場狀態

Section titled “Transient State Node 過場狀態”

Transient state nodes are useful for determining which state the machine should really go to from a previous state based on conditions. They are most similar to choice pseudostates in UML.

The best way to define a transient state node is as an eventless state, and an always transition. This is a transition where the first condition that evaluates to true is immediately taken.

Events 事件

Section titled “Events 事件”

An event is what causes a state machine to transition from its current state to its next state.

「事件」使舊狀態轉移到新狀態

Definition of Events

Section titled “Definition of Events”
const timerEvent = {
  type: "TIMER", // the convention is to use CONST_CASE for event names
};


// equivalent to { type: 'TIMER' }
const timerEvent = "TIMER";


const keyDownEvent = {
  type: "keydown",
  key: "Enter",
};

Transitions 轉換

Section titled “Transitions 轉換”

Transitions define how the machine reacts to events.

轉換定義了狀態機對發出的事件，要做什麼反應。

Transition 的兩個參數：

  • state：轉換前的狀態
  • event：轉換觸發的事件
const lightMachine = createMachine({
  /* ... */
});


const greenState = lightMachine.initialState;


// determine next state based on current state and event
const yellowState = lightMachine.transition(greenState, { type: "TIMER" });


console.log(yellowState.value);
// => 'yellow'

Hierarchical State 階層狀態

Section titled “Hierarchical State 階層狀態”

In statecharts, states can be nested within other states. These nested states are called compound states.

Parallel State 平行狀態

Section titled “Parallel State 平行狀態”

A parallel state node is specified on the machine and/or any nested compound state by setting type: 'parallel'.

參考文獻

Section titled “參考文獻”

狀態圖 State Chart

Section titled “狀態圖 State Chart”

XState 狀態機：紅綠燈（簡易版）

Section titled “XState 狀態機：紅綠燈（簡易版）”
import { createMachine, interpret } from "xstate";


type TrafficLightEvent = { type: "NEXT" };


type TrafficContext = undefined;


type TrafficLightState =
  | { context: undefined; value: "green" }
  | { context: undefined; value: "yellow" }
  | { context: undefined; value: "red" };


export const trafficLightMachine = createMachine<TrafficContext, TrafficLightEvent, TrafficLightState>({
  id: "trafficLight",
  initial: "red",
  states: {
    green: {
      on: { NEXT: "yellow" },
    },
    red: {
      on: { NEXT: "green" },
    },
    yellow: {
      on: { NEXT: "red" },
    },
  },
});

參考文獻

Section titled “參考文獻”

XState 教學資源

Section titled “XState 教學資源”

文章

Section titled “文章”

範例程式碼

Section titled “範例程式碼”

影片教學

Section titled “影片教學”

參考

Section titled “參考”

Footnotes

Section titled “Footnotes”

  1. TypeScript gives you type safety, and XState gives you logical safety. ↩