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

machine.js

const STATUSES = Object.freeze({
  IDLE: 'idle',
  PENDING: 'pending',
  SUCCESS: 'success',
  FAILURE: 'failure'
});

const EVENT_TYPES = Object.freeze({
  FETCH: 'FETCH',
  CANCEL: 'CANCEL',
  RETRY: 'RETRY',
  RESTORE: 'RESTORE'
});

const ACTIONS = Object.freeze({
  NOTIFY_SUCCESS: 'notifySuccess',
  NOTIFY_FAILURE: 'notifyFailure'
});

const SERVICES = Object.freeze({
  FETCH_DATA: 'fetchData'
});

const CONTEXT_KEYS = Object.freeze({
  DATA: 'data',
  ERROR: 'error'
});

const context = {
  [CONTEXT_KEYS.DATA]: null,
  [CONTEXT_KEYS.ERROR]: null
};

// eslint-disable-next-line new-cap
const fetchMachine = Machine({
  id: 'fetch',
  initial: STATUSES.IDLE,
  context,
  states: {
    [STATUSES.IDLE]: {
      on: { [EVENT_TYPES.FETCH]: STATUSES.PENDING }
    },
    [STATUSES.PENDING]: {
      invoke: {
        src: SERVICES.FETCH_DATA,
        onDone: {
          target: STATUSES.SUCCESS,
          actions: assign({
            [CONTEXT_KEYS.DATA]: (_, event) => event.data
          })
        },
        onError: {
          target: STATUSES.FAILURE,
          actions: assign({
            [CONTEXT_KEYS.ERROR]: (_, event) => event.data
          })
        }
      },
      on: {
        [EVENT_TYPES.CANCEL]: STATUSES.IDLE
      }
    },
    [STATUSES.SUCCESS]: {
      entry: ACTIONS.NOTIFY_SUCCESS,
      type: 'final'
    },
    [STATUSES.FAILURE]: {
      entry: ACTIONS.NOTIFY_FAILURE,
      on: {
        [EVENT_TYPES.RETRY]: STATUSES.PENDING,
        [EVENT_TYPES.RESTORE]: STATUSES.IDLE
      }
    }
  }
});