Creación de Middleware Personalizado en Redux

¿Qué son los middleware en el contexto de Redux?

Los middleware son piezas de código que se ejecutan entre el disparo de una acción y su llegada al reducer en Redux. Esta técnica, ampliamente utilizada en el manejo de servidores backend, permite realizar diversas tareas esenciales para el desarrollo de aplicaciones:

• Manejo de Errores: Puedes integrar logs de errores y enviarlos a servicios como Sentry.
• Fetch de Datos: Realiza solicitudes y gestiona datos de manera eficiente.
• Depuración de Aplicaciones: Ayuda a depurar el flujo de datos en tu aplicación.

¿Cómo funcionan los middleware en Redux?

Para entender los middleware, es crucial recordar algunos conceptos clave de Redux:

1. Store Creator: Función que crea el Store de Redux.
2. Enhancers: Funciones de orden superior que toman un Store Creator y devuelven una versión mejorada.
3. Compose: Utilidad de programación funcional que combina múltiples funciones de manera ordenada.

Creación de un Middleware Personalizado

La implementación de un middleware personalizado, denominado Logger, se basa en funciones currificadas, donde cada función devuelve otra función:

const logger = store => next => action => {
  console.log('Dispatching action:', action);
  return next(action);
};

• La primera función recibe el store.
• next es llamada cuando el middleware termina su trabajo y pasa la acción al reducer.
• action contiene la información de la acción disparada.

Integración del Middleware en nuestra Aplicación

Para añadir un middleware:

1. Importa los middleware y Redux:

   import { createStore, applyMiddleware, compose } from 'redux';
   import logger from './middleware/logger';
   

2. Usa applyMiddleware para integrarlo:

   const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
   const store = createStore(
     rootReducer,
     composeEnhancers(applyMiddleware(logger))
   );
   

Este enfoque te permite agregar varios middleware y enhancers, potenciando el Store.

Implementación avanzada: Manipular acciones con middleware

Modificar acciones antes de que lleguen al reducer puede enriquecer tu aplicación. Imagina que recibimos datos de una API y queremos agregar un Pokémon personalizado:

Creación del Middleware Featuring

const featuring = store => next => action => {
  if (action.type === 'FETCH_POKEMON_SUCCESS') {
    const newPayload = [{ name: 'Eddy' }, ...action.payload];
    const updatedAction = {
      ...action,
      payload: newPayload
    };
    return next(updatedAction);
  }
  return next(action);
};

Aplicación de Múltiples Middleware

La función applyMiddleware acepta múltiples middleware:

const store = createStore(
  rootReducer,
  composeEnhancers(applyMiddleware(logger, featuring))
);

Con esta práctica, observamos cómo agregar y modificar los datos antes de llegar al reducer, permitiéndonos personalizar la experiencia del usuario.

Desafío para ti

Espero que estas explicaciones te hayan avivado el interés por los middleware. Ahora te invito a crear un middleware propio y compartir tu solución. Estoy ansioso por ver tu creatividad en acción. ¡Sigue explorando y aprendiendo! Te espero en la próxima clase para descubrir cómo utilizar librerías de terceros como middleware en tu proyecto.