Reactjs 在xstate中生成子计算机

我目前正在使用xstate处理一个应用程序，我有一个父计算机，它派生到两个不同的子计算机中，子计算机获取不同的API端点，它们都会根据API调用的状态向父计算机发送一个resolve或reject事件，我需要有关如何确保在父计算机上转换到空闲状态之前完成所有抓取的帮助

获取计算机：

const fetchMachine: FetchMachine =(
  fetchFunction
) => (
{
  id: 'fetch',
  initial: States.Initialize,
  context: {
    response: null,
    error: null
  },
  states: {
    [States.Initialize]: {
      on: {
        'FETCH.REQUEST': {
          target: States.Pending,
        }
      }
    },
    [States.Pending]: {
      invoke: {
        src: 'fetch',
        onDone: {
          target: States.Success,
          actions: ['updateResponse']
        },
        onError: {
          target: States.Failure,
          actions: ['updateError']
        }
      },
    },
    [States.Success]: {
      entry: ['fetchSuccess'],
      on: {
        'FETCH.REQUEST': States.Pending
      }
    },
    [States.Failure]: {
      entry: ['fetchFailure'],
      on: {
        'FETCH.REQUEST': States.Pending
      }
    }
  }
}

上面的机器将事件请求发送回父级

---

现在的问题是，父机并行地使用这台机器，我需要有关如何确保在转换到父机上的空闲状态之前完成所有抓取的帮助。

理想情况下，对于这种情况，您应该使用最终状态，它位于文档中

我在中重新创建了您的机器，具有并行状态，每个状态都有一个最终状态来显示它将如何转换

为了完整起见，以下是最终机器的代码：

const parentMachine = Machine({
id: 'your_id_here',
initial: 'pending',
states: {
  pending: {
    on: { CHANGE_EVENT: 'process' }
  },
  process: {
    type: 'parallel',
    states: {
      fetchMachine1: {
        initial: 'initialize',
        states: {
            initialize: {
                on: {
                  'FETCH.REQUEST': {
                    target: 'pending',
                  }
                }
              },
              pending: {
                invoke: {
                  src: 'fetch',
                  onDone: {
                    target: 'success',
                    actions: ['updateResponse']
                  },
                  onError: {
                    target: 'failure',
                    actions: ['updateError']
                  }
                },
              },
              success: {
                entry: ['fetchSuccess'],
                on: {
                  'FETCH.REQUEST': 'pending'
                },
                type: 'final' // 'success' is a final state node for 'fetchMachine1'
              },
              failure: {
                entry: ['fetchFailure'],
                on: {
                  'FETCH.REQUEST': 'pending'
                }
              }
        }
      },
      fetchMachine2: {
        initial: 'initialize',
        states: {
            initialize: {
                on: {
                  'FETCH.REQUEST': {
                    target: 'pending',
                  }
                }
              },
              pending: {
                invoke: {
                  src: 'fetch',
                  onDone: {
                    target: 'success',
                    actions: ['updateResponse']
                  },
                  onError: {
                    target: 'failure',
                    actions: ['updateError']
                  }
                },
              },
              success: {
                entry: ['fetchSuccess'],
                on: {
                  'FETCH.REQUEST': 'pending'
                },
                type: 'final' // 'success' is a final state node for 'fetchMachine1'
              },
              failure: {
                entry: ['fetchFailure'],
                on: {
                  'FETCH.REQUEST': 'pending'
                }
              }
        }
      }
    },
    onDone: 'pending'
  }
}

---

}))

因此，@TameBadger，当您在可视化工具中运行此命令时，似乎两台机器都在侦听相同的事件。例如，单击

fetchMachine1

上的

FETCH.REQUEST

启动

fetchMachine2

。并行就是这样工作的吗？这些事件是否需要与独立的参与者一起产生？@MikeCrowe您也可以使用不同的事件名称，只要两者都达到最终状态，同样的逻辑适用。