Connexion de Redux avec les Composants React
Théorie
Pour établir une connexion entre les composants React et le store Redux, il est possible d'utiliser le hook useSelector
pour accéder à l'état et le hook useDispatch
pour dispatcher des actions.
Pratique
Connectons maintenant le composant Counter au store Redux.
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "../redux/actions/counterAction";
const Counter = () => {
const counter = useSelector((state) => state.counter);
const dispatch = useDispatch();
const handleIncrement = () => {
dispatch(increment());
};
const handleDecrement = () => {
dispatch(decrement());
};
return (
<div>
<h2>Counter Value: {counter}</h2>
<button onClick={handleIncrement}>Increment</button>
<button onClick={handleDecrement}>Decrement</button>
</div>
);
};
export default Counter;
Explication du code :
- Ligne 2 : Importation des hooks nécessaires
useSelector
etuseDispatch
depuis la bibliothèquereact-redux
. Ces hooks permettent la connexion entre React et Redux ; - Ligne 3 : Importation des créateurs d'actions
increment
etdecrement
depuis le 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. Une fonction sélecteur est fournie 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
, utilisée pour envoyer des actions au store Redux ; - Lignes 9-11 : Définition du gestionnaire d'événement
handleIncrement
appelé lors du clic sur le bouton "Increment". L'actionincrement
est dispatchée au store Redux à l'intérieur du gestionnaire via la fonctiondispatch
; - Lignes 13-15 : Définition du gestionnaire d'événement
handleDecrement
appelé lors du clic sur le bouton "Decrement". L'actiondecrement
est dispatchée au store Redux à l'intérieur du gestionnaire via la fonctiondispatch
; - Lignes 17-23 : Rendu des éléments JSX, incluant la valeur actuelle du compteur et les boutons pour incrémenter et décrémenter. Les gestionnaires d'événements respectifs sont attachés à 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 afin de mettre à jour l'état. Le composant affiche la valeur du compteur et propose 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 établir 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 !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Awesome!
Completion rate improved to 4.17
Connexion de Redux avec les Composants React
Glissez pour afficher le menu
Théorie
Pour établir une connexion entre les composants React et le store Redux, il est possible d'utiliser le hook useSelector
pour accéder à l'état et le hook useDispatch
pour dispatcher des actions.
Pratique
Connectons maintenant le composant Counter au store Redux.
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "../redux/actions/counterAction";
const Counter = () => {
const counter = useSelector((state) => state.counter);
const dispatch = useDispatch();
const handleIncrement = () => {
dispatch(increment());
};
const handleDecrement = () => {
dispatch(decrement());
};
return (
<div>
<h2>Counter Value: {counter}</h2>
<button onClick={handleIncrement}>Increment</button>
<button onClick={handleDecrement}>Decrement</button>
</div>
);
};
export default Counter;
Explication du code :
- Ligne 2 : Importation des hooks nécessaires
useSelector
etuseDispatch
depuis la bibliothèquereact-redux
. Ces hooks permettent la connexion entre React et Redux ; - Ligne 3 : Importation des créateurs d'actions
increment
etdecrement
depuis le 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. Une fonction sélecteur est fournie 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
, utilisée pour envoyer des actions au store Redux ; - Lignes 9-11 : Définition du gestionnaire d'événement
handleIncrement
appelé lors du clic sur le bouton "Increment". L'actionincrement
est dispatchée au store Redux à l'intérieur du gestionnaire via la fonctiondispatch
; - Lignes 13-15 : Définition du gestionnaire d'événement
handleDecrement
appelé lors du clic sur le bouton "Decrement". L'actiondecrement
est dispatchée au store Redux à l'intérieur du gestionnaire via la fonctiondispatch
; - Lignes 17-23 : Rendu des éléments JSX, incluant la valeur actuelle du compteur et les boutons pour incrémenter et décrémenter. Les gestionnaires d'événements respectifs sont attachés à 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 afin de mettre à jour l'état. Le composant affiche la valeur du compteur et propose 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 établir 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 !