fetchMachine.js

// Previewable on https://statecharts.github.io/xstate-viz/

const { assign } = XState.actions 

const MAX_RETRY_COUNT = 3

const fetchMachine = Machine(
  {
    id: "fetch",
    initial: "idle",
    context: {
      url: "https://api.ipify.org?format=json",
      data: null,
      error: null,
      retries: 0
    },
    states: {
      idle: { on: { FETCH: "loading" } },
      loading: {
        invoke: {
          src: "fetch",
          onDone: {
            target: "success",
            actions: "setData"
          },
          onError: {
            target: "failure",
            actions: "setError"
          }
        }
      },
      success: {
        on: {
          REFETCH: {
            target: "loading",
            actions: "resetRetries"
          }
        }
      },
      failure: {
        on: {
          "": {
            target: "fatal",
            cond: "canNotRetry"
          },
          RETRY: {
            target: "loading",
            actions: "incrementRetries"
          }
        }
      },
      fatal: {
        type: "final"
      }
    }
  },
  {
    guards: {
      canNotRetry: ({ retries }) => retries === MAX_RETRY_COUNT
    },
    actions: {
      setData: assign({ data: (_, { data }) => data }),
      setError: assign({ error: (_, { data }) => data }),
      incrementRetries: assign({ retries: ({ retries }) => retries + 1 }),
      resetRetries: assign({ retries: 0 })
    },
    services: {
      fetch: ({ url }) => fetch(url).then(res => res.json())
    }
  }
)