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

machine.js

Machine({
  id: 'Z API 1',
  initial: 'idle',
  context: {
    dog: null,
    counter:0,
  },
  on: {
    AA: {
      message: 'zounds',
      actions: assign((c)=> { 
            let {counter} = c;
            ++counter;
            return {
              ...c, 
              counter
            } // end new context
            
          }) // end actions
    },
    BB: {
     target:'idle', internal:true
    },

  },
  states: {
    idle: {
      on: {
        FETCH: 'loading'
      }
    },
    loading: {
      invoke: {
        id: 'fetchDog',
        src: (context, event) => fetch('https://dog.ceo/api/breeds/image/random')
          .then(data => data.json()),
        onDone: {
          target: 'resolved',
          actions: assign({
            dog: (_, event) => event.data
          })
        },
        onError: 'rejected'
      },
      on: {
        CANCEL: 'idle'
      }
    },
    resolved: {
      type: 'final'
    },
    rejected: {
      on: {
        FETCH: 'loading'
      }
    }
  }
}, )