Bienvenido a Platzi

🧠 Redux Ecosystem: Middlewares & Asynchrony

Redux es el corazón del estado global, pero para interactuar con el mundo real (APIs, logs, validaciones), necesita de los Middlewares.

🌉 1. ¿Qué es un Middleware?

Es el código que se ejecuta entre el despacho de una acción y el momento en que llega al Reducer.

• Flujo:
  Action
  ->
  Middleware
  ->
  Reducer
  ->
  Store
  .
• Uso: Manejo de errores (Sentry), Logs de consola, y principalmente peticiones asíncronas.
• Anatomía: Utiliza funciones currificadas:
  store => next => action => { ... }
  .

🚀 2. Redux Thunk (La opción por defecto)

Es el middleware más popular y sencillo. Permite que tus action creators retornen una función en lugar de un objeto.

• ✅ Simplicidad: Si sabes usar
  async/await
  , dominas Thunk.
• ✅ Ligero: Muy poco código extra (boilerplate).
• 💡 Dato Pro: Redux Toolkit (RTK) lo incluye por defecto mediante
  createAsyncThunk
  .

Ejemplo:

const fetchPokemons = () => async (dispatch) => {
  dispatch({ type: 'LOADING' });
  const res = await fetch('...');
  dispatch({ type: 'SUCCESS', payload: await res.json() });
};

🐉 3. Redux Saga (Poder y Control)

Ideal para aplicaciones de gran escala. Utiliza Generadores de ES6 (

) para manejar efectos secundarios.

• ✅ Robustez: Excelente para flujos complejos (cancelación de peticiones, reintentos).
• ✅ Efectos clave:
  • takeLatest
    : Cancela peticiones anteriores si se dispara una nueva (evita race conditions).
  • put
    : Equivale al
    dispatch
    .
  • call
    : Llama a funciones promesas.
• 💡 Dato Pro: Es mucho más fácil de testear que Thunk porque no ejecutas la lógica, sino que devuelves descriptores de efectos.

⚖️ Thunk vs. Saga: ¿Cuál elegir?

• Usa Thunk si: Buscas rapidez, el equipo es pequeño o la lógica de la API es estándar.
• Usa Saga si: Manejas WebSockets, procesos de autenticación con múltiples pasos o necesitas cancelar tareas en segundo plano.

🛠️ Bonus: Redux DevTools

Es la extensión de navegador que te permite "viajar en el tiempo".

• Time Travel: Puedes saltar a cualquier punto del pasado de tu estado.
• Habilitación: ```javascript window.REDUX_DEVTOOLS_EXTENSION && window.REDUX_DEVTOOLS_EXTENSION()
• ⚠️ Tip de Seguridad: En producción, asegúrate de ocultar las DevTools para evitar que se filtre la estructura interna de tus datos en proyectos como Sunshine Travel.

🏁 Conclusión para Seniority

En la actualidad (2026), la mayoría de los proyectos usan Redux Toolkit (RTK). RTK usa Thunk de forma nativa. Solo salta a Saga si la complejidad de la lógica asíncrona ensucia demasiado tus archivos de Thunk.