Creación de componentes de Redux Store

Los componentes Redux y Redux Proceso almacenan los resultados en la tienda Redux.

About this task

Procedure

Abra el archivo reducerStateInterface.ts desde el directorio src/redux/reducers.
Declare y exporte la interfaz de estado del reductor para la lista de deseos.
```
export interface WishListReducerState {
  list: any;
}
```
Guarde el archivo.
Abra el archivo initStates.ts desde el directorio src/redux/reducers.
Importe el archivo WishListReducerState que se ha creado en el paso 2.
Cree el estado predeterminado para WishListReducerState y exporte el estado para.
Ahora, cree las funciones de reductor para actualizar este estado. Cree un archivo wishList.ts en src/redux/reducers.

Cree una función wishListReducer que utilizan los trabajadores de Redux Saga para actualizar la tienda Redux State. Para crear wishListReducer, actualice el contenido siguiente en el archivo:

//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;

Guarde el archivo.

Exporte WishListReducerState a través de las interfaces RootReducerState y la función wishListReducer en el archivo index.ts desde el directorio src/redux/reducers. Después de exportar la función, el código se actualizará tal como se muestra a continuación:

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,
};

Guarde el archivo y cree el selector para la lista de deseos tal como se explica en los pasos 12 y 13.
Cree un archivo wishList.ts en el directorio src/redux/selectors.

Añada el contenido siguiente para captar el estado de la lista de deseos de la tienda Redux:

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

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

export { GetWishListSelector );

Guarde y cierre el archivo después de actualizar el código.
Puesto que se ha añadido un nuevo wishList en el estado de Redux, el directorio src/mocks/data.ts generará un error.
Para corregir el error, añada el estado wishList predeterminado en el archivo data.ts. Se trata de un archivo simulado utilizado para pruebas de unidad. Para añadir el estado predeterminado, actualice el archivo con el código siguiente:
```
wishList: {
    list: [],
},
```
Guarde y cierre el archivo.

Results

Todos los componentes de Redux y el archivo de datos simulados se crean para la lista de deseos.