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

machine.js

// volume contrll
/*
{
  "type": "VOL_CHANGE",
  "value": 0.9
}
*/

function mute(){
  console.log('🔇 muted')
}
function unmute(vol){
  console.log('👂 unmuted, vol: '+ vol)
}

const volumeMachine = Machine({
  id: 'volume',
  initial: 'heard',
  context: {
    volume: 0.5
  },
  states: {
    heard: { // idle
      entry: (context)=>{
        console.log('vol: '+ context.volume)
      },
      on: {
        MUTE_TOGGLE: 'muted',
        VOL_CHANGE: {
          actions: assign((context, event) => {
            console.log('assign volume: '+ event.volume)
            return {
              volume: event.value
            }
          }),
          target: 'heard'
        },
      },
    },
    muted: {
      entry: ()=> mute(),
      on: {
        MUTE_TOGGLE: 'heard',
        VOL_CHANGE: {
          actions: assign((context, event) => {
            console.log('assign volume: '+ event.volume)
            return {
              volume: event.value
            }
          }),
          target: 'heard'
        },
      },
      exit: context=> unmute(context.volume),
    },
  }
});