Redux - Réducteurs

Les réducteurs sont une fonction pure dans Redux. Les fonctions pures sont prévisibles. Les réducteurs sont le seul moyen de changer d'état dans Redux. C'est le seul endroit où vous pouvez écrire de la logique et des calculs. La fonction de réduction acceptera l'état précédent de l'application et de l'action distribuée, calculera l'état suivant et retournera le nouvel objet.

Les quelques opérations suivantes ne doivent jamais être effectuées à l'intérieur du réducteur -

• Mutation des arguments de fonctions
• Appels API et logique de routage
• Appel d'une fonction non pure, par exemple Math.random ()

Voici la syntaxe d'un réducteur -

(state,action) => newState

Continuons l'exemple de l'affichage de la liste des articles de produits sur une page Web, abordés dans le module des créateurs d'actions. Voyons ci-dessous comment écrire son réducteur.

const initialState = {
   isLoading: false,
   items: []
};
const reducer = (state = initialState, action) => {
   switch (action.type) {
      case 'ITEMS_REQUEST':
         return Object.assign({}, state, {
            isLoading: action.payload.isLoading
         })
      case ‘ITEMS_REQUEST_SUCCESS':
         return Object.assign({}, state, {
            items: state.items.concat(action.items),
            isLoading: action.isLoading
         })
      default:
         return state;
   }
}
export default reducer;

Premièrement, si vous ne définissez pas l'état sur 'initialState', Redux appelle le réducteur avec l'état non défini. Dans cet exemple de code, la fonction concat () de JavaScript est utilisée dans 'ITEMS_REQUEST_SUCCESS', qui ne change pas le tableau existant; renvoie à la place un nouveau tableau.

De cette façon, vous pouvez éviter la mutation de l'état. N'écrivez jamais directement à l'État. Dans 'ITEMS_REQUEST', nous devons définir la valeur d'état de l'action reçue.

Il est déjà discuté que nous pouvons écrire notre logique dans le réducteur et la diviser sur la base des données logiques. Voyons comment nous pouvons diviser les réducteurs et les combiner en tant que réducteur de racine lorsque nous traitons une grande application.

Supposons que nous souhaitons concevoir une page Web sur laquelle un utilisateur peut accéder à l'état de la commande de produits et voir les informations de la liste de souhaits. Nous pouvons séparer la logique dans différents fichiers de réducteurs et les faire fonctionner indépendamment. Supposons que l'action GET_ORDER_STATUS soit envoyée pour obtenir le statut de la commande correspondant à un certain identifiant de commande et un identifiant d'utilisateur.

/reducer/orderStatusReducer.js
import { GET_ORDER_STATUS } from ‘../constants/appConstant’;
export default function (state = {} , action) {
   switch(action.type) {
      case GET_ORDER_STATUS:
         return { ...state, orderStatusData: action.payload.orderStatus };
      default:
         return state;
   }
}

De même, supposons que l'action GET_WISHLIST_ITEMS est envoyée pour obtenir les informations de liste de souhaits de l'utilisateur respectives d'un utilisateur.

/reducer/getWishlistDataReducer.js
import { GET_WISHLIST_ITEMS } from ‘../constants/appConstant’;
export default function (state = {}, action) {
   switch(action.type) {
      case GET_WISHLIST_ITEMS:
         return { ...state, wishlistData: action.payload.wishlistData };
      default:
         return state;
   }
}

Maintenant, nous pouvons combiner les deux réducteurs à l'aide de l'utilitaire Redux combineReducers. Les combineReducers génèrent une fonction qui renvoie un objet dont les valeurs sont différentes fonctions de réduction. Vous pouvez importer tous les réducteurs dans le fichier de réducteur d'index et les combiner en tant qu'objet avec leurs noms respectifs.

/reducer/index.js
import { combineReducers } from ‘redux’;
import OrderStatusReducer from ‘./orderStatusReducer’;
import GetWishlistDataReducer from ‘./getWishlistDataReducer’;

const rootReducer = combineReducers ({
   orderStatusReducer: OrderStatusReducer,
   getWishlistDataReducer: GetWishlistDataReducer
});
export default rootReducer;

Maintenant, vous pouvez passer ce rootReducer à la méthode createStore comme suit -

const store = createStore(rootReducer);