Operaciones asincrónicas con redux-thunk
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:
1
# npm
2
npm install --save redux-thunk
3
4
# yarn
5
yarn add redux-thunk
Copied!
El siguiente paso es configurarlo en nuestro store:
1
import { createStore, applyMiddleware } from 'redux';
2
import thunk from 'redux-thunk';
3
4
// ...
5
6
const store = createStore(
7
reducer,
8
applyMiddleware(thunk)
9
);
Copied!
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:
1
const newTask = task => {
2
return dispatch => {
3
return axios.post("...", task)
4
.then(response => {
5
dispatch({
6
type: "NEW_TASK",
7
task: response
8
});
9
});
10
};
11
};
Copied!
Eso es todo. La ventaja es que no es necesario cambiar nada en el resto de nuestro código.
Last modified 3yr ago
Copy link