Redux-Saga è una libreria middleware che gestisce attività asincrone con effetti collaterali, come API. Inoltre, siamo in grado di leggere lo stato e chiamare azioni su Saga. Utilizza le funzioni del generatore per eseguire attività asincrone.

Quanto segue illustra il motivo per cui utilizziamo Saga e come installarlo. Quindi, vengono discussi utili metodi Saga per la gestione delle API.

Perché stiamo usando Redux-Saga?

Il compito principale della Saga è gestire le chiamate API e aggiornare lo stato in base alla risposta degli endpoint! Uno dei principali vantaggi di redux-saga è la facilità di test.

Prima di lavorare con Redux-Saga, dovresti avere familiarità con Redux.

Come installare Redux-saga?

Ci sono due modi per installare redux-saga in base al tuo gestore di pacchetti:

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;

L'API può essere qualcosa del genere:

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);

Metodi della saga

I metodi più utilizzati verranno spiegati di seguito:

Selezionare

Si legge dal selettore (stato), ecco un esempio della chiamata selezionata.

const userId = yield select(userSelectors.getUserId);

Invia azioni, ad esempio:

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

Chiama una funzione asincrona, come API, ad esempio:

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

Controlla ogni invio di azione per chiamare una funzione del generatore.

yield takeEvery("USER_FETCH_REQUESTED", fetchUser);

È lo stesso di takeEvery, l'unica differenza è che quando la chiamata precedente è in sospeso non chiama più.

yield takeLatest("USER_FETCH_REQUESTED", fetchUser);

Redux-saga è una libreria per la gestione delle attività asincrone in redux. In questo articolo, viene discusso perché e come utilizzare Saga e i metodi.