Étape 4

Concentrez-vous sur l'intégration de la logique Redux dans une application React. Connectez les composants React et le store Redux pour permettre la gestion de l'état et des actions.

Exemple

Application de Suivi des Navires

Défi

Form.jsx :

1. Ouvrez le fichier Form.jsx.
2. Importez le hook useDispatch du package react-redux. Ce hook sera utilisé pour envoyer des actions au store Redux.
3. Importez l'action addGoal du fichier goalAction.js. Cette action est responsable de l'ajout d'un objectif au store Redux.
4. Initialisez la variable dispatch à l'intérieur du composant en appelant le hook useDispatch.
5. Complétez la fonction handleFormSubmit en envoyant l'action addGoal. Utilisez la fonction dispatch et passez un objet avec les détails de l'objectif : { id: Date.now(), text: goal }. Le Date.now() génère un ID unique pour chaque objectif.
6. Réinitialisez le formulaire après la soumission en appelant la fonction resetForm.

GoalList.jsx :

1. Ouvrez le fichier GoalList.jsx.
2. Importez les hooks useDispatch et useSelector du package react-redux. Ces hooks seront utilisés pour accéder au store Redux et envoyer des actions.
3. Importez l'action removeGoal du fichier goalAction.js. Cette action est responsable de la suppression d'un objectif du store Redux.
4. Initialisez la variable goals en utilisant le hook useSelector et accédez à l'état goals du store Redux.
5. Initialisez la variable dispatch en appelant le hook useDispatch.
6. Complétez la fonction handleRemoveGoal en envoyant l'action removeGoal. Passez l'goal en tant que paramètre.
7. Terminez la logique de rendu du tableau d'objectifs en parcourant le tableau goals et en rendant chaque objectif.
8. Affichez le texte de chaque objectif et ajoutez un bouton avec un événement onClick qui appelle la fonction handleRemoveGoal et passe l'goal respectif.

1. Utilisez les hooks useDispatch et useSelector pour accéder au store Redux et envoyer des actions.
2. Travaillez avec les actions removeGoal et addGoal de goalAction.js pour gérer les actions liées aux objectifs.
3. Assurez-vous que la charge utile de l'action addGoal inclut un id unique généré à l'aide de Date.now() et la valeur de texte du champ de saisie.
4. Implémentez la fonction handleRemoveGoal pour envoyer l'action removeGoal avec l'objectif correspondant.
5. Utilisez la fonction map pour itérer sur le tableau goals et rendre chaque objectif, en affichant son texte.