Middlewares alternativos: Redux Saga

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.

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!

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

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.