Typical Asynchronous Action Example
Explore how to manage asynchronous API requests in React applications with Redux. Understand the use of thunk middleware to dispatch actions for loading states, successful data fetches, and error handling. This lesson guides you through implementing typical asynchronous patterns using ES2015+ features and middleware for a predictable state update.
We'll cover the following...
Fetching GithHub data asynchronously
Many applications working with APIs inform the user that data is loading while it’s being fetched from the API. Loading spinners or text such as “Loading data…” are common ways of conveying this information. Thunk actions are a great way to cover this case using a reducer.
Note: For the SPA widgets in this lesson, you’ll need to open the web inspector to view the app response. Click the link given below the widget to open the app in a new browser tab. Then, right-click that webpage and select “Inspect.” The web inspector will open, where you can go in the “Console” tab and see the app response.
Let’s set up three cases in the reducer that react to the following three actions:
...