Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Connexion de Redux avec les Composants React | Redux Toolkit en Pratique
Redux Toolkit & React

bookConnexion 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 et useDispatch depuis la bibliothèque react-redux. Ces hooks permettent la connexion entre React et Redux ;
  • Ligne 3 : Importation des créateurs d'actions increment et decrement 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'état counter 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 fonction dispatch de Redux. Il fait référence à la fonction dispatch, 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'action increment est dispatchée au store Redux à l'intérieur du gestionnaire via la fonction dispatch ;
  • Lignes 13-15 : Définition du gestionnaire d'événement handleDecrement appelé lors du clic sur le bouton "Decrement". L'action decrement est dispatchée au store Redux à l'intérieur du gestionnaire via la fonction dispatch ;
  • 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 utilise useSelector pour accéder à l'état du compteur et useDispatch 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 ?

question mark

Comment établir une connexion entre les composants React et le store Redux pour accéder à l'état ?

Select the correct answer

question mark

Quel est le but du hook useSelector dans le code ?

Select the correct answer

question mark

Que fait la fonction handleDecrement lorsqu'elle est appelée ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 9

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

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

bookConnexion 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 et useDispatch depuis la bibliothèque react-redux. Ces hooks permettent la connexion entre React et Redux ;
  • Ligne 3 : Importation des créateurs d'actions increment et decrement 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'état counter 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 fonction dispatch de Redux. Il fait référence à la fonction dispatch, 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'action increment est dispatchée au store Redux à l'intérieur du gestionnaire via la fonction dispatch ;
  • Lignes 13-15 : Définition du gestionnaire d'événement handleDecrement appelé lors du clic sur le bouton "Decrement". L'action decrement est dispatchée au store Redux à l'intérieur du gestionnaire via la fonction dispatch ;
  • 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 utilise useSelector pour accéder à l'état du compteur et useDispatch 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 ?

question mark

Comment établir une connexion entre les composants React et le store Redux pour accéder à l'état ?

Select the correct answer

question mark

Quel est le but du hook useSelector dans le code ?

Select the correct answer

question mark

Que fait la fonction handleDecrement lorsqu'elle est appelée ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 9
some-alt