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

machine.js

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(Math.floor(Math.random() * 100));
    }, 2000)
  })
}
  
const fetchMachine = Machine({
  id: 'fetch',
  initial: 'idle',
  context: {
    value: undefined
  },
  states: {
    idle: {
      on: {
        FETCH: 'loading'
      }
    },
    loading: {
      invoke: {
        id: 'fetch random number',
        src: fetchData,
        onDone: [
          {
          cond: (_, event) => event.data % 2 === 0,
          target: 'even'
        },
        {
          cond: (_, event) => event.data % 2 === 1,
          target: 'odd'
        },
        ]
      },
    },
    even: {
      type: 'final'
    },
    odd: {
      type: 'final'
    }
  }
});