Schritt 3

Konzentration auf die Erstellung eines Reducers, der versendete Aktionen verarbeitet und den goals-Status im Redux-Store aktualisiert. Reducer sind reine Funktionen, die festlegen, wie sich der Status als Reaktion auf Aktionen ändern soll.

Beispiel

Aufgabe

1. Öffne die Datei goalReducer.js.
2. Erstelle den Reducer mit der Funktion createReducer aus dem Paket @reduxjs/toolkit. Diese Funktion vereinfacht die Erstellung von Reducern.
3. Setze den Anfangszustand der goals auf ein leeres Array ([]).
4. Gib innerhalb der Funktion createReducer die Fälle für verschiedene Aktionen an, indem du die in der Datei goalAction.js erstellten Aktionen verwendest.
5. Zum Hinzufügen eines Ziels verwende die Methode .addCase und übergebe die Aktion addGoal als erstes Argument. Aktualisiere im zugehörigen Callback die state, indem du das action.payload (das Ziel) in das state-Array einfügst.
6. Zum Entfernen eines Ziels verwende die Methode .addCase und übergebe die Aktion removeGoal als erstes Argument. Aktualisiere im zugehörigen Callback die state, indem du ein neues Array zurückgibst, das das Ziel mit der passenden goal.id aus dem state-Array herausfiltert.

1. Die Funktion createReducer vereinfacht die Erstellung von Reducern durch eine komfortable Syntax.
2. Verwende die Methode .addCase des builder-Objekts, um die Fälle für verschiedene Aktionen anzugeben.
3. Greife auf die Nutzlast der Aktion mit action.payload zu.