Dispatching actions is always done synchronously. Data is fetched through AJAX asynchronously, so how do we get asynchronous to play well with Redux?
You should define your Redux states in the following way when setting up an asynchronous call:
- Loading: Here, we have the chance to show a spinner, not render part of the UI, or convey to the user in some other way that the UI is waiting for something
- Data successfully fetched: You should set a state for the fetched data
- Error happened: You should record the error somehow so that you are able to tell the user that an error occurred
You, by convention, use the word fetch to indicate that you are fetching data. Let's look at an example of what that might look like. First off, let's start by defining the steps we need to take:
- Create a reducer. This should have the ability to set different...