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

machine.js

const fetchMachine = Machine({
    id: 'timer',
    initial: 'idle',
    context: {
      index: 0
    },
    states: {
      idle: {
        on: {
          START: 'recording'
        }
      },
      recording: {
        on: {
          NEXT: {
            target: 'recording',
            actions: ['moveNext']
          },
          PREV: {
            target: 'recording',
            actions: ['movePrev']
          },
          END: {
            target: 'finished',
            actions: ['doMath']
          }
        }
      },
      finished: {
        on: {
          DONE: 'idle'
        }
      }
    }
  }, {
    actions: {
     moveNext: ({ index }, events) => {
       assign({
         index: index + 1
       })
     },
     movePrev: (context, events) => {
       assign({
         index: index - 1
       })
     },
     doMath: (context, events) => {
       alert('do math: ' + context.index)
     }
    }
  });