Un middleware en Redux no es más que una forma de interceptar los llamados al dispatch
y agregar lógica adicional.
Por ejemplo, si queremos imprimir todos los llamados al dispatch
y los cambios al estado podemos crear el siguiente middleware:
const logger = store => next => action => {console.log("dispatching", action);const result = next(action);console.log("next state", store.getState());return result;};
Para configurar este middleware en el store debemos pasarle un tercer parámetro a createStore
utilizando la función applyMiddleware
de Redux:
import { createStore, applyMiddleware } from 'redux';// ... la función loggerconst store = createStore(reducer,{ tasks: []} ,applyMiddleware(logger) // acá configuramos el middleware);
Veamos otro ejemplo. Imagina que queremos retrasar todos los llamados al dispatch por 5 segundos. Podemos crear un middleware de la siguiente forma:
const delayer = store => next => action => {return setTimeout(() => {next(action)}, 5000);};const store = createStore(reducer,{ tasks: []} ,applyMiddleware(delayer));
Y ahora, cada vez que llamemos dispatch
, el cambio de estado se va a realizar 5 segundos después.
También es posible instalar varios middlewares separándolos por comas:
const store = createStore(reducer,{ tasks: []} ,applyMiddleware(logger, delayer));
En la práctica es raro que escribas un middleware para una aplicación. Sin embargo, existen librerías como redux-thunk o redux-saga que hacen uso de los middlewares.