将事件发送到 XState 中的子服务数组答案

【问题标题】：Send event to array of child services in XState将事件发送到 XState 中的子服务数组
【发布时间】：2020-04-06 10:24:39
【问题描述】：

我有一个场景，我有一台父计算机和几台可以从父计算机生成的子计算机。

当前设置如下所示：

const parentMachine = Machine({
  context: {
    children: [] //can contain any number of child services
  },
  ...
  on: {
    ADD_CHILD: {
       actions: assign({
         children: (ctx, e) => {
           return [
             ...ctx.children,
             {
               ref: spawn(childMachine)
             },
           ];
         },
      }),
    },
    UPDATE_CHILDREN: {
      actions: ??? //need to somehow loop through children and send the UPDATE event to each service
    }
  }
});

当父机器收到“UPDATE_CHILDREN”事件时，我想更新每个子服务。我知道您可以通过将数组传递给send 来发送批处理事件，但我希望每个事件也可以发送到不同的服务。我只看到一次将它们发送到单个服务的示例。我已经尝试了几件事，包括以下内容：

UPDATE_CHILDREN: {
  actions: ctx => ctx.children.forEach(c => send("UPDATE", { to: () => c.ref }) //doesn't send 
}

我是否遗漏了一些明显的东西？这可能吗？

【问题讨论】：

你试过吗：actions: ctx => ctx.children.forEach(c => c.send("UPDATE"))

标签： javascript xstate

【解决方案1】：

了解这应该如何在 XState 中工作。

对孩子的引用已经被存储了，所以我们基本上可以直接向他们发送事件而不使用“to”属性：

actions: ctx => ctx.children.forEach(c => c.ref.send("UPDATE"))

【讨论】：

【解决方案2】：

啊，我遇到了和你一模一样的问题！

事实证明，如果你给actions 一个函数，它会假定该函数是实际操作，而不是返回操作的函数。

如果你想根据上下文生成你的动作，你需要使用a pure action：

import { actions } from 'xstate';

const { pure } = actions;

...

    actions: pure((context, event) =>
      context.myActors.map((myActor) =>
        send('SOME_EVENT', { to: myActor })
      )
    ),

这是一个棘手的错误，因为您没有收到任何反馈表明您做错了什么。

【讨论】：