Nick Cantelmi
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:

  1. Updates isLoading in the component state to true.
  2. Dispatches the action to submit the form.
  3. Updates isLoading back 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.

    Nick Cantelmi

    Written by

    Software Engineer @ Chime

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade