Redux - Fonctions pures

Une fonction est un processus qui prend des entrées appelées arguments et produit une sortie connue sous le nom de valeur de retour. Une fonction est dite pure si elle respecte les règles suivantes -

Une fonction renvoie le même résultat pour les mêmes arguments.
Son évaluation n'a pas d'effets secondaires, c'est-à-dire qu'elle n'altère pas les données d'entrée.
Aucune mutation des variables locales et globales.
Il ne dépend pas de l'état externe comme une variable globale.

Prenons l'exemple d'une fonction qui retourne deux fois la valeur passée en entrée de la fonction. En général, il s'écrit f (x) => x * 2. Si une fonction est appelée avec une valeur d'argument 2, alors la sortie serait 4, f (2) => 4.

Écrivons la définition de la fonction en JavaScript comme indiqué ci-dessous -

const double = x => x*2; // es6 arrow function
console.log(double(2));  // 4

Here, double is a pure function.

Conformément aux trois principes de Redux, les modifications doivent être effectuées par une fonction pure, c'est-à-dire un réducteur dans Redux. Maintenant, une question se pose de savoir pourquoi un réducteur doit être une fonction pure.

Supposons que vous souhaitiez distribuer une action dont le type est 'ADD_TO_CART_SUCCESS' pour ajouter un article à votre application de panier en cliquant sur le bouton Ajouter au panier.

Supposons que le réducteur ajoute un article à votre panier comme indiqué ci-dessous -

const initialState = {
   isAddedToCart: false;
}
const addToCartReducer = (state = initialState, action) => { //es6 arrow function
   switch (action.type) {
      case 'ADD_TO_CART_SUCCESS' :
         state.isAddedToCart = !state.isAddedToCart; //original object altered
         return state;
      default:
         return state;
   }
}
export default addToCartReducer ;

Supposons, isAddedToCart est une propriété sur un objet d'état qui vous permet de décider quand désactiver le bouton `` ajouter au panier '' pour l'article en renvoyant une valeur booléenne ‘true or false’. Cela empêche l'utilisateur d'ajouter le même produit plusieurs fois. Maintenant, au lieu de renvoyer un nouvel objet, nous mutons la prop isAddedToCart sur l'état comme ci-dessus. Maintenant, si nous essayons d'ajouter un article au panier, rien ne se passe. Le bouton Ajouter au panier ne sera pas désactivé.

La raison de ce comportement est la suivante -

Redux compare les objets anciens et nouveaux en fonction de l'emplacement mémoire des deux objets. Il attend un nouvel objet du réducteur si un changement s'est produit. Et il s'attend également à récupérer l'ancien objet si aucun changement ne se produit. Dans ce cas, c'est pareil. Pour cette raison, Redux suppose que rien ne s'est passé.

Donc, il est nécessaire qu'un réducteur soit une fonction pure dans Redux. Ce qui suit est une façon de l'écrire sans mutation -

const initialState = {
   isAddedToCart: false;
}
const addToCartReducer = (state = initialState, action) => { //es6 arrow function
   switch (action.type) {
      case 'ADD_TO_CART_SUCCESS' :
         return {
            ...state,
            isAddedToCart: !state.isAddedToCart
         }
      default:
         return state;
   }
}
export default addToCartReducer;