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

machine.js

const countMachine = Machine(
  {
    id: "counter",
    context: {
      counter: 10,
      tickSpeed: 1000,
      countDiff: 1,
    },
    initial: "paused",
    states: {
      counting: {
        invoke: {
          src: "count$"
        },
        initial: "up",
        states: {
          up: {
            on: {
              DOWN: "down",
              TICK: {
                actions: "increment"
              }
            }
          },
          down: {
            on: {
              UP: "up",
              TICK: {
                actions: "decrement"
              }
            }
          }
        },
        on: {
          PAUSE: "paused",
        }
      },
      paused: {
        on: {
          START: "counting",
        }
      }
    },
    on: {
      SET_TICK_SPEED: {
        actions: "setTickSpeed",
      },
      SET_COUNT_DIFF: {
        actions: "setCountDiff",
        cond: 'validCountDiff'
      },
      SET_COUNT: {
        actions: "setCount"
      },
      RESET: {
        actions: "reset"
      }
    }
  }
);