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

machine.js

const fetchMachine = Machine({
  id: 'http',
  initial: 'idle',
  context: {
    data: []
  },
  states: {
    idle: {
      on: {
        FETCH: 'loading'
      }
    },
    loading: {
      invoke: {
        src: invokeFetchData,
        onDone: {
          target: 'success',
          actions: assign({
            data: (context, event) => {
              return [...context.data, event.data]
            }
          })
        }
      }
    },
    success: {
      type: 'final'
    }
  }
});

function invokeFetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Hello world!');
    }, 3000);
  });
}