Artículo original: Redux Thunk Explained with Examples

Redux Thunk es un middleware que nos permite retornar funciones, en lugar de solo acciones en Redux. Esto nos permite trabajar con acciones retrasadas y promesas.

Uno de los principales casos de uso para este middleware es el manejo de acciones que no son asíncronas, por ejemplo, el uso de Axios para enviar peticiones GET. Redux Thunk nos permite enviar esas acciones asíncronamente y resolver cada promesa que se ha retornado.

Instalación

Redux Thunk puede ser instalado ejecutando  npm install redux-thunk --save o yarn add redux-thunk en la línea de comandos.

Debido a que es una herramienta de Redux, es necesario tener Redux previamente instalado. Una vez instalado, se habilita usando  applyMiddleware():

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

// lo aplicamos al "store" de nuestra aplicación
const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

Como usar Redux Thunk

Una vez Redux Thunk ha sido instalado e incluido en el proyecto con applyMiddleware(thunk), ya es posible enviar acciones asíncronamente.

Como ejemplo, aquí se tiene un incrementador de contador simple: 

const INCREMENTAR_CONTADOR = 'INCREMENTAR_CONTADOR';

function incrementar() {
  return {
    type: INCREMENTAR_CONTADOR
  };
}

function incrementarAsync() {
  return dispatch => {
    setTimeout(() => {
      // Es posible invocar acciones sincrónicas o asicrónicas con "dispatch"
      dispatch(incrementar());
    }, 1000);
  };
}

Y así es como se configuran las acciones de éxito y error al momento de trabajar con una API:

const OBTENER_USUARIO_ACTUAL = 'OBTENER_USUARIO_ACTUAL';
const OBTENER_USUARIO_ACTUAL_ERROR = 'OBTENER_USUARIO_ACTUAL_ERROR';
const OBTENER_USUARIO_ACTUAL_OK = 'OBTENER_USUARIO_ACTUAL_OK';

const obtenerUsuario = () => {
  return (dispatch) => { // Se retorna una función anónima
      
    // Acción inicial enviada
    dispatch({ type: OBTENER_USUARIO_ACTUAL });
      
    // Se retorna una promesa con acciones de éxito y error
    return axios.get('/api/auth/user').then(  
      usuario => dispatch({ type: OBTENER_USUARIO_ACTUAL_OK, usuario }),
      error => dispatch({ type: OBTENER_USUARIO_ACTUAL_ERROR, error })
    );
      
  };
};

Más información: