Schritt 4

Konzentrieren Sie sich darauf, Redux-Logik in eine React-App einzubinden. Verbinden Sie React-Komponenten und den Redux-Store, um Zustandsverwaltung und Aktionen zu ermöglichen.

Beispiel

Schiff Tracker App

Herausforderung

Form.jsx:

1. Öffnen Sie die Datei Form.jsx .

2. Importieren Sie den useDispatch Hook aus dem react-redux Paket. Dieser Hook wird verwendet, um Aktionen an den Redux Store zu senden.

3. Importieren Sie die addGoal Aktion aus der Datei goalAction.js . Diese Aktion ist dafür verantwortlich, ein Ziel zum Redux Store hinzuzufügen.

4. Initialisieren Sie die dispatch Variable innerhalb der Komponente, indem Sie den useDispatch Hook aufrufen.

5. Vervollständigen Sie die handleFormSubmit Funktion, indem Sie die addGoal Aktion senden. Verwenden Sie die dispatch Funktion und übergeben Sie ein Objekt mit den Zieldetails: { id: Date.now(), text: goal } . Die Date.now() Funktion generiert eine eindeutige ID für jedes Ziel.

6. Setzen Sie das Formular nach der Übermittlung zurück, indem Sie die resetForm Funktion aufrufen.

GoalList.jsx:

1. Öffnen Sie die Datei GoalList.jsx .

2. Importieren Sie die useDispatch und useSelector Hooks aus dem react-redux Paket. Diese Hooks werden verwendet, um auf den Redux Store zuzugreifen und Aktionen zu senden.

3. Importieren Sie die removeGoal Aktion aus der Datei goalAction.js . Diese Aktion ist dafür verantwortlich, ein Ziel aus dem Redux Store zu entfernen.

4. Initialisieren Sie die goals Variable mit dem useSelector Hook und greifen Sie auf den goals Zustand aus dem Redux Store zu.

5. Initialisieren Sie die dispatch Variable, indem Sie den useDispatch Hook aufrufen.

6. Vervollständigen Sie die handleRemoveGoal Funktion, indem Sie die removeGoal Aktion senden. Übergeben Sie das goal als Parameter.

7. Beenden Sie die Logik zum Rendern des Arrays von Zielen, indem Sie über das goals Array iterieren und jedes Ziel rendern.

8. Zeigen Sie den Text jedes Ziels an und fügen Sie eine Schaltfläche mit einem onClick Ereignis hinzu, das die handleRemoveGoal Funktion aufruft und das jeweilige goal übergibt.

1. Verwenden Sie die Hooks useDispatch und useSelector , um auf den Redux-Store zuzugreifen und Aktionen zu versenden.

2. Arbeiten Sie mit den Aktionen removeGoal und addGoal aus goalAction.js , um Aktionen im Zusammenhang mit Zielen zu bearbeiten.

3. Stellen Sie sicher, dass die Nutzlast der Aktion addGoal eine eindeutige id enthält, die mit Date.now() generiert wurde, sowie den Textwert aus dem Eingabefeld.

4. Implementieren Sie die Funktion handleRemoveGoal , um die Aktion removeGoal mit dem entsprechenden Ziel zu versenden.

5. Verwenden Sie die Funktion map , um über das Array goals zu iterieren und jedes Ziel zu rendern, wobei dessen Text angezeigt wird.