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

machine.js

// Function that returns a promise
// This promise might resolve with, e.g.,
// { name: 'David', location: 'Florida' }
const doApiAction = deviceId =>
  fetch(`url/to/device/${deviceId}`).then(response => response.json());

const machine = Machine({
  id: 'device',
  initial: 'current',
  context: {
    deviceId: 42,
    result: false,
    error: false
  },
  states: {
    current: {
      on: {
        ACTION: 'waiting'
      }
    },
    waiting: {
      invoke: {
        id: 'doAction',
        src: (context, event) => doApiAction(context.deviceId),
        onDone: {
          target: 'target',
          actions: assign({ result: (context, event) => event.data })
        },
        onError: {
          target: 'current',
          actions: assign({ error: (context, event) => event.data })
        }
      }
    },
    target: {},
  }
});