Schritt 3

Konzentration auf die Erstellung eines Reducers zur Verarbeitung ausgelöster Aktionen und zur Aktualisierung des goals-Status im Redux-Store. Reducer sind reine Funktionen, die festlegen, wie sich der Status als Reaktion auf Aktionen ändern soll.

Beispiel

Herausforderung

1. Öffnen der Datei goalReducer.js.
2. Erstellen des Reducers mit der Funktion createReducer aus dem Paket @reduxjs/toolkit. Diese Funktion vereinfacht die Erstellung von Reducern.
3. Festlegen des Anfangszustands der goals auf ein leeres Array ([]).
4. Innerhalb der Funktion createReducer die Fälle für verschiedene Aktionen mit den im goalAction.js erstellten Aktionen angeben.
5. Zum Hinzufügen eines Ziels die Methode .addCase verwenden und die Aktion addGoal als erstes Argument übergeben. Im zugehörigen Callback die Aktualisierung des Status durch das Hinzufügen von action.payload (das Ziel) zum Status-Array durchführen.
6. Zum Entfernen eines Ziels die Methode .addCase verwenden und die Aktion removeGoal als erstes Argument übergeben. Im zugehörigen Callback den Status aktualisieren, indem ein neues Array zurückgegeben wird, das das Ziel mit der passenden goal.id aus dem Status-Array herausfiltert.

1. Die Funktion createReducer vereinfacht die Erstellung von Reducern durch eine komfortable Syntax.
2. Mit der Methode .addCase des builder-Objekts können die Fälle für verschiedene Aktionen angegeben werden.
3. Auf die Nutzlast der Aktion kann mit action.payload zugegriffen werden.