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

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  var API = 0
  
  function setApi(value) {
    API = value;
  }
  
  const fetchMachine = Machine({
    id: 'P',
    initial: 'polling',
    context: {
      value: -1
    },
    states: {
      polling: {
        on: {
          CLICK: 'clicking'
        },
        initial: 'pull',
        states: {
          tick: {
            after: {
              5000: 'pull'
            }
          },
          pull: {
            invoke: {
              id: 'poller',
              src: 'poller',
              onDone: {
                target: 'tick',
                actions: 'assignAPI'
              },
              onError: 'tick'
           }
          }
        }
      },
      clicking: {
        entry: 'assignIncrement',
        on: {
          CLICK: { target: 'clicking', internal: false }
        },
        after: {
          2000: 'updating'
        }
      },
      updating: {
        invoke: {
              id: 'pusher',
              src: 'pusher',
              onDone: '#P.polling',
              onError: '#P.polling'
            }
      }
    }
  }, {
    actions: {
      assignAPI: assign({ value: () => API }),
      assignIncrement: assign({ value: ctx => ctx.value + 1 })
    },
    services: {
      pusher: (ctx) => new Promise(resolve => {
        setTimeout(() => { console.log(ctx); API = ctx.value; resolve() }, 350)
      }),
      poller: () => new Promise(resolve => {
        setTimeout(() => {console.warn(API); resolve(API)}, 1000)
      })
    }
  });