Redux Thunk vs Redux Saga
Contenido del curso
Redux Thunk vs Redux Saga
Contenido del curso
Miguel Angel Reyes Moreno
Geovanny Sneyder Paez Pabon
Violeta Saraí Vera Salazar
Max Andy Diaz Neyra
Juan Camilo Lentino Villalba
Alex Guaman
Harold Zurita Simon
Andres Prieto
Juan Diego Mejia Maestre
Reinaldo Marcano
Mariangelica Useche
Team Platzi
Sebastián Hoyos López
Gualberto Montiel
Les comparto estos artículos con un poco más de información al respecto:
saga vs thunk
Redux Thunk vs Redux Saga - The Battle of the Middlewares
Redux Thunk es un middleware para Redux que permite escribir acciones que devuelven funciones en lugar de objetos. Esto permite realizar operaciones asíncronas, como hacer una llamada a una API, dentro de una acción.
Redux Saga es también un middleware para Redux que se enfoca en la gestión de efectos secundarios, como las llamadas a API, en una aplicación Redux. En lugar de tener que escribir código asíncrono en las acciones, puedes escribir funciones llamadas "sagas" que manejan la lógica asíncrona de manera separada de la lógica sincrónica de la aplicación.
Ambos middlewares pueden ser útiles para manejar la asincronía en una aplicación Redux, pero cómo se utilizan y cómo se escriben las acciones y funciones es diferente. Para utilizar Redux Saga en una aplicación, primero debes instalarlo y configurarlo como middleware en tu aplicación Redux.
npm install redux-saga
import createSagaMiddleware from 'redux-saga'; const sagaMiddleware = createSagaMiddleware(); const store = createStore( reducer, applyMiddleware(sagaMiddleware) );
Luego, debes escribir tus sagas y asociarlas con los tipos de acciones que deseas manejar. Una saga se escribe como una función generator que utiliza la función yield para detenerse y esperar por una acción específica.
import { take, put, call } from 'redux-saga/effects'; function* fetchUser(id) { try { const user = yield call(Api.fetchUser, id); yield put({type: 'USER_FETCH_SUCCEEDED', user}); } catch (e) { yield put({type: 'USER_FETCH_FAILED', message: e.message}); } } function* watchFetchUser() { while (true) { const action = yield take('FETCH_USER'); const id = action.payload; yield call(fetchUser, id); } }
Finalmente, debes iniciar tus sagas llamando a sagaMiddleware.run() y pasándole una función generator.
sagaMiddleware.run(watchFetchUser);
Luego, cada vez que se dispare una acción de tipo FETCH_USER, la saga watchFetchUser se encargará de llamar a la función fetchUser y manejar el resultado de la llamada a la API.
Hasta ahora muy buen curso, pero esperaba con ansias ver algo de saga Igual con la documentación que compartieron por aqui esta super!
Pues lo recomendando ahora es redux toolkit. Yo pienso implementar con redux toolkit y en caso ya sea un proyecto en desarrollo pasar al toolkit. La cuestion seria investigar las mejoras contundentes de redux tookit para presentarlas al equipo y convencerlos del cambio jajajajaja.
Funciones generadoras
Características
function* genSimple (){ yield 'generator start' yield 1 yield 2 yield 3 yield 4 yield 'generator end' }
const gen = genSimple() console.log(gen.next().value) // generator start
console.log(gen.next()) // { value: 1, done: false } console.log(gen.next().value) // 2
console.log(gen.next()) // { value: 3, done: false } console.log(gen.next().done) // false
console.log(gen.next()) // { value: 'generator end', done: false } console.log(gen.next()) // { value: undefined, done: true }
En este video explican bien lo de las funciones generadoras https://youtu.be/wQtwVhwp-So
Comparativa entre Thunk y Saga:
💡 Tip:
Ahora está "de moda" un proyecto de un colectivo de developer que se llama "zustand"
Ref:
🧠 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.
Action -> Middleware -> Reducer -> Store.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.
async/await, dominas Thunk.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 (function*) para manejar efectos secundarios.
takeLatest: Cancela peticiones anteriores si se dispara una nueva (evita race conditions).put: Equivale al dispatch.call: Llama a funciones promesas.⚖️ Thunk vs. Saga: ¿Cuál elegir?
🛠️ Bonus: Redux DevTools
Es la extensión de navegador que te permite "viajar en el tiempo".
🏁 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.
https://github.com/ReinaldoMarcanoJS/Pokedux
react-dom.development.js:26923 Uncaught TypeError: Cannot read properties of undefined (reading 'front_default')
tengo estos errores, al parecer el componente no esta esperando la segunda petición alguien me puede ayudar?
Revisa muy bien qué está llegando al componente en pokemons. Por otro lado, es buena práctica tener progración preventiva, y agregar una validación para que no explote tu aplicación, esto lo haces modificando la línea 10 de tu archivo src/components/PokemonList.jsx de la siguiente manera: image={pokemon?.sprites?.front_default} . O en el map haciendo la validación if (!pokemon) return null
Me parece que era necesario que lo explicaran, por que no lo hicieron ;(
Ventajas de Redux Thunk:
Fácil de aprender y usar: Redux Thunk es más simple y fácil de entender que Redux Saga, especialmente para los desarrolladores nuevos en el manejo de operaciones asíncronas en Redux. Menos abstracto: Redux Thunk es menos abstracto que Redux Saga, ya que las acciones retornan funciones en lugar de crear efectos y tareas separados. Menos complejidad: Redux Thunk requiere menos código que Redux Saga, lo que puede ser una ventaja en proyectos más pequeños o con una cantidad limitada de lógica asíncrona. Desventajas de Redux Thunk:
Mayor dificultad para manejar errores: Redux Thunk puede ser menos fácil de manejar errores y hacer debugging que Redux Saga, que proporciona un enfoque más estructurado para el manejo de errores. Menos capacidad de composición: Redux Saga proporciona un enfoque más estructurado para la composición de tareas asíncronas, lo que puede ser más fácil de mantener y escalar que el enfoque de Redux Thunk. Mayor complejidad a medida que el proyecto crece: A medida que la aplicación crece en tamaño y complejidad, puede ser más difícil mantener la lógica asíncrona en Redux Thunk y puede ser necesario migrar a Redux Saga.