Steg 4

Fokusera på att involvera Redux-logik i en React-applikation. Anslut React-komponenter och Redux-butiken för att möjliggöra tillståndshantering och åtgärder.

Exempel

Ship Tracker App

Utmaning

Form.jsx:

1. Öppna filen Form.jsx.
2. Importera hooken useDispatch från paketet react-redux. Denna hook används för att skicka åtgärder till Redux-butiken.
3. Importera åtgärden addGoal från filen goalAction.js. Denna åtgärd ansvarar för att lägga till ett mål i Redux-butiken.
4. Initiera variabeln dispatch inuti komponenten genom att anropa hooken useDispatch.
5. Slutför funktionen handleFormSubmit genom att skicka åtgärden addGoal. Använd funktionen dispatch och skicka in ett objekt med måldetaljer: { id: Date.now(), text: goal }. Date.now() genererar ett unikt ID för varje mål.
6. Återställ formuläret efter inskick genom att anropa funktionen resetForm.

GoalList.jsx:

1. Öppna filen GoalList.jsx.
2. Importera hookarna useDispatch och useSelector från paketet react-redux. Dessa hooks används för att komma åt Redux-butiken och skicka actions.
3. Importera actionen removeGoal från filen goalAction.js. Denna action ansvarar för att ta bort ett mål från Redux-butiken.
4. Initiera variabeln goals med hjälp av hooken useSelector och hämta tillståndet goals från Redux-butiken.
5. Initiera variabeln dispatch genom att anropa hooken useDispatch.
6. Slutför funktionen handleRemoveGoal genom att skicka actionen removeGoal. Skicka in goal som parameter.
7. Färdigställ logiken för att rendera arrayen av mål genom att iterera över arrayen goals och rendera varje mål.
8. Visa texten för varje mål och lägg till en knapp med en onClick-händelse som anropar funktionen handleRemoveGoal och skickar in respektive goal.

1. Använd hookarna useDispatch och useSelector för att komma åt Redux-butiken och skicka actions.
2. Arbeta med removeGoal och addGoal-actions från goalAction.js för att hantera actions relaterade till mål.
3. Säkerställ att payloaden för addGoal-actionen innehåller ett unikt id genererat med Date.now() och textvärdet från inmatningsfältet.
4. Implementera funktionen handleRemoveGoal för att skicka actionen removeGoal med motsvarande mål.
5. Använd funktionen map för att iterera över arrayen goals och rendera varje mål, samt visa dess text.