Redux-Saga ist eine Middleware-Bibliothek, die asynchrone Aufgaben mit Nebeneffekten wie API behandelt. Außerdem können wir den Status lesen und Aktionen auf Saga aufrufen. Es verwendet Generatorfunktionen, um asynchrone Aufgaben auszuführen.

Im Folgenden wird beschrieben, warum wir Saga verwenden und wie es installiert wird. Dann werden nützliche Saga-Methoden zum Handhaben von API diskutiert.

Warum verwenden wir die Redux-Saga?

Die Hauptaufgabe von Saga besteht darin, die API-Aufrufe zu verarbeiten und den Status basierend auf der Antwort der Endpunkte zu aktualisieren! Einer der Hauptvorteile von redux-saga ist die Testfreundlichkeit.

Bevor Sie mit Redux-Saga arbeiten, sollten Sie mit Redux vertraut sein.

Wie installiere ich Redux-Saga?

Es gibt zwei Möglichkeiten, die Redux-Saga basierend auf Ihrem Paketmanager zu installieren:

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;

Die API kann in etwa so aussehen:

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

Saga-Methoden

Die am häufigsten verwendeten Methoden werden im Folgenden erläutert:

auswählen

Es liest aus dem Selektor (Zustand), hier ist ein Beispiel des Select-Aufrufs.

const userId = yield select(userSelectors.getUserId);

Es versendet Aktionen, zum Beispiel:

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

Es ruft beispielsweise eine asynchrone Funktion wie API auf:

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

Es überwacht bei jeder Aktionsabsendung, um eine Generatorfunktion aufzurufen.

yield takeEvery("USER_FETCH_REQUESTED", fetchUser);

Es ist dasselbe wie takeEvery, der einzige Unterschied besteht darin, dass, wenn der vorherige Anruf ansteht, nicht erneut angerufen wird.

yield takeLatest("USER_FETCH_REQUESTED", fetchUser);

Redux-saga ist eine Bibliothek zur Handhabung asynchroner Aufgaben in Redux. In diesem Artikel wird diskutiert, warum und wie man Saga und die Methoden verwendet.