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

machine.js

// DEMO: Async and Promises
  
const fetchCuteAnimals = () => {
   // Uncomment to test failure
  // return Promise.reject()
  return fetch('https://www.reddit.com/r/aww.json')
    .then(res => res.json())
    .then(data => data.data.children.map(child => child.data))
}

const fetchMachine = Machine({
  id: 'cuteAnimals',
  initial: 'idle',
  context: {
    cureAnimals: null,
    error: null
  },
  states: {
    idle: {
      on: {
        FETCH: 'loading'
      }
    },
    loading: {
      // instead of on,
      // use invoke to
      // invoke a promise
      invoke: {
        id: 'fetchCuteAnimals',
        src: fetchCuteAnimals,
        // Resolve
        onDone: {
          target: 'success',
          actions: assign({
            cureAnimals: (context, event) => event.data
          })
        },
        // Reject
        onError: {
          target: 'failure',
          actions: assign({
            error: (context, event) => event.data
          })
        }
      }
    },
    success: {
      type: 'final'
    },
    failure: {
      on: {
        RETRY: 'loading'
      }
    }
  }
});