Theorie

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

Praxis

Im reducers-Ordner unseres Projekts befindet sich die Datei counterReducer.js, in der wir den Reducer für unsere Zählerfunktionalität definieren:

import { createReducer } from "@reduxjs/toolkit";
import { increment, decrement } from "../actions/counterAction.js";

const initialState = 0;

const counterReducer = createReducer(initialState,
  (builder) => {
    builder
      .addCase(increment, (state) => state + 1)
      .addCase(decrement, (state) => state - 1);
});

export default counterReducer;

Code-Erklärung:

• Zeile 1: Import der Funktion createReducer aus dem Paket @reduxjs/toolkit. Diese Funktion wird verwendet, um Reducer in Redux zu erstellen;
• Zeile 2: Import der Action Creator increment und decrement aus der Datei ../actions/counterAction.js. Diese Action Creator definieren die Aktionen, die vom Reducer verarbeitet werden;
• Zeile 4: Setzen der Konstante initialState auf 0. Dies stellt den Anfangswert des Zählers im Redux Store dar;
• Zeile 6: Verwendung der Funktion createReducer zur Definition des counterReducer;
• Zeile 6-11: Die Funktion createReducer nimmt zwei Argumente entgegen: den initialState und eine Callback-Funktion, die festlegt, wie der Zustand basierend auf ausgelösten Aktionen aktualisiert werden soll;
• Zeile 7: Verwendung des Objekts builder, um die Fälle für verschiedene Aktionen innerhalb der Callback-Funktion zu definieren;
• Zeile 9, 10: Mit der Methode addCase des builder-Objekts wird festgelegt, 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 beim Auslösen der Aktion increment der Zustand um 1 erhöht; beim Auslösen der Aktion decrement wird der Zustand um 1 verringert;
• Zeile 13: Abschließend wird der counterReducer als Standardexport des Moduls exportiert.

Hinweis

Zusammenfassend übernimmt der counterReducer die ausgelösten Aktionen und aktualisiert entsprechend den Zählerzustand im Redux Store.