Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lernen Herausforderung: Implementieren des Reducers | Redux Toolkit Challenge Workshop
State Management mit Redux Toolkit in React

bookHerausforderung: Implementieren des Reducers

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.
War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 5

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Awesome!

Completion rate improved to 4.17

bookHerausforderung: Implementieren des Reducers

Swipe um das Menü anzuzeigen

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.
War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 3. Kapitel 5
some-alt