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

machine.js

  const fetchMachine = Machine({
    id: 'fetch',
    initial: 'idle',
    context: {
      results: [],
      retries: 0,
    },
    states: {
      idle: {
        on: {
          FETCH: 'loading',
        },
      },
      loading: {
        invoke: {
          src: 'loadData',
          onDone: { target: 'success', actions: 'handleData' },
          onError: 'failure',
        },
      },
      success: {},
      terminated: {},
      awaitingRetry: {
        after: {
          FETCH_DELAY: 'loading',
        },
      },
      failure: {
        on: {
          '': [
            {
              target: 'awaitingRetry',
              actions: 'increment',
              cond: 'withinLimit',
            },
            { target: 'terminated' },
          ],
          // FETCH: { target: 'loading', actions: 'increment' },
        },
      },
    },
  },
  {
    services: {
      loadData: () => Promise.reject('Boom')
    },
    actions: {
      handleData: assign({ results: (_, event) => event.data }),
      increment: assign({ retries: context => context.retries + 1 }),
    },
    delays: {
      FETCH_DELAY: context => context.retries * 500,
    },
    guards: {
      
    withinLimit: (context) => context.retries < 4
    }
  });