Stap 4

Richt je op het betrekken van Redux-logica in een React-applicatie. Verbind React-componenten en de Redux-store om toestandsbeheer en acties mogelijk te maken.

Voorbeeld

Ship Tracker App

Uitdaging

Form.jsx:

1. Open het bestand Form.jsx.
2. Importeer de useDispatch-hook uit het react-redux-pakket. Deze hook wordt gebruikt om acties naar de Redux-store te versturen.
3. Importeer de addGoal-actie uit het bestand goalAction.js. Deze actie is verantwoordelijk voor het toevoegen van een doel aan de Redux-store.
4. Initialiseer de variabele dispatch binnen de component door de useDispatch-hook aan te roepen.
5. Maak de functie handleFormSubmit af door de addGoal-actie te dispatchen. Gebruik de dispatch-functie en geef een object met de doelgegevens door: { id: Date.now(), text: goal }. De Date.now() genereert een unieke ID voor elk doel.
6. Reset het formulier na het indienen door de functie resetForm aan te roepen.

GoalList.jsx:

1. Open het bestand GoalList.jsx.
2. Importeer de hooks useDispatch en useSelector uit het pakket react-redux. Deze hooks worden gebruikt om toegang te krijgen tot de Redux store en acties te dispatchen.
3. Importeer de actie removeGoal uit het bestand goalAction.js. Deze actie is verantwoordelijk voor het verwijderen van een doel uit de Redux store.
4. Initialiseer de variabele goals met behulp van de useSelector hook en verkrijg de goals-status uit de Redux store.
5. Initialiseer de variabele dispatch door de useDispatch hook aan te roepen.
6. Maak de functie handleRemoveGoal af door de actie removeGoal te dispatchen. Geef de goal als parameter door.
7. Rond de logica af voor het weergeven van de array met doelen door over de goals-array te mappen en elk doel weer te geven.
8. Toon de tekst van elk doel en voeg een knop toe met een onClick-event die de functie handleRemoveGoal aanroept en het betreffende goal doorgeeft.

1. Gebruik de hooks useDispatch en useSelector om toegang te krijgen tot de Redux store en acties te dispatchen.
2. Werk met de acties removeGoal en addGoal uit goalAction.js voor het afhandelen van acties met betrekking tot doelen.
3. Zorg ervoor dat de payload van de actie addGoal een unieke id bevat die wordt gegenereerd met Date.now() en de tekstwaarde uit het invoerveld.
4. Implementeer de functie handleRemoveGoal om de actie removeGoal te dispatchen met het bijbehorende doel.
5. Gebruik de map-functie om over de goals-array te itereren en elk doel weer te geven, waarbij de tekst wordt getoond.