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

machine.js

const fetchAnimals = ()=>{
  return fetch('https://www.reddit.com/r/aww.json')
    .then(res => res.json())
    .then(data => data.data.children.map(child => child.data))
}

const cuteAnimals = Machine({
  id:'cuteAnimals',
  initial:'idle',
  context:{
    cuteAnimals:null,
    error:null
  },
  states:{
    idle:{
      on:{
        FETCH:'loading'
      }
    },
    loading:{
      invoke:{
        id:'fetchAnimals',
        src:fetchAnimals,
        onDone:{
          target:'success',
          actions:assign({
            cuteAnimals:(ctx,event)=>event.data
          })
        },
        onError:{
          target:'failure',
          actions:assign({
            error:(ctx,event)=>event.data
          })
        }
      }
    },
    success:{
      type:'final'
    },
    failure:{
      on:{
        RETRY:'loading'
      }
    }
    
  }
})