Generated by XState Viz: https://xstate.js.org/viz

machine.js

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