Redux Thunk

A thunk is a middleware that allows you to write action creators that return a function instead of a plain action object. This function receives dispatch and getState as arguments, enabling you to:

1. Perform asynchronous logic: Delay a dispatch (e.g., after an API call or timeout).
2. Perform conditional dispatch: Check the current state using getState() before deciding whether to dispatch an action.
3. Complex synchronous logic: Execute logic that requires access to the store's state or dispatch method.

const INCREMENT_COUNTER = 'INCREMENT_COUNTER'

function increment() {
  return { type: INCREMENT_COUNTER }
}

// Example: Async thunk
function incrementAsync() {
  return dispatch => {
    setTimeout(() => {
      dispatch(increment())
    }, 1000)
  }
}

// Example: Conditional thunk
function incrementIfOdd() {
  return (dispatch, getState) => {
    const { counter } = getState()
    if (counter % 2 === 0) {
      return
    }
    dispatch(increment())
  }
}

Redux Thunk allows you to return values from the inner thunk function, which are then passed through as the return value of dispatch. This enables orchestrating complex asynchronous flows by having thunk action creators dispatch each other and returning Promises to wait for completion.

Key capabilities:

• Dispatching Thunks: You can dispatch both plain object actions and other thunks within a thunk.
• Accessing State: Thunks receive getState as an argument, allowing logic to depend on the current state.
• Promise Chaining: By returning a Promise from the thunk, the caller of store.dispatch(thunk) can use .then() to wait for the asynchronous activity to finish. This is particularly useful for Server Side Rendering (SSR) to ensure data is loaded before rendering.

import { createStore, applyMiddleware } from 'redux'
import { thunk } from 'redux-thunk'

// Setup store with thunk middleware
const store = createStore(rootReducer, applyMiddleware(thunk))

// A thunk action creator
function makeASandwichWithSecretSauce(forPerson) {
  return function (dispatch) {
    return fetchSecretSauce().then(
      sauce => dispatch(makeASandwich(forPerson, sauce)),
      error => dispatch(apologize('The Sandwich Shop', forPerson, error)),
    )
  }
}

// Using the thunk and chaining the result
store.dispatch(makeASandwichWithSecretSauce('My partner')).then(() => {
  console.log('Done!')
})

// Composing multiple thunks into a single flow
function makeSandwichesForEverybody() {
  return function (dispatch, getState) {
    if (!getState().sandwiches.isShopOpen) {
      return Promise.resolve()
    }

    return dispatch(makeASandwichWithSecretSauce('My Grandma'))
      .then(() =>
        Promise.all([
          dispatch(makeASandwichWithSecretSauce('Me')),
          dispatch(makeASandwichWithSecretSauce('My wife')),
        ]),
      )
      .then(() => dispatch(makeASandwichWithSecretSauce('Our kids')))
  }
}

When using react-redux, you can dispatch thunk action creators directly from component lifecycle methods (like componentDidMount or componentDidUpdate) via the dispatch prop provided by connect. This allows components to trigger asynchronous data loading when props change.

import { connect } from 'react-redux'
import { Component } from 'react'

class SandwichShop extends Component {
  componentDidMount() {
    // Dispatching a thunk on mount
    this.props.dispatch(makeASandwichWithSecretSauce(this.props.forPerson))
  }

  componentDidUpdate(prevProps) {
    // Dispatching a thunk when specific props change
    if (prevProps.forPerson !== this.props.forPerson) {
      this.props.dispatch(makeASandwichWithSecretSauce(this.props.forPerson))
    }
  }

  render() {
    return <p>{this.props.sandwiches.join('mustard')}</p>
  }
}

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

Redux Thunk allows you to inject a custom argument (often an API service layer) into your thunks. This argument is passed as the third parameter to the function returned by your action creator.

Using with Redux Toolkit

Use the getDefaultMiddleware callback within configureStore to set the extraArgument property inside the thunk configuration.

Using with manual setup

Use the withExtraArgument() function to generate the middleware.

Accessing the argument in a thunk

The extraArgument (or an object containing it) is provided as the third argument to the thunk function: (dispatch, getState, extraArgument) => { ... }.

// Redux Toolkit example with custom API service
import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit'
import rootReducer from './reducer'
import { myCustomApiService } from './api'

const store = configureStore({
  reducer: rootReducer,
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware({
      thunk: {
        extraArgument: myCustomApiService,
      },
    }),
})

// Accessing the argument in a thunk
function fetchUser(id) {
  // The `extraArgument` is the third arg for thunk functions
  return (dispatch, getState, api) => {
    // you can use api here
  }
}