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

FormMachine.js

const constants = {
  ACTIONS: { changeAction: 'changeAction', onSuccess: 'onSuccess' },
  GUARDS: { isFormValid: 'isFormValid' },
  SERVICES: { doSubmit: 'doSubmit' }
};

const {ACTIONS, GUARDS, SERVICES} = constants;
  const formMachine = Machine({
  id: 'form',
  initial: 'idle',
  context: {
    formData: {},
    submitResult: undefined,
    submitError: undefined,
  },
  states: {
    idle: {
      on: {
        SUBMIT: [
          { target: 'loading', cond: GUARDS.isFormValid },
          { target: 'invalid' }
        ],
        CHANGE: {
          actions: ACTIONS.changeAction
        }
      }
    },
    loading: {
      invoke: {
        src: SERVICES.doSubmit,
        onDone: {
          target: 'success',
          actions: assign({ submitResult: (_, event) => event.data })
        },
        onError: {
          target: 'failure',
          actions: assign({ submitError: (_, event) => event.data })
        }
      }
    },
    invalid: {
      on: {
        CHANGE: [
          { target: 'idle', cond: GUARDS.isFormValid },
          { actions: ACTIONS.changeAction }
        ]
      }
    },
    success: {
      type: 'final',
      entry: [ACTIONS.onSuccess]
    },
    failure: {
      on: {
        SUBMIT: [
          { target: 'loading', cond: GUARDS.isFormValid },
          'invalid'
        ],
        CHANGE: {
          target: 'idle',
          actions: ACTIONS.changeAction
        }
      }
    }
  }
}, {
  guards: {
    [GUARDS.isFormValid]: (context, _event) => !Object.values(context.formData).filter(r => !r).length

  },
  actions: {
    [ACTIONS.changeAction]: assign({
      formData: (context, event) => ({
        ...context.formData,
        [event.data.key]: event.data.value
      })
    })
  },
  services: {
    [SERVICES.doSubmit]: async (context, _event) => new Promise(resolve => setTimeout(() => resolve(context.formData), 5000))
  }
});

  

machine.js

const constants = {
  ACTIONS: { changeAction: 'changeAction', onSuccess: 'onSuccess' },
  GUARDS: { isFormValid: 'isFormValid' },
  SERVICES: { doSubmit: 'doSubmit' }
};

const {ACTIONS, GUARDS, SERVICES} = constants;
  const formMachine = Machine({
  id: 'form',
  initial: 'idle',
  context: {
    formData: {},
    submitResult: undefined,
    submitError: undefined,
  },
  states: {
    idle: {
      on: {
        SUBMIT: [
          { target: 'loading', cond: GUARDS.isFormValid },
          { target: 'invalid' }
        ],
        CHANGE: {
          actions: ACTIONS.changeAction
        }
      }
    },
    loading: {
      invoke: {
        src: SERVICES.doSubmit,
        onDone: {
          target: 'success',
          actions: assign({ submitResult: (_, event) => event.data })
        },
        onError: {
          target: 'failure',
          actions: assign({ submitError: (_, event) => event.data })
        }
      }
    },
    invalid: {
      on: {
        CHANGE: [
          { target: 'idle', cond: GUARDS.isFormValid },
          { actions: ACTIONS.changeAction }
        ]
      }
    },
    success: {
      type: 'final',
      entry: [ACTIONS.onSuccess]
    },
    failure: {
      on: {
        SUBMIT: [
          { target: 'loading', cond: GUARDS.isFormValid },
          'invalid'
        ],
        CHANGE: {
          target: 'idle',
          actions: ACTIONS.changeAction
        }
      }
    }
  }
}, {
  guards: {
    [GUARDS.isFormValid]: (context, _event) => !Object.values(context.formData).filter(r => !r).length

  },
  actions: {
    [ACTIONS.changeAction]: assign({
      formData: (context, event) => ({
        ...context.formData,
        [event.data.key]: event.data.value
      })
    })
  },
  services: {
    [SERVICES.doSubmit]: async (context, _event) => new Promise(resolve => setTimeout(() => resolve(context.formData), 5000))
  }
});