Vaihe 4

Keskity Redux-logiikan liittämiseen React-sovellukseen. Yhdistä React-komponentit ja Redux-store mahdollistaaksesi tilanhallinnan ja toimintojen käytön.

Esimerkki

Ship Tracker -sovellus

Haaste

Form.jsx:

1. Avaa Form.jsx-tiedosto.
2. Tuo useDispatch-hook react-redux-kirjastosta. Tätä hookia käytetään toimintojen lähettämiseen Redux-storeen.
3. Tuo addGoal-toiminto goalAction.js-tiedostosta. Tämä toiminto vastaa tavoitteen lisäämisestä Redux-storeen.
4. Alusta dispatch-muuttuja komponentin sisällä kutsumalla useDispatch-hookia.
5. Täydennä handleFormSubmit-funktio lähettämällä addGoal-toiminto. Käytä dispatch-funktiota ja välitä olio, jossa on tavoitteen tiedot: { id: Date.now(), text: goal }. Date.now() luo yksilöllisen tunnisteen jokaiselle tavoitteelle.
6. Nollaa lomake lähettämisen jälkeen kutsumalla resetForm-funktiota.

GoalList.jsx:

1. Avaa tiedosto GoalList.jsx.
2. Tuo useDispatch- ja useSelector-hookit react-redux-kirjastosta. Näitä hookeja käytetään Redux-storen tilan lukemiseen ja toimintojen lähettämiseen.
3. Tuo removeGoal-toiminto tiedostosta goalAction.js. Tämä toiminto poistaa tavoitteen Redux-storesta.
4. Alusta goals-muuttuja käyttämällä useSelector-hookia ja hae goals-tila Redux-storesta.
5. Alusta dispatch-muuttuja kutsumalla useDispatch-hookia.
6. Täydennä handleRemoveGoal-funktio lähettämällä removeGoal-toiminto. Anna parametrina kyseinen goal.
7. Viimeistele tavoitteiden taulukon renderöinti käymällä läpi goals-taulukko ja renderöimällä jokainen tavoite.
8. Näytä jokaisen tavoitteen teksti ja lisää painike, jonka onClick-tapahtuma kutsuu handleRemoveGoal-funktiota ja välittää kyseisen goal-arvon.

1. Käytä useDispatch- ja useSelector-hookeja Redux-storen tilan lukemiseen ja toimintojen lähettämiseen.
2. Hyödynnä removeGoal- ja addGoal-toimintoja tiedostosta goalAction.js tavoitteisiin liittyvien toimintojen käsittelyyn.
3. Varmista, että addGoal-toiminnon payload sisältää uniikin id-arvon, joka luodaan Date.now()-funktiolla, sekä syötekentän tekstiarvon.
4. Toteuta handleRemoveGoal-funktio lähettämään removeGoal-toiminto oikealla tavoitteella.
5. Käytä map-funktiota käydäksesi läpi goals-taulukon ja renderöidäksesi jokaisen tavoitteen näyttäen sen tekstin.