React Thunk und React Saga sind Middleware-Bibliotheken zur Handhabung von Nebenwirkungen in React-Anwendungen, insbesondere zur Verwaltung asynchroner Vorgänge wie API-Aufrufe. Beide werden häufig mit Redux verwendet, dienen jedoch leicht unterschiedlichen Zwecken und Ansätzen.

Thunk reagieren

1. Übersicht:

React Thunk ist eine Middleware, die es Ihnen ermöglicht, Aktionsersteller zu schreiben, die Funktionen anstelle von Aktionsobjekten zurückgeben. Dies ist nützlich für die Verarbeitung asynchroner Vorgänge wie API-Anfragen oder komplexer synchroner Logik (wie bedingtes Versenden von Aktionen). Die zurückgegebene Funktion erhält „dispatch“ und „getState“ als Argumente, sodass Sie andere Aktionen auslösen oder auf den aktuellen Status innerhalb der Funktion zugreifen können.

2. Schlüsselkonzepte:

• Middleware: Thunk ist Middleware, die die Fähigkeit des Stores erweitert, Funktionen (d. h. Thunks) zu verarbeiten.
• Asynchrone Aktionen: Mit Thunk können Sie die Auslösung einer Aktion verzögern oder sie basierend auf einem bestimmten Status oder einer bestimmten Logik bedingt auslösen.
• Einfach: Thunk ist relativ einfach und daher für die meisten Anwendungsfälle einfach zu verwenden.

3. Wie es funktioniert:

• Normalerweise geben Aktionsersteller einfache JavaScript-Objekte (Aktionen) zurück.
• Mit Thunk kann ein Aktionsersteller eine Funktion (den „Thunk“) zurückgeben, die „dispatch“ und „getState“ empfängt. Innerhalb dieser Funktion können Sie asynchrone Logik ausführen (z. B. Daten von einer API abrufen) und dann die eigentliche Aktion auslösen.

4. Beispiel:

Hier ist ein einfaches Beispiel dafür, wie Sie Redux-Thunk in einer React-App verwenden würden:

   // Action Creator with Thunk
   export const fetchUser = () => {
     return async (dispatch) => {
       dispatch({ type: 'FETCH_USER_REQUEST' });
       try {
         const response = await fetch('/api/user');
         const data = await response.json();
         dispatch({ type: 'FETCH_USER_SUCCESS', payload: data });
       } catch (error) {
         dispatch({ type: 'FETCH_USER_FAILURE', payload: error });
       }
     };
   };

5. Vorteile von Thunk:

• Einfachheit: Thunk ist leicht zu verstehen und zu implementieren.
• Geringe Stellfläche: Es ist leicht und erfordert keine komplexen Konfigurationen.
• Direkte Kontrolle über den Versand: Sie haben mehr Kontrolle darüber, wann und wie Aktionen versendet werden.

6. Nachteile:

• Schwer zu skalieren: Bei komplexen asynchronen Abläufen kann Thunk chaotisch werden, mit verschachtelter Logik und vielen Dispatch-Aufrufen.
• Weniger Struktur: Thunk erzwingt keine bestimmte Struktur für die Verwaltung von Nebenwirkungen, was bei unsachgemäßer Handhabung zu inkonsistentem Code führen kann.

Saga reagieren

1. Übersicht:

React Saga ist eine Middleware, die es Ihnen ermöglicht, Nebenwirkungen mithilfe von Generatorfunktionen besser organisiert zu handhaben. Anstatt Funktionen wie Thunk zurückzugeben, verwendet es ein „Effekt“-System, um asynchrone Vorgänge zu verwalten und den Fluss Ihrer Logik zu steuern. Sagas sind Hintergrundprozesse mit langer Laufzeit, die auf ausgelöste Aktionen hören und Nebenwirkungen wie API-Aufrufe, Datenabruf und andere Aufgaben ausführen können.

2. Schlüsselkonzepte:

• Generatorfunktionen: Sagas werden mithilfe von ES6-Generatorfunktionen (Funktion*) implementiert, mit denen Sie asynchronen Code schreiben können, der synchron aussieht.
• Beobachter und Arbeiter: Sagen werden oft in „Beobachter“-Sagas (die auf ausgelöste Aktionen warten) und „Arbeiter“-Sagas (die sich mit den Nebenwirkungen befassen) unterteilt.
• Take, Put, Call: Redux-Saga bietet Effektersteller (Take, Put, Call usw.), um zu steuern, wann Nebenwirkungen ausgelöst, Aktionen ausgelöst und APIs aufgerufen werden sollen.

3. Wie es funktioniert:

• Mit Redux-Saga definieren Sie Sagas (lang laufende Hintergrundaufgaben), die für den Umgang mit Nebenwirkungen verantwortlich sind.
• Sagas werden typischerweise als Generatorfunktionen geschrieben und erzeugen Effekte wie call (um Funktionen aufzurufen) und put (um Aktionen auszulösen).
• Sagas können mit take auch auf bestimmte Aktionen warten oder mit takeEvery oder takeLatest auf Aktionen warten.

4. Beispiel:

Hier ist ein einfaches Beispiel dafür, wie Redux-Saga verwendet werden kann:

   import { call, put, takeLatest } from 'redux-saga/effects';

   // Worker saga: will be fired on FETCH_USER_REQUEST actions
   function* fetchUser(action) {
     try {
       const response = yield call(fetch, '/api/user');
       const data = yield response.json();
       yield put({ type: 'FETCH_USER_SUCCESS', payload: data });
     } catch (e) {
       yield put({ type: 'FETCH_USER_FAILURE', message: e.message });
     }
   }

   // Watcher saga: spawns a new fetchUser task on each FETCH_USER_REQUEST
   function* mySaga() {
     yield takeLatest('FETCH_USER_REQUEST', fetchUser);
   }

   export default mySaga;

5. Vorteile von Redux-Saga:

• Besser für komplexe Nebenwirkungen: Der effektbasierte Ansatz von Saga ist skalierbarer und eignet sich für die Verwaltung komplexer asynchroner Abläufe (z. B. Umgang mit Wiederholungsversuchen, Entprellen oder kaskadierenden API-Aufrufen).
• Testbar: Sagas sind einfach zu testen, da sie auf Generatorfunktionen basieren.
• Deklarativ: Durch die Verwendung von Effekten wird klarer, welche Nebenwirkungen auftreten werden, wodurch der Ablauf vorhersehbarer wird.
• Abbrüche und Sequenzen: Saga macht es einfach, laufende Aufgaben abzubrechen oder Sequenzabläufe von Ereignissen zu erzwingen (z. B. das Warten auf mehrere Aktionen).

6. Nachteile:

• Steilere Lernkurve: Die Verwendung von Generatorfunktionen und das gesamte Saga-Muster können für Anfänger schwer zu verstehen sein.
• Overhead: Bei kleinen Anwendungen könnte es sich im Vergleich zu einfacheren Lösungen wie Thunk wie ein Overkill anfühlen.
• Ausführlich: Sagas enthalten im Vergleich zu Thunk tendenziell mehr Standardcode.

Vergleich: React Thunk vs. React Saga

Wann sollte welches verwendet werden?

• Verwenden Sie React Thunk, wenn:

  • Ihre Anwendung hat relativ einfache asynchrone Anforderungen, wie z. B. grundlegende API-Anfragen und das Versenden basierend auf Bedingungen.
  • Sie möchten eine leichte, leicht verständliche Lösung ohne viel Standardwerk.

• Verwenden Sie React Saga, wenn:

  • Sie müssen komplexere asynchrone Abläufe verwalten, wie Wiederholungsversuche, Aktionssequenzierung, Rennbedingungen oder mehrere voneinander abhängige Aufgaben.
  • Sie bevorzugen den deklarativen Ansatz und möchten eine bessere Kontrolle über Nebenwirkungen.
  • Ihre App erfordert auf lange Sicht eine bessere Testbarkeit und Wartbarkeit des Codes.