1

我目前正在使用 xstate 开发一个应用程序，我有一台父计算机生成两个不同的子计算机，子计算机对不同的 API 端点进行提取，并且它们都根据状态向父计算机发送解决或拒绝事件在 API 调用中，我需要有关如何确保在转换到父计算机上的空闲状态之前完成所有提取的帮助。

取机：

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
      }
    }
  }
}

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

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

4

1 回答 1

0

理想情况下，您会在这种情况下使用最终状态，它位于文档中的此处。

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

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

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

});

于 2019-10-31T09:37:14.713 回答