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

machine.js

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions
  // - XState (all XState exports)
  
  const fetchMachine = Machine({
      id: "stepper",
      initial: "add",
      context: {
        count: 0,
      },
      states: {
        add: {
          on: {
            click: {
              target: "step",
              actions: assign({
                count: ({ count }) => count + 1,
              }),
            },
          },
        },
        step: {
          on: {
            INC: {
              target: "step",
              actions: assign({
                count: ({ count }) => count + 1,
              }),
            },
            DEC: [
              {
                target: "step",
                actions: assign({
                  count: ({ count }) => count - 1,
                }),
                cond: "doesCountRemainAboveZero",
              },
              {
                target: "add",
                actions: assign({
                  count: ({ count }) => count - 1,
                }),
                cond: "doesCountGoesZero"
              },
            ],
          },
        },
      },
    },
    {
      guards: {
        doesCountGoesZero: (context) => context.count - 1 === 0,
        doesCountRemainAboveZero: (context) => context.count - 1 > 0,
      },
    });