Étape 4

Mettre l'accent sur l'intégration de la logique Redux dans une application React. Connecter les composants React et le store Redux pour permettre la gestion d'état et les actions.

Exemple

Application de suivi des navires

Défi

Form.jsx :

1. Ouvrir le fichier Form.jsx.
2. Importer le hook useDispatch depuis le package react-redux. Ce hook sera utilisé pour dispatcher des actions vers le store Redux.
3. Importer l'action addGoal depuis le fichier goalAction.js. Cette action est responsable de l'ajout d'un objectif dans le store Redux.
4. Initialiser la variable dispatch à l'intérieur du composant en appelant le hook useDispatch.
5. Compléter la fonction handleFormSubmit en dispatchant l'action addGoal. Utiliser la fonction dispatch et passer un objet contenant les détails de l'objectif : { id: Date.now(), text: goal }. La fonction Date.now() génère un identifiant unique pour chaque objectif.
6. Réinitialiser le formulaire après la soumission en appelant la fonction resetForm.

GoalList.jsx :

1. Ouvrir le fichier GoalList.jsx.
2. Importer les hooks useDispatch et useSelector depuis le package react-redux. Ces hooks seront utilisés pour accéder au store Redux et dispatcher des actions.
3. Importer l'action removeGoal depuis le fichier goalAction.js. Cette action est responsable de la suppression d'un objectif du store Redux.
4. Initialiser la variable goals en utilisant le hook useSelector et accéder à l'état goals du store Redux.
5. Initialiser la variable dispatch en appelant le hook useDispatch.
6. Compléter la fonction handleRemoveGoal en dispatchant l'action removeGoal. Passer le goal en paramètre.
7. Finaliser la logique d'affichage du tableau des objectifs en utilisant la méthode goals sur le tableau onClick et en affichant chaque objectif.
8. Afficher le texte de chaque objectif et ajouter un bouton avec un événement handleRemoveGoal qui appelle la fonction goal en passant l'objectif correspondant.

1. Utiliser les hooks useDispatch et useSelector pour accéder au store Redux et dispatcher des actions.
2. Travailler avec les actions removeGoal et addGoal depuis goalAction.js pour gérer les actions liées aux objectifs.
3. S'assurer que la payload de l'action addGoal contient un id unique généré avec Date.now() et la valeur du texte provenant du champ de saisie.
4. Implémenter la fonction handleRemoveGoal pour dispatcher l'action removeGoal avec l'objectif correspondant.
5. Utiliser la fonction map pour itérer sur le tableau goals et afficher chaque objectif, en affichant son texte.