Redux-Saga est une bibliothèque middleware qui gère les tâches asynchrones avec des effets secondaires, comme l'API. De plus, nous sommes capables de lire l'état et d'appeler des actions sur Saga. Il utilise des fonctions de générateur pour effectuer des tâches asynchrones.

Ce qui suit explique pourquoi nous utilisons Saga et comment l'installer. Ensuite, il est discuté des méthodes Saga utiles pour gérer l'API.

Pourquoi utilisons-nous Redux-Saga ?

La tâche principale de la saga est de gérer les appels d'API et de mettre à jour l'état en fonction de la réponse des terminaux ! L'un des principaux avantages de redux-saga est qu'il est compatible avec les tests.

Avant de travailler avec Redux-Saga, vous devez vous familiariser avec Redux.

Comment installer Redux-saga ?

Il existe deux manières d'installer redux-saga en fonction de votre gestionnaire de packages :

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 peut ressembler à ceci :

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éthodes de saga

Les méthodes les plus utilisées seront expliquées dans ce qui suit :

sélectionner

Il lit à partir du sélecteur (état), voici un exemple de l'appel de sélection.

const userId = yield select(userSelectors.getUserId);

Il distribue des actions, par exemple :

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

Il appelle une fonction asynchrone, telle que l'API, par exemple :

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

Il surveille à chaque envoi d'action l'appel d'une fonction génératrice.

yield takeEvery("USER_FETCH_REQUESTED", fetchUser);

C'est la même chose que takeEvery, la seule différence est que lorsque l'appel précédent est en attente, il n'appelle plus.

yield takeLatest("USER_FETCH_REQUESTED", fetchUser);

Redux-saga est une bibliothèque pour gérer les tâches asynchrones dans redux. Dans cet article, il est expliqué pourquoi et comment utiliser Saga et les méthodes.