Xstate 收到警告：未找到操作类型的实现

Question

我在两个不同的状态下有类似的操作 ADD_THOUGHT_TIME_STAMP，所以我尝试通过休假 official documentation.

将该操作移动到 xStat 的 actions

但我不断收到错误消息：“未找到操作类型 addThoughtTimStamp 的实现”

这是有效的代码:

import { Machine, assign } from "xstate";
import {
  ADD_PRIMING_STAGE_ACTION,
  ADD_WORK_STAGE_ACTION,
  ADD_THOUGHT_TIME_STAMP,
  CREATE,
  GO_TO_RESULTS_ACTION,
  PRIMING,
  WORK,
  RESULTS,
  CREATE_NEW_TASK_ACTION,
} from "../types";

export const taskMachine = Machine({
  id: "taskMachineID",
  initial: CREATE,
  context: {
    taskName: "",
    taskStages: [],
  },
  states: {
    CREATE: {
      on: {
        [CREATE_NEW_TASK_ACTION]: {
          // CREATE_NEW TASK is an action.
          target: PRIMING,
          actions: assign((context, data) => {
            console.log("testing action works");
            return {
              ...context,
              taskName: data.taskName,
              taskStages: [{ stageName: "priming", timeOfThoughts: [] }],
            };
          }),
        },
      },
    },
    [PRIMING]: {
      on: {
        [ADD_WORK_STAGE_ACTION]: {
          target: WORK,
          actions: assign((context) => {
            return {
              ...context,
              taskStages: [
                ...context.taskStages,
                { stageName: "work", timeOfThoughts: [] },
              ],
            };
          }),
        },
        [ADD_THOUGHT_TIME_STAMP]: {
          actions: assign((context, { thoughtTime }) => {
            const lastStage =
              context.taskStages[context.taskStages.length - 1].timeOfThoughts;
            console.log(lastStage);
            lastStage.push(thoughtTime);
            return {
              ...context,
            };
          }),
        },
      },
    },
    [WORK]: {
      on: {
        [ADD_PRIMING_STAGE_ACTION]: {
          target: PRIMING,
          actions: assign((context) => {
            console.log("going to piming stage");
            return {
              ...context,
              taskStages: [
                ...context.taskStages,
                { stageName: "priming", timeOfThoughts: [] },
              ],
            };
          }),
        },
        [GO_TO_RESULTS_ACTION]: {
          target: RESULTS,
          actions: assign((context, data) => {
            console.log("task status: ", data);
          }),
        },
        [ADD_THOUGHT_TIME_STAMP]: {
          actions: assign((context, { thoughtTime }) => {
            const lastStage =
              context.taskStages[context.taskStages.length - 1].timeOfThoughts;
            console.log(lastStage);
            lastStage.push(thoughtTime);
            return {
              ...context,
            };
          }),
        },
      },
    },
  },
});

这是不起作用的代码：

export const taskMachine = Machine({
  id: "taskMachineID",
  initial: CREATE,
  context: {
    taskName: "",
    taskStages: [],
  },
  states: {
    CREATE: {
      on: {
        [CREATE_NEW_TASK_ACTION]: {
          // CREATE_NEW TASK is an action.
          target: PRIMING,
          actions: assign((context, data) => {
            console.log("testing action works");
            return {
              ...context,
              taskName: data.taskName,
              taskStages: [{ stageName: "priming", timeOfThoughts: [] }],
            };
          }),
        },
      },
    },
    [PRIMING]: {
      on: {
        [ADD_WORK_STAGE_ACTION]: {
          target: WORK,
          actions: assign((context) => {
            return {
              ...context,
              taskStages: [
                ...context.taskStages,
                { stageName: "work", timeOfThoughts: [] },
              ],
            };
          }),
        },
        [ADD_THOUGHT_TIME_STAMP]: {
          actions: ["addThoughtTimStamp"],
        },
      },
    },
    [WORK]: {
      on: {
        [ADD_PRIMING_STAGE_ACTION]: {
          target: PRIMING,
          actions: assign((context) => {
            console.log("going to piming stage");
            return {
              ...context,
              taskStages: [
                ...context.taskStages,
                { stageName: "priming", timeOfThoughts: [] },
              ],
            };
          }),
        },
        [GO_TO_RESULTS_ACTION]: {
          target: RESULTS,
          actions: assign((context, data) => {
            console.log("task status: ", data);
          }),
        },
        [ADD_THOUGHT_TIME_STAMP]: {
          actions: ["addThoughtTimStamp"],
        },
      },
    },
    [RESULTS]: {},
  },
  actions: {
    addThoughtTimStamp: assign((context, { thoughtTime }) => {
      const lastStage =
        context.taskStages[context.taskStages.length - 1].timeOfThoughts;
      console.log(lastStage);
      lastStage.push(thoughtTime);
      return {
        ...context,
      };
    }),
  },
});

我错过了什么？

P.S 如果您在我的代码中看到其他问题，请随时发表评论，谢谢。

Answer 1

在 Machine 构造函数中，您传递了两个参数：状态图的配置及其选项，包含守卫、操作、服务等的实现。在您的“不工作”示例实现中进入配置，但应该在选项内：

let config = {
  id: "taskMachineID",
  initial: CREATE,
  context: {
    taskName: "",
    taskStages: [],
  },
  states: {
    CREATE: {
      on: {
        [CREATE_NEW_TASK_ACTION]: {
          // CREATE_NEW TASK is an action.
          target: PRIMING,
          actions: assign((context, data) => {
            console.log("testing action works");
            return {
              ...context,
              taskName: data.taskName,
              taskStages: [{ stageName: "priming", timeOfThoughts: [] }],
            };
          }),
        },
      },
    },
    [PRIMING]: {
      on: {
        [ADD_WORK_STAGE_ACTION]: {
          target: WORK,
          actions: assign((context) => {
            return {
              ...context,
              taskStages: [
                ...context.taskStages,
                { stageName: "work", timeOfThoughts: [] },
              ],
            };
          }),
        },
        [ADD_THOUGHT_TIME_STAMP]: {
          actions: ["addThoughtTimStamp"],
        },
      },
    },
    [WORK]: {
      on: {
        [ADD_PRIMING_STAGE_ACTION]: {
          target: PRIMING,
          actions: assign((context) => {
            console.log("going to piming stage");
            return {
              ...context,
              taskStages: [
                ...context.taskStages,
                { stageName: "priming", timeOfThoughts: [] },
              ],
            };
          }),
        },
        [GO_TO_RESULTS_ACTION]: {
          target: RESULTS,
          actions: assign((context, data) => {
            console.log("task status: ", data);
          }),
        },
        [ADD_THOUGHT_TIME_STAMP]: {
          actions: ["addThoughtTimStamp"],
        },
      },
    },
    [RESULTS]: {},
  },
};

let options = {
  actions: {
    addThoughtTimStamp: assign((context, { thoughtTime }) => {
      const lastStage =
        context.taskStages[context.taskStages.length - 1].timeOfThoughts;
      console.log(lastStage);
      lastStage.push(thoughtTime);
      return {
        ...context,
      };
    }),
  },
};

Machine(config, options);

固定示例如下：https://codesandbox.io/s/eager-johnson-d5cj2?file=/src/index.js

Xstate 收到警告：未找到操作类型的实现

Xstate Getting warning: No implementation found for action type

javascript

reactjs

xstate