So this means that the action submitUserInformation() would return a Promise?
Sam Pakvis

From the name of submitUserInformation, I assumed this makes a request to a server. In our case, we use Thunks with async/await so we don’t have to deal with callbacks. So, I added that to the example.

If you are not doing it this way then you can simply update isLoading in component state, fire the action, and set isLoading back to false. I was hoping the example would make that clear.

The article’s example is a stateless app, so the data doesn’t persist in a database or hash store, but in all reality it would. If I was sending this information to an API to save user data, the action might look something like this:

Using redux-thunk middleware, this returns a function that sends a request to the server to save a new user with the information in the store. Upon it being successful, dispatch another action to reset the user data and clear out the form. Then in the component, you can display a spinner and remove it surrounding this request. Your component might look like this:

Bare in mind that this wasn’t originally part of the article’s example, but I wanted to throw something simple together to (hopefully) help explain how this might work with an asynchronous request.


One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.