Mise en place avec React Redux (`Provider`, `useSelector`, `useDispatch`)

Connecter react et redux : Le rôle de `react-redux`

Avoir un store Redux fonctionnel avec des actions et des reducers est une chose, mais il faut ensuite le connecter à notre interface utilisateur construite avec React. C'est là qu'intervient la bibliothèque officielle `react-redux`. Son rôle est de servir de pont entre le store Redux et vos composants React, en fournissant des outils pour lire l'état du store et dispatcher des actions depuis ces composants.

Sans `react-redux`, nous devrions manuellement souscrire chaque composant aux mises à jour du store, récupérer l'état, et passer la fonction `dispatch` via les props, ce qui serait fastidieux et inefficace. `react-redux` abstrait toute cette complexité et optimise le processus, notamment en s'assurant que les composants ne se re-rendent que lorsque les données spécifiques dont ils ont besoin changent.

Pour intégrer Redux dans une application React, `react-redux` repose principalement sur trois éléments fondamentaux : le composant `` et les hooks `useSelector` et `useDispatch`.

Rendre le store disponible : Le composant ``

La première étape pour connecter votre application React au store Redux est d'utiliser le composant `` fourni par `react-redux`. Ce composant doit envelopper l'ensemble de votre application (ou au moins la partie qui a besoin d'accéder au store Redux).

Le rôle du `` est de rendre l'instance de votre store Redux disponible à tous les composants descendants qui en auront besoin, via le système de contexte de React (mais de manière optimisée). Il prend une seule prop obligatoire : `store`, à laquelle vous devez passer l'instance de votre store Redux que vous avez créée (généralement avec `configureStore` de Redux Toolkit).

Typiquement, cette configuration se fait dans le fichier racine de votre application, comme `src/index.js` ou `src/main.jsx` :

// src/index.js (ou main.jsx)
import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux'; // Importer Provider
import store from './app/store'; // Importer le store Redux configuré
import App from './App';
import './index.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
     { /* Envelopper App avec Provider */}
      
    
  
);

Une fois que `` et tous ses descendants sont enveloppés par ``, ils peuvent potentiellement interagir avec le store Redux en utilisant les hooks fournis par `react-redux`.

Lire l'état du store : Le hook `useSelector`

Pour qu'un composant puisse accéder aux données contenues dans le store Redux, il doit utiliser le hook `useSelector`. Ce hook permet d'extraire (ou de "sélectionner") une partie de l'état global.

Il prend en argument une fonction, appelée fonction sélecteur (selector function). Cette fonction reçoit l'état complet du store Redux comme unique argument et doit retourner la portion spécifique de l'état dont le composant a besoin. `react-redux` se charge ensuite de souscrire le composant aux mises à jour du store.

Crucialement, le composant ne sera re-rendu que si la valeur retournée par le sélecteur change (comparaison par référence `===`). Il est donc important d'écrire des sélecteurs qui retournent uniquement les données nécessaires et d'éviter de retourner de nouveaux objets ou tableaux à chaque appel si les données sous-jacentes n'ont pas changé.

import React from 'react';
import { useSelector } from 'react-redux';

function AfficheurCompteur() {
  // Le sélecteur prend l'état global et retourne state.counter.value
  const compteur = useSelector((state) => state.counter.value);
  const nomUtilisateur = useSelector((state) => state.user.profile?.name); // Exemple avec accès optionnel

  return (
    

      
Compteur : {compteur}
      {nomUtilisateur && 
Utilisateur : {nomUtilisateur}
}
    
  );
}

export default AfficheurCompteur;

Dans cet exemple, `AfficheurCompteur` utilise `useSelector` pour récupérer la valeur du compteur et le nom de l'utilisateur depuis le store. Si `state.counter.value` change, le composant se re-rendra. Si une autre partie de l'état change (par exemple, `state.todos`), mais que `state.counter.value` et `state.user.profile.name` restent identiques, ce composant ne sera pas re-rendu inutilement grâce aux optimisations de `react-redux`.

Modifier l'état : Le hook `useDispatch`

Pour déclencher des modifications de l'état depuis un composant, nous devons dispatcher des actions Redux. Le hook `useDispatch` nous donne accès à la fonction `dispatch` du store.

Il suffit d'appeler `useDispatch()` au début de votre composant fonctionnel pour obtenir la fonction `dispatch`. Ensuite, vous pouvez appeler cette fonction `dispatch` dans des gestionnaires d'événements (comme `onClick`, `onSubmit`) ou dans des `useEffect`, en lui passant l'action Redux que vous souhaitez envoyer au store (soit un objet action créé manuellement, soit, plus couramment, le résultat d'un créateur d'action).

import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
// Importe les créateurs d'actions (souvent générés par Redux Toolkit)
import { incremented, decremented, incrementByAmount } from '../features/counter/counterSlice'; 

function ControleurCompteur() {
  const dispatch = useDispatch();
  const [incrementValue, setIncrementValue] = useState('2');

  const handleIncrement = () => {
    dispatch(incremented()); // Dispatch de l'action 'incremented'
  };

  const handleDecrement = () => {
    dispatch(decremented()); // Dispatch de l'action 'decremented'
  };

  const handleIncrementByAmount = () => {
    const amount = Number(incrementValue) || 0;
    dispatch(incrementByAmount(amount)); // Dispatch avec un payload
  };

  return (
    

      +1
      -1
      

         setIncrementValue(e.target.value)} 
        />
        Ajouter Montant
      
    
  );
}

export default ControleurCompteur;

En combinant `` pour rendre le store accessible, `useSelector` pour lire les données, et `useDispatch` pour envoyer des actions, `react-redux` fournit un moyen élégant et efficace d'intégrer la gestion d'état Redux dans vos applications React, tout en maintenant une séparation claire entre la logique d'état et la logique de l'interface utilisateur.