Middlewares

Search…
Middlewares
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:
1
const logger = store => next => action => {
2
  console.log("dispatching", action);
3
  const result = next(action);
4
  console.log("next state", store.getState());
5
  return result;
6
};
Copied!
Para configurar este middleware en el store debemos pasarle un tercer parámetro a createStore utilizando la función applyMiddleware de Redux:
1
import { createStore, applyMiddleware } from 'redux';
2
​
3
// ... la función logger
4
​
5
const store = createStore(
6
  reducer,
7
  { tasks: []} ,
8
  applyMiddleware(logger) // acá configuramos el middleware
9
);
Copied!
Veamos otro ejemplo. Imagina que queremos retrasar todos los llamados al dispatch por 5 segundos. Podemos crear un middleware de la siguiente forma:
1
const delayer = store => next => action => {
2
  return setTimeout(() => {
3
    next(action)
4
  }, 5000);
5
};
6
​
7
const store = createStore(
8
  reducer,
9
  { tasks: []} ,
10
  applyMiddleware(delayer)
11
);
Copied!
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:
1
const store = createStore(
2
  reducer,
3
  { tasks: []} ,
4
  applyMiddleware(logger, delayer)
5
);
Copied!
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.
Usando la librería react-redux
Operaciones asincrónicas con redux-thunk
Last modified 3yr ago
Copy link