如何在XState子状态机调用父级cancelRetry动作？解决VS Code警告

在使用XState创建认证状态机authMachine时，子状态机captcha2的solving状态处理CAPTCHA_TIMEOUT事件时，尝试调用父级定义的cancelRetry动作，却触发VS Code警告：cancelRetry is never used in the machine definition。

问题原因 #

子状态机captcha2设置了独立的id，XState的类型生成器（typegen）会优先在该子状态机的动作映射中查找cancelRetry，父级的动作不会被自动继承识别，因此判定该动作未被使用。

解决方案 #

方案1：移除子状态机的独立ID

如果子状态机不需要独立标识，直接移除id: "captcha2"，子状态机将继承父级的动作上下文，typegen就能正确识别对父级cancelRetry的引用：

const authMachine = createMachine(
    {
      id: "authenticationMachine",
      tsTypes: {} as import("./consumer.typegen").Typegen0,
      initial: "newPage",
      states: {
        //...
        captcha2: {
          // 移除子状态机的id
          initial: "notSent",
          states: {
            notSent: {
              on: {
                SEND: "sent",
              },
            },
            sent: {
              invoke: {
                src: "sendCaptchaChallenge",
                onDone: "solving",
              },
            },
            solving: {
              invoke: {
                src: "solveCaptcha",
              },
              on: {
                SOLVED: "solved",
              },
              after: {
                [CAPTCHA_RECHECK]: {
                  target: "solving",
                  internal: true,
                },
                [CAPTCHA_TIMEOUT]: {
                  target: "loginScreen",
                  actions: "cancelRetry", // 可正确识别父级动作
                },
              },
            },
            solved: {
              type: "final",
            },
          },
          onDone: "emailVerification",
          after: {
            [CAPTCHA_TIMEOUT]: "loginScreen",
          },
        },
        emailVerification: {
          invoke: {
            src: "verifyEmail",
            onDone: "authenticated",
            onError: "emailVerification",
          },
        },
        authenticated: {
          entry: ["startReceivingMessages"],
          type: "final",
        },
      },
    },
    {
      actions: {
        cancelRetry: (context, event) => {},
      },
      guards: {
        // ...
      },
      services: {
        // ...
      },
    }
);

方案2：显式引用父级动作（保留子状态机ID）

如果必须保留子状态机的id，可以通过父级状态机ID+动作名的绝对路径来引用父级动作，让typegen明确识别该动作的使用：

// 修改captcha2子状态机中solving状态的CAPTCHA_TIMEOUT事件配置
solving: {
  invoke: {
    src: "solveCaptcha",
  },
  on: {
    SOLVED: "solved",
  },
  after: {
    [CAPTCHA_RECHECK]: {
      target: "solving",
      internal: true,
    },
    [CAPTCHA_TIMEOUT]: {
      target: "loginScreen",
      // 用父级ID+动作名的绝对路径指定调用父级动作
      actions: "#authenticationMachine.cancelRetry",
    },
  },
},

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