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

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.

Redux Middleware
Lesson 1 of 2
  1. 1
    Introduction
    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,…
    Start
  2. 2
    Middleware in Redux
    Out 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…
    Start
  3. 3
    Write Your Own Middleware
    Before 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 …
    Start
  4. 4
    Introduction to Thunks
    Recall 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…
    Start
  5. 5
    `redux-thunk`
    To 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, …
    Start
  6. 6
    Writing Thunks in Redux
    To 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 …
    Start
  7. 7
    `redux-thunk` Source Code
    At 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 …
    Start
  8. 8
    Conclusion
    In 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…
    Start

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo