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

machine.js

const newMachine = {
  id: 'newProduct',
  initial: 'idle',
  states: {
    idle: {
      on: {
        save: 'saving'
      }
    },
    saving: {
      type: 'final'
    }
  }
};

  const fetchMachine = Machine({
    id: 'fetch',
    initial: 'showingList',
    context: {
      products: []
    },
    states: {
      showingList: {
        on: {
          newClicked: 'creatingNew'
        }
      },
      creatingNew: {
        invoke: {
          src: newMachine,
          onDone: {
            target: 'saved'
          }
        }
      },
      saved: {
        entry: 'addNewItem',
        always: {
          target: 'showingList'
        }
      }
    }
  });