Steg 4

Fokus på å involvere Redux-logikk i en React-applikasjon. Koble React-komponenter og Redux store for å muliggjøre tilstandshåndtering og handlinger.

Eksempel

Ship Tracker-app

Utfordring

Form.jsx:

1. Åpne filen Form.jsx.
2. Importer hooken useDispatch fra pakken react-redux. Denne hooken brukes til å sende handlinger til Redux store.
3. Importer handlingen addGoal fra filen goalAction.js. Denne handlingen er ansvarlig for å legge til et mål i Redux store.
4. Initialiser variabelen dispatch inne i komponenten ved å kalle hooken useDispatch.
5. Fullfør funksjonen handleFormSubmit ved å sende handlingen addGoal. Bruk funksjonen dispatch og send inn et objekt med måldetaljer: { id: Date.now(), text: goal }. Date.now() genererer en unik ID for hvert mål.
6. Tilbakestill skjemaet etter innsending ved å kalle funksjonen resetForm.

GoalList.jsx:

1. Åpne filen GoalList.jsx.
2. Importer hookene useDispatch og useSelector fra pakken react-redux. Disse hookene brukes for å få tilgang til Redux store og sende handlinger.
3. Importer handlingen removeGoal fra filen goalAction.js. Denne handlingen er ansvarlig for å fjerne et mål fra Redux store.
4. Initialiser variabelen goals ved å bruke hooken useSelector og få tilgang til tilstanden goals fra Redux store.
5. Initialiser variabelen dispatch ved å kalle hooken useDispatch.
6. Fullfør funksjonen handleRemoveGoal ved å sende handlingen removeGoal. Send inn goal som parameter.
7. Fullfør logikken for å gjengi listen av mål ved å bruke map på goals-arrayet og gjengi hvert mål.
8. Vis teksten til hvert mål og legg til en knapp med en onClick-hendelse som kaller funksjonen handleRemoveGoal og sender inn det respektive goal.

1. Bruk hookene useDispatch og useSelector for å få tilgang til Redux store og sende handlinger.
2. Arbeid med handlingene removeGoal og addGoal fra goalAction.js for å håndtere målrelaterte handlinger.
3. Sørg for at payloaden til addGoal-handlingen inkluderer en unik id generert med Date.now() og tekstverdien fra input-feltet.
4. Implementer funksjonen handleRemoveGoal for å sende handlingen removeGoal med det tilhørende målet.
5. Bruk map-funksjonen for å iterere over goals-arrayet og gjengi hvert mål, og vise teksten.