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],}