Connexion de Redux et React

Théorie

Pour établir une connexion entre les composants React et le store Redux, nous pouvons utiliser le hook useSelector pour accéder à l'état et le hook useDispatch pour envoyer des actions.

Pratique

Maintenant, connectons le composant Counter au store Redux.

Explication du code :

• Ligne 2 : Importez les hooks nécessaires useSelector et useDispatch de la bibliothèque react-redux. Ces hooks permettent la connexion entre React et Redux ;
• Ligne 3 : Importez les créateurs d'actions increment et decrement du fichier ../redux/actions/counterAction. Ces actions seront dispatchées pour mettre à jour l'état du compteur dans le store Redux ;
• Ligne 6 : Le hook useSelector est utilisé pour accéder à l'état counter du store Redux. Nous fournissons une fonction sélectrice en argument, qui retourne la valeur d'état souhaitée ;
• Ligne 7 : Le hook useDispatch est utilisé pour accéder à la fonction dispatch de Redux. Il fait référence à la fonction dispatch, qui est utilisée pour dispatcher des actions au store Redux ;
• Ligne 9-11 : Définissez le gestionnaire d'événements handleIncrement qui est appelé lorsque le bouton "Increment" est cliqué. Nous dispatchons l'action increment au store Redux à l'intérieur du gestionnaire en utilisant la fonction dispatch ;
• Ligne 13-15 : Définissez le gestionnaire d'événements handleDecrement qui est appelé lorsque le bouton "Decrement" est cliqué. Nous dispatchons l'action decrement à l'intérieur du gestionnaire au store Redux en utilisant la fonction dispatch ;
• Ligne 17-23 : Rendre les éléments JSX, y compris la valeur actuelle du compteur et les boutons pour incrémenter et décrémenter. Nous attachons les gestionnaires d'événements respectifs à l'attribut onClick des boutons.

Remarque

Ce code connecte un composant React (Counter) à Redux. Il utilise useSelector pour accéder à l'état du compteur et useDispatch pour dispatcher des actions pour les mises à jour d'état. Le composant affiche la valeur du compteur et fournit des boutons pour l'incrémenter et le décrémenter. Cliquer sur ces boutons déclenche des actions qui mettent à jour le store Redux.