Artigo original: Redux Thunk Explained with Examples

Redux Thunk é um middleware que permite retornar funções, em vez de apenas ações, dentro do Redux. Isso permite ações com atraso, incluindo trabalhar com promises.

Um dos principais casos de uso desse middleware é para manipular ações que podem não ser síncronas, como, por exemplo, ao usar o axios para enviar uma solicitação GET. O Redux Thunk nos permite fazer o dispatch (envio) dessas ações de forma assíncrona e resolver cada promise que é retornada.

Instalação e configuração

O Redux Thunk pode ser instalado executando npm install redux-thunk --save ou yarn add redux-thunkna linha de comando, dependendo do gerenciador de pacotes que você utilizar.

Por ser uma ferramenta do Redux, você naturalmente precisará ter o Redux configurado. Uma vez instalado, ele é ativado usando applyMiddleware():

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

Como usar o Redux Thunk

Uma vez que o Redux Thunk tenha sido instalado e incluído em seu projeto com applyMiddleware(thunk), você pode começar a fazer o dispatch das ações de modo assíncrono.

Por exemplo, esse é um contador simples de incrementos:

const INCREMENT_COUNTER = 'INCREMENT_COUNTER';

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

function incrementAsync() {
  return dispatch => {
    setTimeout(() => {
      // Você pode invocar ações síncronas ou assíncronas com o `dispatch`
      dispatch(increment());
    }, 1000);
  };
}

Aqui vemos como configurar ações de sucesso e falha após pesquisar uma API:

const GET_CURRENT_USER = 'GET_CURRENT_USER';
const GET_CURRENT_USER_SUCCESS = 'GET_CURRENT_USER_SUCCESS';
const GET_CURRENT_USER_FAILURE = 'GET_CURRENT_USER_FAILURE';

const getUser = () => {
  return (dispatch) => {     //funções anônimas
    // Ação inicial dispatched (enviada)
    dispatch({ type: GET_CURRENT_USER });
    // Retorno da promise, passando as ações em caso de sucesso ou falha
    return axios.get('/api/auth/user').then(  
      user => dispatch({ type: GET_CURRENT_USER_SUCCESS, user }),
      err => dispatch({ type: GET_CURRENT_USER_FAILURE, err })
    );
  };
};

Mais Informações: