Schritt 3

Konzentrieren Sie sich darauf, einen Reducer zu erstellen, der die gesendeten Aktionen verarbeitet und den Zustand der Ziele im Redux-Store aktualisiert. Reducer sind reine Funktionen, die angeben, wie sich der Zustand als Reaktion auf Aktionen ändern soll.

Beispiel

Herausforderung

1. Öffnen Sie die Datei goalReducer.js.

2. Erstellen Sie den Reducer mit der Funktion createReducer aus dem Paket @reduxjs/toolkit. Diese Funktion vereinfacht den Prozess der Erstellung von Reducern.

3. Setzen Sie den Anfangszustand der Ziele auf ein leeres Array ([]).

4. Geben Sie innerhalb der Funktion createReducer die Fälle für verschiedene Aktionen an, indem Sie die im goalAction.js-Datei erstellten Aktionen verwenden.

5. Verwenden Sie für das Hinzufügen eines Ziels die Methode .addCase und übergeben Sie die Aktion addGoal als erstes Argument. In der entsprechenden Callback-Funktion aktualisieren Sie den Zustand, indem Sie das action.payload (das Ziel) in das Zustandsarray einfügen.

6. Verwenden Sie für das Entfernen eines Ziels die Methode .addCase und übergeben Sie die Aktion removeGoal als erstes Argument. In der entsprechenden Callback-Funktion aktualisieren Sie den Zustand, indem Sie ein neues Array zurückgeben, das das Ziel mit der übereinstimmenden goal.id aus dem Zustandsarray herausfiltert.

1. Die Funktion createReducer vereinfacht den Prozess der Erstellung von Reducern, indem sie eine bequeme Syntax bereitstellt.

2. Verwenden Sie die Methode .addCase des builder-Objekts, um die Fälle für verschiedene Aktionen anzugeben.

3. Greifen Sie auf die Nutzlast der Aktion mit action.payload zu.