Learn

At this point, we can write an app with Redux state management. But we haven’t covered one of the most common challenges in app development: making asynchronous requests. With a basic Redux store, we can only do synchronous updates. When an action is dispatched, it is immediately processed by a reducer, which updates the store accordingly. But when developing applications, we often want to perform asynchronous operations (such as making API calls) and update the state based on the results.

In this lesson, you will gain the tools necessary to write asynchronous logic that interacts with your Redux store.

  1. First, you will learn about two general concepts in computing: middleware and thunks, and the ways they relate to Redux.
  2. Next, you will learn about redux-thunk, a middleware that uses a thunk-based approach to writing asynchronous actions.
  3. Finally, you will practice using redux-thunk to add asynchronous functionality to your Redux apps.

This lesson uses Mock Service Worker to replicate the functionality of an external API. To use MSW, you’ll want to use Google Chrome and enable third-party cookies.

Instructions

You’ll notice our familiar recipe app has undergone some exciting changes. The structure of the app remains the same, but the app now contains more and richer data. In addition to titles, the recipes now have images attached. Refresh the browser, and note that this version also displays a loading state before the recipes are displayed.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?