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 { log } = actions;

const fetchLuke = () =>
  fetch("https://swapi.co/api/people/1/").then(response => response.json());

// Define machine externally
const toggleMachine = Machine({
  id: "toggle",
  initial: "inactive",
  states: {
    inactive: {
      on: {
        TOGGLE: "activating"
      }
    },
    activating: {
      entry: log("activating"),
      invoke: {
        id: "fetchLuke",
        src: (context, event) => fetchLuke(),
        onDone: {
          target: "active",
          actions: log((context, event) => event.data)
        },
        onError: {
          target: "inactive"
        }
      }
    },
    active: {
      on: { TOGGLE: "inactive" }
    }
  }
});