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.