Skip to main content

xstate

npm add xstate

# for FW
# @xstate/react @xstate/vue @xstate/svelte
npm add @xstate/react
  • @xstate/graph
  • @xstate/test
  • @statelyai/inspect
  • setup - 定义上下文
    • 定义 context、事件、类型、guards、actions、actors
  • createMachine
    • 基于 setup 定义的上下文构建状态机
    • 定义状态和 transition
  • examples

Why XState/FSM

  • 管理复杂基础业务逻辑
  • 应用启动流程
  • 认证
  • 表单
  • Zustand -> data container
  • xstate -> state orchestration engine
  • to start with modeling your state/data using events
    • event -> 类似 useReducer dispatching actions -> 修改 data/state
  • state 不同于 useState
    • useState 的 state 实际是 reactive data
  • FSM 的 S - state 为单独的一个状态而不是一组数据
    • 通过 条件/事件 转换到另一个状态
  • 状态本身相对独立 encapsulated
    • 条件/时间 -> 驱动状态 -> 驱动业务
    • 而 reactive data 可能会涉及到外部交互 关联
    • reactive data 更面向 业务逻辑
  • actor-based fsm