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 de mise à jour de l'état. Le composant affiche la valeur du compteur et propose des boutons pour l'incrémenter et le décrémenter. Le clic sur ces boutons déclenche des actions qui mettent à jour le store Redux.