React JS pour Tous - L'Ultime Formation [49 heures]

🎬 Leçon 8: Utiliser useSelector et useDispatch pour accéder au Redux Store

Dans cette leçon, nous allons apprendre comment utiliser les hooks useSelector et useDispatch qui sont fournis par react-redux pour interagir avec le store Redux dans vos composants React fonctionnels. Ces hooks nous permettent d'accéder au state global de l'application sans avoir besoin de passer des props manuellement à travers la hiérarchie des composants.

Voici un aperçu de ce que nous allons couvrir :

1. useSelector : Ce hook permet d'extraire des morceaux du state global, sans exposer l'état entier de l'application. Vous pouvez le passer comme une fonction qui prend le whole state et retourne la partie que vous voulez utiliser.

   const count = useSelector((state) => state.counter.count);
   

2. useDispatch : Ce hook vous donne un dispatcher de manière abstraite, tout comme useSelector, mais cette fois-ci pour dépacher des actions.

   const dispatch = useDispatch();
   

3. Utilisation combinée : Vous pouvez utiliser ces deux hooks ensemble dans un composant pour lire et écrire dans le store.

   const { count } = useSelector((state) => state.counter);
   const dispatch = useDispatch();
   
   const increment = () => dispatch({ type: 'INCREMENT' });
   

4. Mise à jour du cache : react-redux utilise un système de cache pour éviter des rééxcutions inutiles lorsque les valeurs sélectées ne changent pas entre chaque rendu. Assurez-vous que votre fonction de sélection retourne la même référence de résultat chaque fois, ou appuyez sur react-redux pour forcer une nouvelle lecture du store si les dépendances ont changé.

   const memoizedValue = useSelector((prev, state) => {
     /* retournez la même référence de résultat */
     return prev; // ou une partie du state qui a changé
   }, shallEqual);
   

5. Optimisations : Les hooks useSelector et useDispatch sont optimisés pour fonctionner avec React's memoization system, ce qui les rend très performants dans des applications de taille moyenne à grande.

6. Exercices pratiques : Vous aurez l'occasion de mettre en pratique ces concepts en modifiant un exemple de code fourni ou en travaillant sur votre projet personnel.

En suivant cette leçon, vous saurez comment intégrer useSelector et useDispatch dans vos composants React pour créer des composants qui sont connectés au store Redux de manière simple et déclarative. Cela vous aidera à gérer l'état global de votre application de manière plus efficace et à réduire le coupling entre vos composants.