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

machine.js

const pageMachine = Machine({
  id: 'pageTransition',
  initial: 'idle',
  context: {
    location: '/',
    nextLocation: null,
    data: {},
    forms: new Map(),
    error: null
  },
  states: {
    idle: {
      on: {
        GET: {
          target: 'loading',
          actions: assign({
            nextLocation: (c, e) => e.location
          })
        },
        POST: {
          target: 'posting',
          actions: assign({
            nextLocation: (c, e) => e.location,
            forms: (c, e) => {
              forms.set(e.location.key, e.form)
              return forms;
            }
          })
        }
      }
    },
    loading: {
      on: {
        RESOLVE: {
          target: 'idle',
          actions: assign({
            data: (c, e) => e.data
          })
        },
        LOADER_ERROR: {
          target: 'idle',
          actions: assign({
            error: (c, e) => e.error,
            data: (c, e) => e.data
          })
        },
        MODULE_ERROR: 'reloading'
      }
    },
    posting: {
      on: {
        RESOLVE: {
          target: 'loading',
          actions: assign({
            nextLocation: (c, e) => e.location,
            forms: (c, e) => {
              c.forms.delete(e.formKey)
            }
          })
        },
        ACTION_ERROR: {
          target: "idle",
          actions: assign({
            error: (c, event) => event.error,
            data: (c, event) => event.data
          })
        }
      }
    },
    reloading: {
      type: "final"
    }
  }
});