设置上下文并在xS​​tate 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: '' })
}