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

machine.js

const machine = Machine({
  id: "fetch",
  initial: "idle",
  context: {
    data: null,
    error: null,
    lastRequest: -Infinity
  },
  states: {
    idle: {
      on: {
        FETCH: "loading"
      }
    },
    loading: {
      invoke: {
        src: "fetchData",
        onDone: {
          target: "success",
          actions: assign({
            data: (_, event) => event.data
          })
        },
        onError: {
          target: "failure",
          actions: assign({
            error: (_, event) => event.data
          })
        }
      }
    },
    success: {
      entry: "notifySuccess",
      on: {
        RETRY: "loading"
      }
    },
    failure: {
      initial: 'error',
      states: {
        error: {
          on: {
            '': [
              { target: 'internal_server_error', cond: '500' },
              { target: 'unauthorized', cond: '401' },
            ],
          }
        },
        internal_server_error: {
          type: 'final',
        },
        unauthorized: {
          entry: 'login_redirect',
        }
      },
      on: {
        RETRY: 'loading',
      }
    }
  }
}, {
  guards: {
    500: ctx => ctx.error?.response?.status === 500,
    401: ctx => ctx.error?.response?.status === 401
  }
});