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

machine.js

const { cancel } = actions

function saveChanges() {
  console.log('here')
}

const fetchMachine = Machine({
  id: 'selectionMachine',
  type: 'parallel',
  states: {
    active: {
      initial: 'selecting',
      states: {
        selecting: {
          on: {
            SELECT: {
              actions: [
                cancel('debounce'),
                send('SAVE', { id: 'debounce', delay: 2000 }),
              ],
            },
            UN_SELECT: {
              actions: [
                cancel('debounce'),
                send('SAVE', { id: 'debounce', delay: 2000 }),
              ],
            },
          },
        },
      },
    },
    sync: {
      initial: 'active',
      states: {
        active: {
          initial: 'idle',
          states: {
            idle: {},
            saving: {
              on : {
                MOVE: 'saved',
              }
            },
            saved: {},
          },
          invoke: {
            id: 'save-service',
            src: (context, event) => (callback, onReceive) => {
              let timeout
              onReceive(e => {
                if (timeout) {
                  clearTimeout(timeout)
                }
                timeout = setTimeout(() => {
                  callback('MOVE')
                }, 2000)

                console.log('event', e)
              });
            }
          },
          on: {
            SAVE: {
              target: '.saving',
              actions: [
                send('asdasd', { to: 'save-service' })
              ]
            }
          },
        },
      },
    },
  },
})