Feb 23, 2017 · 1 min read
Apologies if that wasn’t clear. We typically use async await to make sure the action finishes and update isLoading around the action call. In the example above, you would want to have a function that does three things:
- Updates
isLoadingin the component state to true. - Dispatches the action to submit the form.
- Updates
isLoadingback to false once the submit action finishes processing.
The function might look something like this:
async submitForm() {
this.setState({isLoading: true});
await this.props.submitUserInformation();
this.setState({isLoading: false});
}And you could have a button to call that action like:
<button onClick={() => this.submitForm()}>Submit</button>With async await, we are basically able to achieve a synchronous flow in a naturally asynchronous process. Therefore, setting isLoading back to false only happens after the action completes.
I hope this helps. Feel free to ask more questions if not.
