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, 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. Nous sommes prêts à configurer l'ensemble du store. 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. Détaillons-le étape par étape.

• Ligne 1 : Le code importe 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 : Le counterReducer est importé depuis le fichier ./reducers/counterReducer. Cette fonction reducer gère les modifications d'état pour la portion "counter" du store Redux. La logique à l'intérieur de ce fichier sera créée ultérieurement ;
• Lignes 4-8 : La fonction configureStore est appelée 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 unique tranche d'état « counter », 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.