Rolle der Reducer

Theorie

Reducer sind reine Funktionen, die angeben, wie sich der Zustand als Reaktion auf ausgelöste Aktionen ändern soll. Indem sie den aktuellen Zustand und eine Aktion als Parameter aufnehmen, geben Reducer den neuen Zustand der Anwendung zurück.

Praxis

In unserem Projektordner reducers haben wir die Datei counterReducer.js, in der wir den Reducer für unsere Zählerfunktionalität definieren:

Code-Erklärung:

• Zeile 1: Importiere die Funktion createReducer aus dem Paket @reduxjs/toolkit. Diese Funktion wird verwendet, um Reducer in Redux zu erstellen;
• Zeile 2: Importiere die Aktions-Ersteller increment und decrement aus der Datei ../actions/counterAction.js. Diese Aktions-Ersteller werden verwendet, um die Aktionen zu definieren, die der Reducer verarbeiten wird;
• Zeile 4: Setze die Konstante initialState auf 0. Dies stellt den Anfangswert des Zählers im Redux-Store dar;
• Zeile 6: Verwende die Funktion createReducer, um den counterReducer zu definieren;
• Zeile 6-11: Die Funktion createReducer nimmt zwei Argumente: den initialState und eine Callback-Funktion, die definiert, wie der Zustand basierend auf ausgelösten Aktionen aktualisiert werden soll;
• Zeile 7: Verwende das builder-Objekt, um die Fälle für verschiedene Aktionen innerhalb der Callback-Funktion zu definieren;
• Zeile 9, 10: Verwende die Methode addCase des builder-Objekts, um zu definieren, wie der Zustand aktualisiert werden soll, wenn bestimmte Aktionen, wie increment und decrement, ausgelöst werden;
• Zeile 9, 10: Die Callback-Funktion innerhalb von addCase nimmt den aktuellen Zustand (state) als Argument und gibt den neuen Zustand nach Anwendung der entsprechenden Aktion zurück;
• In diesem Fall wird, wenn die Aktion increment ausgelöst wird, der Zustand um 1 erhöht; wenn die Aktion decrement ausgelöst wird, wird der Zustand um 1 verringert;
• Zeile 13: Schließlich exportiere den counterReducer als Standardexport des Moduls.

Hinweis

Zusammenfassend wird der counterReducer die gesendeten Aktionen verarbeiten und den Zählerstatus entsprechend im Redux-Store aktualisieren.