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

machine.js

// volume DRY contrll
/* copy/paste below object into bottom of EVENTS tab
{
  "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: 'setVolume',
          target: 'heard'
        },
      },
    },
    muted: {
      entry: ()=> mute(),
      on: {
        MUTE_TOGGLE: 'heard',
        VOL_CHANGE: {
          actions: 'setVolume',
          target: 'heard'
        },
      },
      exit: context=> unmute(context.volume),
    },
  }
},
{
  actions: {
    setVolume: assign((context, event) => {
      console.log('assign volume: '+ event.value)
      return {
        volume: event.value
      }
    }),
  },
});