Contact Form

The source code for all examples can be found on Github.

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
  • Effects with Payload
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],
}
Crafted with ♡ by Robin Weser