Création de composants Redux Store

Les composants Redux et Redux Saga stockent les résultats dans le magasin Redux.

About this task

Procedure

Ouvrez le fichier reducerStateInterface.ts depuis le répertoire src/redux/reducers.
Déclarez et exportez l'interface d'état du réducteur pour la liste de présélection.
```
export interface WishListReducerState {
  list: any;
}
```
Sauvegardez le fichier.
Ouvrez le fichier initStates.ts depuis le répertoire src/redux/reducers.
Importez le fichier WishListReducerState créé à l'étape 2.
Créez l'état par défaut pour WishListReducerState et exportez-le.
A présent, créez les fonctions des réducteurs pour mettre à jour cet état. Créez un fichier wishList.ts dans src/redux/reducers.

Créez la fonction wishListReducer, qui est utilisée par les agents Redux Saga pour mettre à jour le magasin Redux State. Pour créer le wishListReducer, mettez à jour le contenu suivant dans le fichier :

//Standard libraries
import { createReducer, AnyAction } from "@reduxjs/toolkit";
//Redux
import initStates from "./initStates";
import * as ACTIONS from "../action-types/wishList";
import { WISHLIST_RESET_ACTION } from "../actions/wishList";

/**
 * Wish List Reducer
 * handles states used by wish list related components
 * @param state State object managed by wish list reducer
 * @param action The dispatched action
 */
const WishListReducer = createReducer(initStates.wishList, (builder) => {
  builder.addCase(ACTIONS.WISHLIST_GET_SUCCESS, (state, action: AnyAction) => {
    state.list = action.response.GiftList;
  });
  builder.addcase(WISHLIST_RESET_ACTION, (state, action: AnyAction) => {
    state.list = null;
  });
});
export default wishListReducer;

Sauvegardez le fichier.

Exportez le WishListReducerState via les interfaces RootReducerState et la fonction wishListReducer dans le fichier index.ts à partir du répertoire src/redux/reducers. Après l'exportation de la fonction, le code est mis à jour comme indiqué ci-dessous :

import wishList from "./wishList";
import {
  ErrorReducerState,
  AccountReducerState,
  CatalogReducerState,
  UserReducerState,
  OrderReducerState,
  SEOReducerState,
  ContractReducerState,
  SearchReducerState,
  OrganizationReducerState,
  ContextReducerState,
  SuccessMessageReducerState,
  ConfirmationReducerState,
  RecurringOrderReducerState,
  OrderDetailsMapReducerState,
  SiteReducerState,
  ApiReducerState,
  WishListReducerState,
} from "./reducerStateInterface";

export * from "./reducerStateInterface";
export interface RootReducerState {
  account: AccountReducerState;
  api: ApiReducerState;
  catalog: CatalogReducerState;
  user: UserReducerState;
  order: OrderReducerState;
  error: ErrorReducerState;
  seo: SEOReducerState;
  contract: ContractReducerState;
  search: SearchReducerState;
  organization: OrganizationReducerState;
  context: ContextReducerState;
  success: SuccessMessageReducerState;
  confirmation: ConfirmationReducerState;
  recurringOrder: RecurringOrderReducerState;
  orderDetails: OrderDetailsMapReducerState;
  site: SiteReducerState;
  wishList: WishListReducerState;
}

const reducers = {
  account,
  api,
  catalog,
  user,
  order,
  error,
  seo,
  contract,
  search,
  context,
  organization,
  success,
  confirmation,
  recurringOrder,
  orderDetails,
  site,
  wishList,
};

Enregistrez le fichier et créez le sélecteur pour la liste de présélection comme expliqué dans les étapes 12 et 13.
Créez un fichier wishList.ts dans le répertoire src/redux/selectors.

Ajoutez le contenu suivant pour extraire l'état WishList de Redux Store :

//Redux
import { RootReducerState } from "../reducers";

const GetWishListSelector = (state: RootReducerState) => state.wishList.list;

export { GetWishListSelector );

Après avoir mis à jour le code, enregistrez et fermez le fichier.
Etant donné qu'un nouveau wishList a été ajouté à l'état Redux, le répertoire src/mocks/data.ts va signaler une erreur.
Pour corriger l'erreur, ajoutez un état wishList par défaut dans le fichier data.ts. Il s'agit d'un fichier simulé utilisé pour le test d'unité. Pour ajouter l'état par défaut, mettez à jour le fichier avec le code suivant :
```
wishList: {
    list: [],
},
```
Enregistrez et fermez le fichier.

Results

Tous les composants Redux et le fichier de données simulé sont créés pour la liste de présélection.