在xState Action中设置上下文并触发方法

Question

我有一个简单的状态机来处理输入表单

export const chatMachine = Machine({
  id: 'chat',
  initial: 'idle',
  states: {
    idle: {
      on: {
        SET_MESSAGE: { actions: ['handleMessageChange'] },
        COMMENT_SUBMITTED: {
          actions: ['submitComment']
        }
      }
    }
  }
});

我希望submitComment动作触发一个函数，然后在上下文中重置一个字段，如下所示：

submitComment: (ctx, e) => {
            e.payload(ctx.message);
            assign({
              message: ''
            });
          }

这不起作用。

它会触发我传入的方法，但它不会进入分配位。

我可以做两件事犯罪一个动作还是我应该创建两个单独的动作？

Answer 1

您应该创建两个单独的操作，因为这是两个单独的操作。

我不确定e.payload(ctx.message)做了什么，但事件应该是纯数据 - 你不应该把函数放在事件中。

此外，assign(...)不是必须的。它是一个纯函数，返回一个类似于{ type: 'xstate.assign', ...}的动作。 XState的任何行动都不是必要的。

试试这个：

// ...
COMMENT_SUBMITTED: {
  actions: ['submitComment', 'assignComment']
},

// ...
actions: {
  submitComment: (ctx, e) => { ... },
  assignComment: assign({ message: '' })
}