reduxjs/redux-thunk

★ 17,709TypeScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((repo))
    What it does
      Async Redux actions
      Conditional dispatch
      Side effect handling
    How it works
      Return function not object
      Receives dispatch and getState
      Middleware intercepts
    Use cases
      API data fetching
      Chained async steps
      Mock injection in tests
    Setup
      npm install
      applyMiddleware
      Redux Toolkit built-in

mindmap root((repo)) What it does Async Redux actions Conditional dispatch Side effect handling How it works Return function not object Receives dispatch and getState Middleware intercepts Use cases API data fetching Chained async steps Mock injection in tests Setup npm install applyMiddleware Redux Toolkit built-in

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Fetch data from an API in a Redux app and dispatch actions to update state when the request succeeds or fails.

USE CASE 2

Dispatch a Redux action only when a condition is true by reading current state inside a thunk function.

USE CASE 3

Chain multiple async steps together in one thunk, such as logging in and then fetching user data in sequence.

Tech stack

TypeScriptJavaScriptRedux

Getting it running

Difficulty · easy Time to first run · 30min

Already included in Redux Toolkit, no separate install needed if you are using configureStore from Redux Toolkit.

In plain English

Redux Thunk is a small add-on for Redux, the popular state-management library for JavaScript apps. Redux on its own only knows how to handle plain, synchronous updates: you tell the store about an event by dispatching an action object, and a reducer updates the state. That works fine for simple changes, but it leaves you stuck when you need to do something like wait for a network request to come back before updating the state, or only dispatch an action if some condition is true. Redux Thunk fills that gap. The middleware lets you write action creators that return a function instead of an action object. That inner function receives the store's dispatch and getState methods as arguments, so it can look at the current state, run async logic such as an AJAX call, and then dispatch one or more real actions when the work is done. A thunk, in general programming terms, is a function that wraps an expression to delay its evaluation, and that is exactly what is happening here: the work is described once and run later, when the middleware invokes it. You can also inject a custom argument (such as an API service) into every thunk, which is convenient for swapping in a mock during tests. You would reach for Redux Thunk when you need to handle side effects in a Redux app, like fetching data, conditional dispatching, or chaining a few async steps together. If you are already using Redux Toolkit, the recommended modern Redux setup, the thunk middleware is included automatically, otherwise you install the redux-thunk package and wire it up with applyMiddleware. The codebase is written in TypeScript and published to npm.

Copy-paste prompts

Prompt 1

I have a Redux store and need to fetch user data from an API. Show me how to write a redux-thunk action creator that calls /api/users and dispatches a success or error action depending on the result.

Prompt 2

How do I inject a custom API service into every redux-thunk so I can swap it out with a mock during tests? Show me the setup code.

Prompt 3

I am using Redux Toolkit, is redux-thunk already included? Show me how to write an async thunk with createAsyncThunk instead of writing one manually.

Prompt 4

What is the difference between redux-thunk and redux-saga for handling async logic? When should I use one over the other?

Open on GitHub → Explain another repo

← reduxjs on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.