Redux & Redux Toolkit Course
Redux & Redux Toolkit
/
Advanced

Redux Thunk Middleware

Definition

A specific piece of middleware that looks at every dispatched action. If the action is a plain object, it lets it pass. If the action is a FUNCTION, it intercepts it, stops it from hitting the reducer, and executes the function.

Explain Like I'm New

The Thunk middleware is literally just 14 lines of code. It acts as a traffic cop. It says: 'Are you an Object? Go to the Reducer. Are you a Function? Step out of the car, I need to execute you right now.'

Real World Example

This is the entire mechanism that makes Async API calls possible in Redux.

Common Use Cases

  • •Enabling asynchronous actions in Redux

Interactive Example

Loading...
Console output will appear here...

Interview Questions

basic

  • Is Redux Thunk included by default in plain, legacy Redux?

intermediate

  • If a Thunk function executes, can it dispatch OTHER actions?

Flash Cards

Question

Included by default?

Click to reveal answer
Answer

No. In legacy Redux, you had to `npm install redux-thunk` and configure it manually. (However, RTK `configureStore` does include it automatically).

Question

Dispatch other actions?

Click to reveal answer
Answer

Yes! The Thunk middleware explicitly passes the `dispatch` function INTO your Thunk, allowing your Thunk to dispatch as many plain object actions as it wants.