在 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(...) 不是必须的。 returns 看起来像 { type: 'xstate.assign', ...} 的动作是一个纯函数。 None 的 XState 操作是命令式的。

试试这个：

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

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

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

Set context and fire a method in an xState Action

state-machine

reactjs

xstate