如何在XState 5中组合两个互联的状态机（引导与产品创建）

1. 明确两个状态机的关键节点映射 #

首先锚定两个状态机的核心状态，作为跳转的触发点：

• 入门引导状态机（Onboarding SM）：
  • 初始态：ONBOARDING_START（新用户进入的欢迎/引导起始页）
  • 终态：ONBOARDING_COMPLETED（个人信息填写完成的结束页）
• 产品创建状态机（Product Creation SM）：
  • 初始态：PRODUCT_CREATION_START（产品信息填写的起始页）
  • 终态：PRODUCT_CREATION_COMPLETED（产品创建完成的结束页）

2. 实现前进流程的跳转逻辑 #

当用户完成入门引导流程（到达ONBOARDING_COMPLETED状态）时，自动触发跳转到产品创建的初始态：

• 在入门引导状态机的终态退出钩子中，添加状态切换动作：启动产品创建状态机，并跳转至对应页面
• 前端场景下，同步处理路由跳转与状态机初始化；后端场景下，更新用户会话状态并返回产品创建页

以下是基于XState的伪代码示例：

// 入门引导状态机定义
const onboardingMachine = createMachine({
  id: 'onboarding',
  initial: 'ONBOARDING_START',
  states: {
    ONBOARDING_START: { /* 欢迎页交互逻辑 */ },
    ONBOARDING_PROFILE_FORM: { /* 个人信息填写逻辑 */ },
    ONBOARDING_COMPLETED: {
      onExit: () => {
        // 启动产品创建状态机实例
        productCreationService.start();
        // 前端路由跳转至产品创建页
        navigate('/product/create');
      }
    }
  }
});

// 产品创建状态机定义
const productCreationMachine = createMachine({
  id: 'productCreation',
  initial: 'PRODUCT_CREATION_START',
  states: {
    PRODUCT_CREATION_START: { /* 产品信息起始页逻辑 */ },
    // ...其他产品创建步骤
    PRODUCT_CREATION_COMPLETED: { /* 创建完成逻辑 */ }
  }
});

3. 实现后退流程的跳转逻辑 #

针对产品创建流程的后退操作，区分场景处理：

• 若用户处于产品创建的初始态（PRODUCT_CREATION_START），点击后退时跳转至入门引导的终态（而非初始态，避免用户重复填写个人信息）
• 若用户处于产品创建的中间步骤，后退操作遵循产品创建状态机自身的流程（比如返回上一步填写页）

伪代码示例：

const productCreationMachine = createMachine({
  id: 'productCreation',
  initial: 'PRODUCT_CREATION_START',
  states: {
    PRODUCT_CREATION_START: {
      on: {
        BACK: {
          actions: () => {
            // 跳转至入门引导完成页
            navigate('/onboarding/completed');
            // 恢复入门引导状态机至完成态
            onboardingService.send('RESET_TO_COMPLETED');
          }
        }
      }
    },
    PRODUCT_CREATION_DETAILS: {
      on: {
        BACK: 'PRODUCT_CREATION_START' // 中间步骤后退遵循自身流程
      }
    },
    // ...其他状态
  }
});

4. 状态持久化与用户标记 #

• 持久化两个状态机的状态到用户会话（如localStorage、服务端数据库），确保用户刷新页面或切换流程时能恢复正确状态
• 在用户完成入门引导后，设置isOnboarded: true的标记，后续用户直接进入产品创建流程，无需重复走入门引导

内容的提问来源于stack exchange，提问作者Maxime Lechevallier