Github url

redux-thunk

by reduxjs

reduxjs /redux-thunk

Thunk middleware for Redux

14.9K Stars 839 Forks Last release: about 2 years ago (v2.3.0) MIT License 121 Commits 12 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

Redux Thunk

Thunk middleware for Redux.

build statusnpm versionnpm downloads

npm install redux-thunk

Note on 2.x Update

Most tutorials today assume Redux Thunk 1.x so you might run into an issue when running their code with 2.x.
**If you use Redux Thunk 2.x in CommonJS environment,[don’t forget to add

.default

to your import](https://github.com/reduxjs/redux-thunk/releases/tag/v2.0.0):**

- const ReduxThunk = require('redux-thunk') + const ReduxThunk = require('redux-thunk').default

If you used ES modules, you’re already all good:

import ReduxThunk from 'redux-thunk'; // no changes here 😀

Additionally, since 2.x, we also support aUMD build:

const ReduxThunk = window.ReduxThunk.default;

As you can see, it also requires

.default

at the end.

Why Do I Need This?

With a plain basic Redux store, you can only do simple synchronous updates by dispatching an action. Middleware extend the store's abilities, and let 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:

You may also want to read theRedux FAQ entry on choosing which async middleware to use.

While the thunk middleware is not directly included with the Redux core library, it is used by default in our**[

@reduxjs/toolkit

package](https://github.com/reduxjs/redux-toolkit)**.

Motivation

Redux Thunk middlewareallows 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 methods

dispatch

and

getState

as parameters.

An action creator that returns a function to perform asynchronous dispatch:

const INCREMENT\_COUNTER = 'INCREMENT\_COUNTER'; function increment() { return { type: INCREMENT\_COUNTER, }; } function incrementAsync() { return (dispatch) =\> { setTimeout(() =\> { // Yay! Can invoke sync or async actions with `dispatch` dispatch(increment()); }, 1000); }; }

An action creator that returns a function to perform conditional dispatch:

function incrementIfOdd() { return (dispatch, getState) =\> { 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.

// 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".

Installation

npm install redux-thunk

Then, to enable Redux Thunk, use[

applyMiddleware()

](https://redux.js.org/api/applymiddleware):

import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import rootReducer from './reducers/index'; // Note: this API requires [email protected]\>=3.1.0 const store = createStore(rootReducer, applyMiddleware(thunk));

Composition

Any return value from the inner function will be available as the return value of

dispatch

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:

import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import rootReducer from './reducers'; // Note: this API requires [email protected]\>=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, secretSauce, }; } function apologize(fromPerson, toPerson, error) { return { type: 'APOLOGIZE', fromPerson, toPerson, error, }; } function withdrawMoney(amount) { return { type: 'WITHDRAW', amount, }; } // Even without middleware, you can dispatch an action: store.dispatch(withdrawMoney(100)); // But what do you do when you need to start an asynchronous action, // such as an API call, or a router transition? // Meet thunks. // A thunk in this context is a function that can be dispatched to perform async // activity and can dispatch actions and read state. // This is an action creator that returns a thunk: function makeASandwichWithSecretSauce(forPerson) { // We can invert control here by returning a function - the "thunk". // When this function is passed to `dispatch`, 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)), ); }; } // Thunk middleware lets me dispatch thunk async actions // as if they were actions! store.dispatch(makeASandwichWithSecretSauce('Me')); // It even takes care to return the thunk’s return value // from the dispatch, so I can chain Promises as long as I return them. store.dispatch(makeASandwichWithSecretSauce('My partner')).then(() =\> { console.log('Done!'); }); // In fact I can write action creators that dispatch // actions and async actions from other action creators, // and I can build my control flow with Promises. function makeSandwichesForEverybody() { return function(dispatch, getState) { 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'), ), ); }; } // This is very useful for server side rendering, because I can wait // until data is available, then synchronously render the app. store .dispatch(makeSandwichesForEverybody()) .then(() =\> response.send(ReactDOMServer.renderToString(<myapp store="{store}"></myapp>)), ); // I can also dispatch a thunk async action from a component // any time its props change to load the missing data. import { connect } from 'react-redux'; import { Component } from 'react'; class SandwichShop extends Component { componentDidMount() { this.props.dispatch(makeASandwichWithSecretSauce(this.props.forPerson)); } componentDidUpdate(prevProps) { if (prevProps.forPerson !== this.props.forPerson) { this.props.dispatch(makeASandwichWithSecretSauce(this.props.forPerson)); } } render() { return 

{this.props.sandwiches.join('mustard')}

; } } export default connect((state) =\> ({ sandwiches: state.sandwiches, }))(SandwichShop);

Injecting a Custom Argument

Since 2.1.0, Redux Thunk supports injecting a custom argument using the

withExtraArgument

function:

const store = createStore( reducer, applyMiddleware(thunk.withExtraArgument(api)), ); // later function fetchUser(id) { return (dispatch, getState, api) =\> { // you can use api here }; }

To pass multiple things, just wrap them in a single object. Using ES2015 shorthand property names can make this more concise.

const api = "http://www.example.com/sandwiches/"; const whatever = 42; const store = createStore( reducer, applyMiddleware(thunk.withExtraArgument({ api, whatever })), ); // later function fetchUser(id) { return (dispatch, getState, { api, whatever }) =\> { // you can use api and something else here }; }

License

MIT

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.