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

machine.js

const TIMEOUT = 3000

Machine({
  id: 'fetchMachine',
  initial: 'idle',
  context: {
    response: null,
    error: null,
  },
  states: {
    idle: {
      on: {
        FETCH: 'loading',
      },
    },
    loading: {
      entry: ['load'],
      after: {
        [TIMEOUT]: {
          target: 'fail',
          actions: assign({
            response: () => null,
            error: 'error.timeout',
          }),
        },
      },
      on: {
        RESOLVE: {
          target: 'success',
          actions: assign({
            response: (_, event) => event.data,
            error: () => null,
          }),
        },
        REJECT: {
          target: 'fail',
          actions: assign({
            response: () => null,
            error: (_, event) => event.error,
          }),
        },
      },
    },
    success: {},
    fail: {},
  },
})