Réducteurs dans Redux

Dans la leçon précédente, nous avons utilisé la fonction createSlice pour créer une tranche (slice) pour les produits products et un réducteur qui mettra à jour cette tranche, stockée dans le store. Je rappelle encore une fois que dans Redux, les données de l'état sont modifiées à l'aide de réducteurs.

Il faut se souvenir que des restrictions s'imposent aux réducteurs. Un réducteur met à jour l'état uniquement sur la base des valeurs reçues de l'état courant et de l'objet action, puis il décide comment modifier l'état et renvoie sa nouvelle valeur.

Nous savons que par défaut, les objets et les tableaux en JavaScript sont mutables. Nous savons également qu'il est interdit de modifier le state directement, dans ce cas, il faut travailler uniquement avec des copies. Cette règle doit être respectée par le réducteur également. Mais écrire cette logique manuellement peut être assez fastidieux et complexe, et c'est là que la fonction createSlice vient à la rescousse, elle qui utilise la bibliothèque Immer, transformant votre code 'mutable' en code 'immutable'. Ainsi, on peut 'pécher' et simplifier la vie uniquement lorsqu'on utilise les fonctions createSlice ou createReducer.

Parmi les restrictions du réducteur figurent également l'utilisation d'une logique asynchrone, le calcul de valeurs aléatoires et l'exécution d'autres "effets de bord". Et maintenant, après avoir fait plus ample connaissance avec le réducteur, revenons à notre application avec les produits.

Dans notre application, il y a un store que nous avons créé dans les leçons précédentes, mais pour l'instant il ne contient rien. Ouvrons notre fichier store.js et ajoutons-y un peu de code. Pour commencer, importons-y la fonction reducer pour les produits :

Maintenant, en tant que réducteur, nous pouvons spécifier la fonction importée productsReducer :

Par cette ligne ci-dessus, nous indiquons à notre store que désormais, lorsqu'une action se produit, toutes les données pour la tranche state.products seront mises à jour par le réducteur productsReducer.

Maintenant, vous pouvez lancer l'application (remarquez que l'avertissement concernant un réducteur non valide a disparu de la console !), ouvrir Redux DevTools dans le navigateur et explorer ses onglets. Par exemple, en cliquant sur l'onglet State dans l'onglet Inspector nous pouvons voir nos deux objets avec les produits, qui sont apparus comme valeur initiale de l'état au premier lancement de l'application. Dans l'onglet Log monitor, nous voyons quelles tranches contient l'état global - c'est la tranche products, incluant deux objets. Jetez également un œil à l'onglet Chart.