Théorie

Les reducers sont des fonctions pures qui spécifient comment l’état doit changer en réponse aux actions dispatchées. En prenant l’état actuel et une action comme paramètres, les reducers retournent le nouvel état de l’application.

Pratique

Dans le dossier reducers de notre projet, nous avons le fichier counterReducer.js où nous définissons le reducer pour la fonctionnalité de compteur :

import { createReducer } from "@reduxjs/toolkit";
import { increment, decrement } from "../actions/counterAction.js";

const initialState = 0;

const counterReducer = createReducer(initialState,
  (builder) => {
    builder
      .addCase(increment, (state) => state + 1)
      .addCase(decrement, (state) => state - 1);
});

export default counterReducer;

Explication du code :

• Ligne 1 : Importation de la fonction createReducer depuis le package @reduxjs/toolkit. Cette fonction est utilisée pour créer des reducers dans Redux ;
• Ligne 2 : Importation des créateurs d’actions increment et decrement depuis le fichier ../actions/counterAction.js. Ces créateurs d’actions servent à définir les actions que le reducer va gérer ;
• Ligne 4 : Définition de la constante initialState à 0. Cela représente la valeur initiale du compteur dans le store Redux ;
• Ligne 6 : Utilisation de la fonction createReducer pour définir le counterReducer ;
• Lignes 6-11 : La fonction createReducer prend deux arguments : l’initialState et une fonction de rappel qui définit comment l’état doit être mis à jour selon les actions dispatchées ;
• Ligne 7 : Utilisation de l’objet builder pour définir les cas pour différentes actions à l’intérieur de la fonction de rappel ;
• Lignes 9, 10 : Utilisation de la méthode addCase de l’objet builder pour définir comment l’état doit être mis à jour lorsque des actions spécifiques, comme increment et decrement, sont dispatchées ;
• Lignes 9, 10 : La fonction de rappel à l’intérieur de addCase prend l’état actuel (state) comme argument et retourne le nouvel état après application de l’action correspondante ;
• Dans ce cas, lorsque l’action increment est dispatchée, l’état est incrémenté de 1 ; lorsque l’action decrement est dispatchée, l’état est décrémenté de 1 ;
• Ligne 13 : Enfin, exportation du counterReducer comme export par défaut du module.

Remarque

En résumé, le counterReducer va gérer les actions dispatchées et mettre à jour l’état du compteur en conséquence dans le store Redux.