redux-thunk es una librería que nos permite realizar operaciones asincrónicas en nuestros action creators.
El primer paso es instalar la librería con npm o Yarn:
# npmnpm install --save redux-thunk# yarnyarn add redux-thunk
El siguiente paso es configurarlo en nuestro store:
import { createStore, applyMiddleware } from 'redux';import thunk from 'redux-thunk';// ...const store = createStore(reducer,applyMiddleware(thunk));
Ahora debemos cambiar nuestros action creators para que retornen una función en vez de un objeto. Dentro de la función realizamos el llamado asincrónico e invocamos el dispatch
:
const newTask = task => {return dispatch => {return axios.post("...", task).then(response => {dispatch({type: "NEW_TASK",task: response});});};};
Eso es todo. La ventaja es que no es necesario cambiar nada en el resto de nuestro código.