Passaggio 4

Concentrarsi sull'integrazione della logica Redux in un'app React. Collegare i componenti React e lo store Redux per abilitare la gestione dello stato e delle azioni.

Esempio

Ship Tracker App

Sfida

Form.jsx:

1. Aprire il file Form.jsx.
2. Importare l'hook useDispatch dal pacchetto react-redux. Questo hook verrà utilizzato per inviare azioni allo store Redux.
3. Importare l'azione addGoal dal file goalAction.js. Questa azione è responsabile dell'aggiunta di un obiettivo allo store Redux.
4. Inizializzare la variabile dispatch all'interno del componente chiamando l'hook useDispatch.
5. Completare la funzione handleFormSubmit inviando l'azione addGoal. Utilizzare la funzione dispatch e passare un oggetto con i dettagli dell'obiettivo: { id: Date.now(), text: goal }. Date.now() genera un ID univoco per ogni obiettivo.
6. Resettare il modulo dopo l'invio chiamando la funzione resetForm.

GoalList.jsx:

1. Aprire il file GoalList.jsx.
2. Importare gli hook useDispatch e useSelector dal pacchetto react-redux. Questi hook verranno utilizzati per accedere allo store Redux e inviare azioni.
3. Importare l'azione removeGoal dal file goalAction.js. Questa azione è responsabile della rimozione di un obiettivo dallo store Redux.
4. Inizializzare la variabile goals utilizzando l'hook useSelector e accedere allo stato goals dallo store Redux.
5. Inizializzare la variabile dispatch chiamando l'hook useDispatch.
6. Completare la funzione handleRemoveGoal inviando l'azione removeGoal. Passare il goal come parametro.
7. Terminare la logica di rendering dell'array di obiettivi mappando l'array goals e renderizzando ciascun obiettivo.
8. Visualizzare il testo di ogni obiettivo e aggiungere un pulsante con un evento onClick che richiama la funzione handleRemoveGoal passando il rispettivo goal.

1. Utilizzare gli hook useDispatch e useSelector per accedere allo store Redux e inviare azioni.
2. Lavorare con le azioni removeGoal e addGoal da goalAction.js per gestire le azioni relative agli obiettivi.
3. Assicurarsi che il payload dell'azione addGoal includa un id univoco generato tramite Date.now() e il valore di testo dal campo di input.
4. Implementare la funzione handleRemoveGoal per inviare l'azione removeGoal con l'obiettivo corrispondente.
5. Utilizzare la funzione map per iterare sull'array goals e renderizzare ciascun obiettivo, visualizzando il suo testo.