Théorie

Dans Redux, le store agit comme la source unique de vérité pour l'état d'une application. Il contient l'arbre d'état complet et est immuable. Pour modifier l'état, il est nécessaire de dispatcher des actions. En utilisant les fonctions et hooks de Redux Toolkit, il est possible d'accéder et de modifier le store facilement.

Pratique

Le fichier store.js a été créé dans le dossier redux. L'ensemble du store est prêt à être configuré. Voici un exemple de mise en place :

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "./reducers/counterReducer";

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

export default store;

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

• Ligne 1 : Importation de la fonction configureStore depuis le package @reduxjs/toolkit. Cette fonction simplifie la création d'un store Redux en fournissant des valeurs par défaut pertinentes et un middleware intégré ;
• Ligne 2 : Importation du counterReducer depuis le fichier ./reducers/counterReducer. Cette fonction reducer gère les modifications d'état pour la portion "counter" du store Redux. La logique de ce fichier sera créée ultérieurement ;
• Lignes 4-8 : Appel de la fonction configureStore avec un objet en 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 portions d'état à leurs fonctions reducer respectives. Ici, la portion d'état counter est associée à la fonction counterReducer ;
  • La fonction configureStore retourne un objet store Redux qui contient l'état de l'application et fournit des méthodes pour interagir avec celui-ci.
• Ligne 10 : Enfin, l'objet store est exporté comme export par défaut de ce module afin qu'il puisse être utilisé dans d'autres parties de l'application.

Remarque

En résumé, ce code configure un store Redux avec une seule tranche d’état « counter », en utilisant le counterReducer pour gérer les modifications d’état. Le store résultant est ensuite exporté pour être utilisé dans d’autres parties de l’application.