Trin 4

Fokus på at inddrage Redux-logik i en React-applikation. Forbind React-komponenter og Redux store for at muliggøre tilstandshåndtering og handlinger.

Eksempel

Ship Tracker App

Udfordring

Form.jsx:

1. Åbn filen Form.jsx.
2. Importér hooken useDispatch fra pakken react-redux. Denne hook bruges til at dispatch'e handlinger til Redux store.
3. Importér handlingen addGoal fra filen goalAction.js. Denne handling er ansvarlig for at tilføje et mål til Redux store.
4. Initialisér variablen dispatch inde i komponenten ved at kalde hooken useDispatch.
5. Fuldfør funktionen handleFormSubmit ved at dispatch'e handlingen addGoal. Brug funktionen dispatch og videregiv et objekt med måldetaljer: { id: Date.now(), text: goal }. Date.now() genererer et unikt ID for hvert mål.
6. Nulstil formularen efter indsendelse ved at kalde funktionen resetForm.

GoalList.jsx:

1. Åbn filen GoalList.jsx.
2. Importér useDispatch og useSelector hooks fra react-redux pakken. Disse hooks bruges til at tilgå Redux store og dispatch actions.
3. Importér removeGoal action fra filen goalAction.js. Denne action er ansvarlig for at fjerne et mål fra Redux store.
4. Initialisér variablen goals ved at bruge useSelector hook og tilgå goals state fra Redux store.
5. Initialisér variablen dispatch ved at kalde useDispatch hook.
6. Fuldfør funktionen handleRemoveGoal ved at dispatch removeGoal action. Send goal som parameter.
7. Afslut logikken for rendering af arrayet af mål ved at mappe over goals arrayet og render hvert mål.
8. Vis teksten for hvert mål og tilføj en knap med en onClick event, der kalder funktionen handleRemoveGoal og sender det respektive goal.

1. Brug useDispatch og useSelector hooks til at tilgå Redux store og dispatch actions.
2. Arbejd med removeGoal og addGoal actions fra goalAction.js for at håndtere actions relateret til mål.
3. Sørg for, at payload for addGoal action inkluderer et unikt id genereret med Date.now() og tekstværdien fra inputfeltet.
4. Implementér funktionen handleRemoveGoal til at dispatch removeGoal action med det tilsvarende mål.
5. Udnyt map funktionen til at iterere over goals arrayet og render hvert mål, hvor teksten vises.