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

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const fetchMachine = Machine({
    id: 'fetch',
    initial: 'idle',
    context: {
      retryCount: 0,
      result: ''
    },
    states: {
      idle: {
        on: {
          FETCH: 'loading'
        },
      },
      loading: {
        invoke: {
          src: 'loadData',
          onDone: {target: 'success', actions: 'handleData'},
          onError: 'failure'
        },
      },
      success: {
        type: 'final'
      },
      failure: {
        on: {
          '': [
            {
            target: 'awaitingRetry',
            actions: 'incRetryCount',
            cond: 'withinRetryLimit'
          }, {target: 'terminated'}
            ]
        }
      },
      awaitingRetry: {
        after: {
          FETCH_DELAY: {
            target: 'loading'
          }
        }
      },
      terminated: {
        type: 'final'
      }
    }
  }, {
    delays: {
      FETCH_DELAY: (ctx) => ctx.retryCount * 500
    },
    guards: {
      withinRetryLimit: ctx => ctx.retryCount < 5
    },
    actions: {
      handleData: assign({result: (_, event) => event.data}),
      incRetryCount: assign({
              retryCount: (context, event) => context.retryCount + 1
            })
    },
    services: {
      loadData: (ctx, evt) => new Promise((res, rej) => {
        setTimeout(() => {
          ctx.retryCount > 6 ? res('win') : rej()
        }, 500)
      })
    }
  });