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: "contacts",
  initial: "idle",
  context: {
    contactData: null,
    contactsData: null,
    contactId: null
  },
  states: {
    idle: {
      on: {
        FETCH_CONTACT: {
          target: "fetching_contact",
          actions: [
            assign({ loading: () => true }),
            assign({ contactId: (_, event) => event.id })
          ]
        },
        FETCH_CONTACTS: {
          target: "fetching_contacts",
          actions: [
            assign({
              loading: () => true
            }),
            assign({
              contactId: () => null
            })
          ]
        }
      }
    },
    fetching_contact: {
      invoke: {
        id: "fetch-contact",
        src: invokeFetchContact,
        onDone: {
          target: "idle",
          actions: [
            assign({ loading: () => false }),
            assign({ contactData: (_, event) => event.data })
          ]
        }
      }
    },
    fetching_contacts: {
      invoke: {
        id: "fetch-contacts",
        src: invokeFetchContacts,
        onDone: {
          target: "idle",
          actions: [
            assign({ loading: () => false }),
            assign({ contactsData: (_, event) => event.data })
          ]
        }
      }
    }
  }
});

function invokeFetchContact(context) {
  const { contactId } = context;
  return fetch(
    `https://jsonplaceholder.typicode.com/users/${contactId}`
  ).then(response => response.json());
}

function invokeFetchContacts() {
  return fetch("https://jsonplaceholder.typicode.com/users/").then(response =>
    response.json()
  );
}