Création du Store Redux

Théorie

Dans Redux, le store agit comme la seule source de vérité pour l'état d'une application. Il contient l'arbre d'état complet et est immuable. Pour modifier l'état, des actions doivent être dispatchées. En utilisant les fonctions et hooks de Redux Toolkit, vous pouvez accéder et modifier le store facilement.

Pratique

Nous avons créé le fichier store.js dans le dossier redux. Nous sommes prêts à configurer l'ensemble du store. Voici un exemple de comment cela peut être fait :

Explication du code : Ce code configure le store Redux en utilisant la fonction configureStore fournie par le package @reduxjs/toolkit. Décomposons-le étape par étape.

• Ligne 1 : Le code importe la fonction configureStore du package @reduxjs/toolkit. Cette fonction simplifie le processus de création d'un store Redux en fournissant des valeurs par défaut sensées et un middleware intégré ;
• Ligne 2 importe le counterReducer du fichier ./reducers/counterReducer. Cette fonction réductrice gère les changements d'état pour la tranche "counter" du store Redux. La logique à l'intérieur de ce fichier sera créée plus tard ;
• Ligne 4-8 : La fonction configureStore est appelée avec un objet comme argument. Cet objet spécifie les options de configuration du store. Dans ce cas, l'option reducer est la seule option (Ligne 5) ;
  • L'option reducer est un objet qui associe les tranches d'état à leurs fonctions réductrices correspondantes. Dans ce cas, la tranche counter de l'état est associée à la fonction counterReducer ;
  • La fonction configureStore renvoie un objet store Redux qui contient l'état de l'application et fournit des méthodes pour interagir avec lui.
• Ligne 10 : Enfin, l'objet store est exporté comme exportation par défaut de ce module afin qu'il puisse être utilisé dans d'autres parties de l'application.

Remarque

Pour résumer, ce code configure un store Redux avec une seule tranche "counter" de l'état, en utilisant le counterReducer pour gérer les changements d'état. Le store résultant est ensuite exporté pour être utilisé dans d'autres parties de l'application.