Schritt 4

Fokus auf die Einbindung der Redux-Logik in eine React-Anwendung. Verbindung von React-Komponenten und dem Redux-Store zur Ermöglichung von Zustandsverwaltung und Aktionen.

Beispiel

Ship Tracker App

Herausforderung

Form.jsx:

1. Öffnen der Datei Form.jsx.
2. Import des useDispatch-Hooks aus dem Paket react-redux. Dieser Hook wird verwendet, um Aktionen an den Redux-Store zu senden.
3. Import der Aktion addGoal aus der Datei goalAction.js. Diese Aktion ist für das Hinzufügen eines Ziels zum Redux-Store verantwortlich.
4. Initialisierung der Variablen dispatch innerhalb der Komponente durch Aufruf des useDispatch-Hooks.
5. Vervollständigung der Funktion handleFormSubmit durch das Dispatchen der Aktion addGoal. Verwenden der Funktion dispatch und Übergeben eines Objekts mit den Zieldetails: { id: Date.now(), text: goal }. Date.now() generiert eine eindeutige ID für jedes Ziel.
6. Zurücksetzen des Formulars nach der Übermittlung durch Aufruf der Funktion resetForm.

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. Fertigstellen 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 entsprechende 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.