Contenu du cours
Redux Toolkit & React
Redux Toolkit & React
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.
jsx
Explication du code :
Ligne 2 : Importez les hooks nécessaires
useSelector
etuseDispatch
de la bibliothèquereact-redux
. Ces hooks permettent la connexion entre React et Redux ;Ligne 3 : Importez les créateurs d'actions
increment
etdecrement
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'étatcounter
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 fonctiondispatch
de Redux. Il fait référence à la fonctiondispatch
, 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'actionincrement
au store Redux à l'intérieur du gestionnaire en utilisant la fonctiondispatch
;Ligne 13-15 : Définissez le gestionnaire d'événements
handleDecrement
qui est appelé lorsque le bouton "Decrement" est cliqué. Nous dispatchons l'actiondecrement
à l'intérieur du gestionnaire au store Redux en utilisant la fonctiondispatch
;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 utiliseuseSelector
pour accéder à l'état du compteur etuseDispatch
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.
1. Comment établissez-vous une connexion entre les composants React et le store Redux pour accéder à l'état ?
2. Quel est le but du hook useSelector
dans le code ?
3. Que fait la fonction handleDecrement
lorsqu'elle est appelée ?
Merci pour vos commentaires !