Schritt 4

Fokus auf die Einbindung der Redux-Logik in eine React-Anwendung. React-Komponenten und den Redux-Store verbinden, um Zustandsverwaltung und Aktionen zu ermöglichen.

Beispiel

Ship Tracker App

Herausforderung

Form.jsx:

1. Die Datei Form.jsx öffnen.
2. Den Hook useDispatch aus dem Paket react-redux importieren. Dieser Hook wird verwendet, um Aktionen an den Redux-Store zu senden.
3. Die Aktion addGoal aus der Datei goalAction.js importieren. Diese Aktion ist für das Hinzufügen eines Ziels zum Redux-Store verantwortlich.
4. Die Variable dispatch innerhalb der Komponente initialisieren, indem der Hook useDispatch aufgerufen wird.
5. Die Funktion handleFormSubmit vervollständigen, indem die Aktion addGoal gesendet wird. Die Funktion dispatch verwenden und ein Objekt mit den Zieldetails übergeben: { id: Date.now(), text: goal }. Date.now() generiert eine eindeutige ID für jedes Ziel.
6. Das Formular nach dem Absenden durch Aufruf der Funktion resetForm zurücksetzen.

GoalList.jsx:

1. Öffnen der Datei GoalList.jsx.
2. Importieren der Hooks useDispatch und useSelector aus dem Paket react-redux. Diese Hooks werden verwendet, um auf den Redux Store zuzugreifen und Aktionen zu dispatchen.
3. Importieren der Aktion removeGoal aus der Datei goalAction.js. Diese Aktion ist für das Entfernen eines Ziels aus dem Redux Store verantwortlich.
4. Initialisieren der Variable goals mit dem Hook useSelector und Zugriff auf den Zustand goals aus dem Redux Store.
5. Initialisieren der Variable dispatch durch Aufruf des Hooks useDispatch.
6. Vervollständigen der Funktion handleRemoveGoal durch Dispatchen der Aktion removeGoal. Das jeweilige goal wird als Parameter übergeben.
7. Abschließen der Logik zum Rendern des Arrays von Zielen, indem über das Array goals iteriert und jedes Ziel gerendert wird.
8. Anzeigen des Textes jedes Ziels und Hinzufügen eines Buttons mit einem onClick-Event, das die Funktion handleRemoveGoal aufruft und das jeweilige goal übergibt.

1. Verwenden der Hooks useDispatch und useSelector, um auf den Redux Store zuzugreifen und Aktionen zu dispatchen.
2. Arbeiten mit den Aktionen removeGoal und addGoal aus goalAction.js, um Aktionen im Zusammenhang mit Zielen zu behandeln.
3. Sicherstellen, dass die Payload der Aktion addGoal eine eindeutige id enthält, die mit Date.now() generiert wird, sowie den Textwert aus dem Eingabefeld.
4. Implementieren der Funktion handleRemoveGoal, um die Aktion removeGoal mit dem entsprechenden Ziel zu dispatchen.
5. Verwenden der Funktion map, um über das Array goals zu iterieren und jedes Ziel zu rendern, wobei dessen Text angezeigt wird.