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

machine.js

const machine = Machine(
  {
    id: 'multiply',
    initial: 'addThenMultiply',
    states: {
      addThenMultiply: {
        on: {
          TOGGLE: 'multiplyThenAdd',
          INCREMENT: {
            actions: ['multiply', 'add'],
          },
        },
      },
      multiplyThenAdd: {
        on: {
          TOGGLE: 'addThenMultiply',
          INCREMENT: {
            actions: ['add', 'multiply'],
          },
        },
      },
    },
    on: {
      RESET: {
        actions: 'reset',
      },
      CHANGE_VALUE: {
        actions: 'setValue',
      },
    },
  },
  {
    actions: {
      add: assign({ count: context => context.count + 1 }),
      multiply: assign({ count: context => context.count * context.value }),
      reset: assign({ count: 3 }),
      setValue: assign({ value: (_context, event) => event.value }),
    },
  },
  { count: 3, value: 2 },
);