Redux Thunk
Thunk middleware for Redux. It allows writing functions with logic inside that can interact with a Redux store's dispatch and getState methods.
For complete usage instructions and useful patterns, see the Redux docs Writing Logic with Thunks page.
Installation and Setup
Redux Toolkit
If you're using our official Redux Toolkit package as recommended, there's nothing to install - RTK'sconfigureStore API already adds the thunk middleware by default:
```js
import { configureStore } from '@reduxjs/toolkit'
import todosReducer from './features/todos/todosSlice'
import filtersReducer from './features/filters/filtersSlice'
const store = configureStore({
reducer: {
todos: todosReducer,filters: filtersReducerManual Setup
If you're using the basic ReduxcreateStore API and need to set this up manually, first add the redux-thunk package:
```sh
npm install redux-thunk
yarn add redux-thunk
```
The thunk middleware is the default export.
More Details: Importing the thunk middleware
If you're using ES modules:
```js
import thunk from 'redux-thunk' // no changes here đ
```
If you use Redux Thunk 2.x in a CommonJS environment,
donât forget to add .default to your import:
```diff
- const thunk = require('redux-thunk')
- const thunk = require('redux-thunk').default
applyMiddleware():
```js
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import rootReducer from './reducers/index'
const store = createStore(rootReducer, applyMiddleware(thunk))
```
Injecting a Custom Argument
Since 2.1.0, Redux Thunk supports injecting a custom argument into the thunk middleware. This is typically useful for cases like using an API service layer that could be swapped out for a mock service in tests. For Redux Toolkit, thegetDefaultMiddleware callback inside of configureStore lets you pass in a custom extraArgument:
```js
import { configureStore } from '@reduxjs/toolkit'
import rootReducer from './reducer'
import { myCustomApiService } from './api'
const store = configureStore({
reducer: rootReducer,
middleware: getDefaultMiddleware =>
getDefaultMiddleware({thunk: {extraArgument: myCustomApiService}})extraArgument is the third arg for thunk functions
return (dispatch, getState, api) => {
// you can use api heregetDefaultMiddleware({thunk: {extraArgument: {api: myCustomApiService,otherValue: 42}}})// you can use api and something else herewithExtraArgument() function should be used to generate the correct thunk middleware:
```js
const store = createStore(reducer, applyMiddleware(withExtraArgument(api)))
```
Why Do I Need This?
With a plain basic Redux store, you can only do simple synchronous updates by dispatching an action. Middleware extends the store's abilities, and lets you write async logic that interacts with the store. Thunks are the recommended middleware for basic Redux side effects logic, including complex synchronous logic that needs access to the store, and simple async logic like AJAX requests. For more details on why thunks are useful, see:- Redux docs: Writing Logic with Thunks
- Stack Overflow: Dispatching Redux Actions with a Timeout
- Stack Overflow: Why do we need middleware for async flow in Redux?
- What the heck is a "thunk"?
- Thunks in Redux: The Basics
@reduxjs/toolkit package.
Motivation
Redux Thunk middleware allows you to write action creators that return a function instead of an action. The thunk can be used to delay the dispatch of an action, or to dispatch only if a certain condition is met. The inner function receives the store methodsdispatch and getState as parameters.
An action creator that returns a function to perform asynchronous dispatch:
```js
const INCREMENTCOUNTER = 'INCREMENTCOUNTER'
function increment() {
return {
type: INCREMENT_COUNTERsetTimeout(() => {// Yay! Can invoke sync or async actions with `dispatch`dispatch(increment())}, 1000)const { counter } = getState()if (counter % 2 === 0) {return}dispatch(increment())Whatâs a thunk?!
A thunk is a function that wraps an expression to delay its evaluation. ```js // calculation of 1 + 2 is immediate // x === 3 let x = 1 + 2 // calculation of 1 + 2 is delayed // foo can be called later to perform the calculation // foo is a thunk! let foo = () => 1 + 2 ``` The term originated as a humorous past-tense version of "think".Composition
Any return value from the inner function will be available as the return value ofdispatch itself. This is convenient for orchestrating an asynchronous
control flow with thunk action creators dispatching each other and returning
Promises to wait for each otherâs completion:
```js
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import rootReducer from './reducers'
// Note: this API requires redux@>=3.1.0
const store = createStore(rootReducer, applyMiddleware(thunk))
function fetchSecretSauce() {
return fetch('https://www.google.com/search?q=secret+sauce')
}
// These are the normal action creators you have seen so far.
// The actions they return can be dispatched without any middleware.
// However, they only express âfactsâ and not the âasync flowâ.
function makeASandwich(forPerson, secretSauce) {
return {
type: 'MAKE_SANDWICH',forPerson,secretSaucetype: 'APOLOGIZE',fromPerson,toPerson,errortype: 'WITHDRAW',amountdispatch, the thunk middleware will intercept it,
// and call it with dispatch and getState as arguments.
// This gives the thunk function the ability to run some logic, and still interact with the store.
return function (dispatch) {
return fetchSecretSauce().then(sauce => dispatch(makeASandwich(forPerson, sauce)),error => dispatch(apologize('The Sandwich Shop', forPerson, error)))if (!getState().sandwiches.isShopOpen) {// You donât have to return Promises, but itâs a handy convention// so the caller can always call .then() on async dispatch result.return Promise.resolve()}// We can dispatch both plain object actions and other thunks,// which lets us compose the asynchronous actions in a single flow.return dispatch(makeASandwichWithSecretSauce('My Grandma')).then(() =>Promise.all([dispatch(makeASandwichWithSecretSauce('Me')),dispatch(makeASandwichWithSecretSauce('My wife'))])).then(() => dispatch(makeASandwichWithSecretSauce('Our kids'))).then(() =>dispatch(getState().myMoney > 42? withdrawMoney(42): apologize('Me', 'The Sandwich Shop')))response.send(ReactDOMServer.renderToString(<MyApp store={store} />))this.props.dispatch(makeASandwichWithSecretSauce(this.props.forPerson))if (prevProps.forPerson !== this.props.forPerson) {this.props.dispatch(makeASandwichWithSecretSauce(this.props.forPerson))}return <p>{this.props.sandwiches.join('mustard')}</p>