No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Middlewares alternativos: Redux Saga

14/22
Recursos

Aportes 7

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

Hasta ahora muy buen curso, pero esperaba con ansias ver algo de saga
Igual con la documentaci贸n que compartieron por aqui esta super!

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 鈥渟agas鈥 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.

Funciones generadoras

  • Los generadores son funciones especiales, pueden pausar su ejecuci贸n y luego volver al punto donde se quedaron recordando su scope.
  • Los generadores son funciones de las que se puede salir y volver a entrar.

Caracter铆sticas

  • Los generadores regresan una funci贸n.
  • Empiezan suspendidos y se tiene que llamar next para que ejecuten.
  • Regresan un value y un boolean done que define si ya terminaron.
  • yield es la instrucci贸n que regresa un valor cada vez que llamamos a next y detiene la ejecuci贸n del generador
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

Ahora est谩 "de moda" un proyecto de un colectivo de developer que se llama "zustand" Ref: <https://github.com/pmndrs/zustand>

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.