0

ADD_THOUGHT_TIME_STAMP我在两个不同的州有类似的行动，所以我尝试通过休耕官方文档actions来将该行动转移到xStat 中。

但我不断收到错误消息：“找不到操作类型 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,
      };
    }),
  },
});

我错过了什么？

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

4

1 回答 1

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

于 2021-03-20T08:51:48.677 回答