Contact Form

This example is closer to real-world usage and shows how effects can be used to incorporate asynchronous behaviour such as data fetching and API calls.

Coverage

• Model
• Actions
• Actions with Payload
• Effects

function sendForm(data, onSuccess, onError) {
  setTimeout(() => {
    if (data.firstName && data.lastName && data.email) {
      alert('Success!')
      onSuccess()
    } else {
      onError('Data missing!')
    }
  }, 2000)
}

const model = {
  loading: false,
  error: null,
  firstName: '',
  lastName: '',
  email: '',
}

const actions = {
  setFirstName: (state, firstName) => [
    {
      ...state,
      firstName,
    },
  ],
  setLastName: (state, lastName) => [
    {
      ...state,
      lastName,
    },
  ],
  setEmail: (state, email) => [
    {
      ...state,
      email,
    },
  ],
  submitForm: (state, data) => [
    {
      ...state,
      loading: true,
    },
    (actions) => sendForm(data, actions.onSuccess, actions.onError),
  ],
  onError: (state, error) => [
    {
      ...state,
      loading: false,
      error,
    },
  ],
  onSuccess: (state) => [model],
}