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

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: '' })
}