Redux-Saga es una biblioteca de middleware que maneja tareas asíncronas con efectos secundarios, como API. Además, podemos leer el estado y solicitar acciones en Saga. Utiliza funciones de generador para realizar tareas asíncronas.

A continuación se describe por qué usamos Saga y cómo instalarlo. Luego, se analizan los métodos útiles de Saga para manejar la API.

¿Por qué estamos usando Redux-Saga?

¡El deber principal de Saga es manejar las llamadas API y actualizar el estado en función de la respuesta de los puntos finales! Una de las principales ventajas de redux-saga es que es fácil de probar.

Antes de trabajar con Redux-Saga, debe estar familiarizado con Redux.

¿Cómo instalar Redux-saga?

Hay dos formas de instalar redux-saga según su administrador de paquetes:

npm install redux-saga

yarn add redux-saga

import { call, put, takeEvery } from 'redux-saga/effects'
import Api from '...'

function* fetchUser(action) {
    try {
        const user = yield call(Api.fetchUser, action.payload.userId);
        yield put({type: "USER_FETCH_SUCCEEDED", user: user});
    } catch (e) {
        yield put({type: "USER_FETCH_FAILED", message: e.message});
    }
}

function* mySaga() {
    yield takeEvery("USER_FETCH_REQUESTED", fetchUser);
}

export default mySaga;

La API puede ser algo como esto:

import axios from 'axios';

const Api = {
    fetchUser: (userId) => {
        return axios.get(`...?userId=${userId}`)
    }
};

export default Api;

import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'

import reducer from './reducers'
import mySaga from './sagas'

const sagaMiddleware = createSagaMiddleware();

const store = createStore(
    reducer,
    applyMiddleware(sagaMiddleware)
);

sagaMiddleware.run(mySaga);

Métodos de saga

Los métodos más utilizados se explicarán a continuación:

Seleccione

Se lee desde el selector (estado), aquí hay una muestra de la llamada de selección.

const userId = yield select(userSelectors.getUserId);

Despacha acciones, por ejemplo:

yield put({type: "USER_FETCH_SUCCEEDED", user: user});

Llama a una función asíncrona, como API, por ejemplo:

const user = yield call(Api.fetchUser, action.payload.userId);

Observa en cada despacho de acción para llamar a una función generadora.

yield takeEvery("USER_FETCH_REQUESTED", fetchUser);

Es lo mismo que takeEvery, la única diferencia es que cuando la llamada anterior está pendiente, no vuelve a llamar.

yield takeLatest("USER_FETCH_REQUESTED", fetchUser);

Redux-saga es una biblioteca para manejar tareas asíncronas en redux. En este artículo, se discute por qué y cómo usar Saga y los métodos.