Rôle des Réducteurs

Théorie

Les réducteurs sont des fonctions pures qui spécifient comment l'état doit changer en réponse aux actions envoyées. En prenant l'état actuel et une action comme paramètres, les réducteurs renvoient 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 réducteur pour notre fonctionnalité de compteur :

Explication du code :

Ligne 1 : Importez la fonction createReducer du package @reduxjs/toolkit. Cette fonction est utilisée pour créer des réducteurs dans Redux ;
Ligne 2 : Importez les créateurs d'actions increment et decrement du fichier ../actions/counterAction.js. Ces créateurs d'actions sont utilisés pour définir les actions que le réducteur traitera ;
Ligne 4 : Définissez la constante initialState à 0. Cela représente la valeur initiale du compteur dans le magasin Redux ;
Ligne 6 : Utilisez la fonction createReducer pour définir le counterReducer ;
Ligne 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 en fonction des actions envoyées ;
Ligne 7 : Utilisez l'objet builder pour définir les cas pour différentes actions à l'intérieur de la fonction de rappel ;
Ligne 9, 10 : Utilisez la méthode addCase de l'objet builder pour définir comment l'état doit être mis à jour lorsque des actions spécifiques, telles que increment et decrement, sont envoyées ;
Ligne 9, 10 : La fonction de rappel à l'intérieur de addCase prend l'état actuel (state) comme argument et renvoie le nouvel état après avoir appliqué l'action correspondante ;
Dans ce cas, lorsque l'action increment est envoyée, l'état est incrémenté de 1 ; lorsque l'action decrement est envoyée, l'état est décrémenté de 1 ;
Ligne 13 : Enfin, exportez le counterReducer comme exportation par défaut du module.