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: "focus",
    initial: "idle",
    context: {
      count: 0,
    },
    states: {
      idle: {
        entry: ["resetCount"],
        on: {
          SEND: {
            target: "focusSend",
          },
        },
      },
      focusSend: {
        entry: ["sendMessage", "incCount"],
        on: {
          ACK: "focusAck",
        },
        after: {
          1000: {
            target: "focusPending",
          },
        },
      },
      focusPending: {
        on: {
          "": [
            { target: "focusSend", cond: "maxRetry" },
            { target: "focusFailed" },
          ],
        },
      },
      focusAck: {
        entry: ["logAck", "resetCount"],
        on: {
          SEND: {
            target: "focusSend",
          },
        },
      },
      focusFailed: {
        entry: ["logEnd", "resetCount"],
        on: {
          SEND: {
            target: "focusSend",
          },
        },
      },
    },
  },
  {
    actions: {
      sendMessage: assign((ctx) => {
        console.log(`${ctx.count}: sending out message`);
        return ctx;
      }),
      logEnd: () => {
        console.log("End");
      },
      logAck: () => {
        console.log("ACK");
      },
      resetCount: assign(() => {
        console.log("Reset");
        return { count: 0 };
      }),
      incCount: assign((ctx) => {
        console.log("inc Count");
        return { count: ctx.count + 1 };
      }),
    },
    guards: {
      maxRetry: (ctx) => {
        return ctx.count < 5;
      },
    },
  });