Wie verwende ich Redux Saga?

Redux Saga ist eine Middleware-Bibliothek, die verwendet wird, um Side Effects (wie zum Beispiel Datenabruf oder asynchrone Dinge) in einer Redux-Anwendung einfacher und besser zu verwalten. Sie erreicht dies, indem sie asynchrone Operationen in sogenannte “Sagas” auslagert.

Hier sind die grundlegenden Schritte, um Redux Saga in einer Redux-Anwendung zu verwenden:

1. Saga installieren: Sie können Redux Saga zu Ihrem Projekt hinzufügen, indem Sie den folgenden Befehl in der Konsole eingeben:

npm install redux-saga

2. Sagas erstellen: Ein “Saga” ist im Wesentlichen eine separate Funktion, die Sie definieren, um asynchrone Operationen auszuführen. Hier ist ein einfaches Beispiel für eine Saga:

import { call, put, takeEvery } from ‘redux-saga/effects’; // hier nutzen wir eine Saga, um Daten von eine API zu holen function* fetchData(action) { try { const data = yield call(api.fetchData, action.payload.url); yield put({type: “FETCH_SUCCESS”, data}); } catch (error) { yield put({type: “FETCH_FAILED”, error}); } } // rootSaga startet alle Sagas gleichzeitig export default function* rootSaga() { yield takeEvery(‘FETCH_REQUESTED’, fetchData); } In diesem Beispiel hört die function* fetchData auf ‘FETCH_REQUESTED’ Action und führt dann api.fetchData aus. Bei Erfolg wird ‘FETCH_SUCCESS’ ausgelöst, bei Fehler ‘FETCH_FAILED’.

3. Redux Store konfigurieren: Sie müssen Ihren Redux Store konfigurieren, um Redux Saga zu nutzen:

import { createStore, applyMiddleware } from ‘redux’; import createSagaMiddleware from ‘redux-saga’; // Sagas importieren import rootSaga from ‘./sagas’; // Saga Middleware erstellen const sagaMiddleware = createSagaMiddleware(); // Store erstellen const store = createStore( reducer, applyMiddleware(sagaMiddleware) ); // Sagas starten sagaMiddleware.run(rootSaga); Hier haben wir erst die Saga Middleware erstellt, dann den Store mit der Saga Middleware erstellt und anschliessend mittels sagaMiddleware.run(rootSaga) die Sagas ausgeführt.

Indem Sie auf diese Weise Sagas verwenden, können Sie komplexe asynchrone Operationen außerhalb Ihrer React-Komponenten und Redux-Reducer organisieren und verwalten. Dies macht Ihren Code sauberer, einfacher zu verstehen und zu warten.