Creating Redux Store components

Redux and Redux Saga components store the results in the Redux store.

About this task

Procedure

Open the reducerStateInterface.ts file from src/redux/reducers directory.
Declare and export the reducer state interface for the wishlist.
```
export interface WishListReducerState {
  list: any;
}
```
Save the file.
Open the initStates.ts file from src/redux/reducers directory.
Import the WishListReducerState file that was created in step 2 .
Create the default state for WishListReducerState and export it.
Now, create the reducers functions to update this state. Create a wishList.ts file in src/redux/reducers.

Create a wishListReducer function, which is used by Redux saga workers to update the Redux State store. To create the wishListReducer, update the following content in the file:

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

Save the file.

Export the WishListReducerState via RootReducerState interfaces and wishListReducer function in the index.ts file from src/redux/reducers directory. After exporting the function, the code will be updated as shown below:

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

Save the file and create the selector for the wish list as explained in steps 12 and 13.
Create a wishList.ts file in the src/redux/selectors directory.

Add the following content for fetching the wishlist Redux store state:

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

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

export { GetWishListSelector );

Save and close the file after updating the code.
Since a new wishList has been added in the Redux state, src/mocks/data.ts directory will throw an error.
To correct the error, add a default wishList state in the data.ts file. This is a mock file used for unit testing. To add the default state, update the file with the following code:
```
wishList: {
    list: [],
},
```
Save and close the file.

Results

All the Redux components and mock data file are created for the wish list.