22. El paso previo a conectar la API, los middlewares de Redux

El concepto de middleware aparece de forma constante en todos los sistemas de desarrollo modernos.

Hay que verlo siempre como ese punto intermedio que es capaz de alterar lo que parece inalterable. Un proceso que va de un sitio a otro pero que no sabemos como meterle mano.

El motivo de introducirlos es porque he leído de forma recurrente que la conexión a una API desde React utilizando redux va a darme problemas y que tendré que utilizar una librería nueva: redux-thunk

Pero antes de pasar a eso veo con detalle los middleware en redux.

La explicación en castellano es larga, detalla con demasiado esmero las razones y motivos por los que se van descartando los intentos de crear una intermediación entre petición y respuesta.

Al final presenta siete ejemplos, algo ligeros, pero efectivos.

Me quedo con el de logger:

export const logger = store => next => action => {
  console.log("dispatching", action);
  let result = next(action);
  console.log("next state", store.getState());
  return result;
};

Tan sencillo como ampliar el código del día 21 con esto en el index.js:

import { logger } from "./middlewares";
const store = createStore(counter, applyMiddleware(logger));

Puedes verlo con detalle en el código de sandbox.