Async Actions with Middleware and Thunks
Create Redux middleware and thunks to handle asynchronous actions
Start
Key Concepts
Review core concepts you need to learn to master this subject
Thunks
Thunks in Redux
Middleware In Redux
Redux Thunk Middleware
The redux-thunk Package
`createAsyncThunk()
extraReducers Property
Thunks
Thunks
const alarmOne = () => {
console.log("Wake Up!!!");
};
alarmOne(); // "Wake Up!!!"
const getAlarmThunk = () => {
return () => {
console.log("Wake Up!!!");
}
};
const alarmTwo = getAlarmThunk();
alarmTwo(); // "Wake Up!!!"
A thunk is a function used to delay a computation until it is needed by an application. The term thunk comes from a play on the word “think” but in the past tense.
In JavaScript, functions are thunks since they hold a computation and they can be executed at any time or passed to another function to be executed at any time.
A common practice is for thunks to be returned by a higher-order function. The returned thunk contains the process that is to be delayed until needed.
- 1At 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,…
- 2Out of the box, Redux may meet most of your app’s state management needs. But every project is different, and so Redux provides some ways to customize its behavior. One of the ways we can customize…
- 3Before we get to redux-thunk specifically, we want to solidify our understanding of how middleware fits into Redux’s data flow. Let’s explore how middleware actually gets invoked in Redux, so that …
- 4Recall that our overarching goal in this lesson is to give you the tools you need to add asynchronous functionality to your Redux apps. One of the most flexible and popular ways to add asynchronous…
- 5To appreciate how thunks can help us integrate asynchronous actions into our Redux apps, let’s review the barriers to performing asynchronous operations that exist within traditional Redux. First, …
- 6To better appreciate redux-thunk, let’s review the process of retrieving data from a Redux store. For example, suppose we have a list of users’ data, and want to retrieve the data corresponding to …
- 7At this point, you are ready to use thunks to define asynchronous operations in Redux. But you may be curious about how redux-thunk works. In order to allow us to write action creators that return …
- 8In this lesson you: * Learned about Redux middleware and wrote your own simple logging middleware * Encountered thunks and learned about how valuable thunks are for deferring computation const r…
What you'll create
Portfolio projects that showcase your new skills
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory
Async Actions with Middleware and Thunks
Start