Создание детских машин в xstate

Question

В настоящее время я работаю над приложением, использующим xstate, у меня есть родительский компьютер, который порождается на двух разных дочерних машинах, дочерние машины делают выборку в другую конечную точку API, и все они отправляют обратно родительскому событию разрешение или отклонение в зависимости от статуса вызова API, мне нужна помощь, чтобы убедиться, что все выборки выполнены до перехода в состояние ожидания на родительском компьютере.

fetchMachine:

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

Компьютер выше отправляет запрос события обратно родительскому объекту.

Теперь проблема в том, что родительские машины используют эту машину параллельно, мне нужна помощь в том, как убедиться, что все выборки выполняются до перехода в состояние ожидания на родительской машине.

Answer 1

В идеале вы должны использовать конечное состояние для такого случая, оно находится здесь, в документации.

Я воссоздал вашу машину в визуализаторе с параллельными состояниями, каждое из которых имеет конечное состояние, чтобы показать, как он будет переходить.

Вот код конечной машины для полноты:

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

});