Creating Redux and Redux Saga components

You need Redux and Redux Saga components to create the wishlist-view react component.

About this task

Complete the following steps to create Redux and Redux Saga components.

Procedure

Create wishList.ts file inside the src/redux/action-types directory.

Add the Redux action types that will be dispatched in the react components.

// Get current user's wish list
export const WISHLIST_GET_REQUIRED = "WISHLIST_GET_REQUIRED";
export const WISHLIST_GET_SUCCESS = "WISHLIST_GET_SUCCESS";
export const WISHLIST_GET_ERROR = "WISHLIST_GET_ERROR";
export const WISHLIST_RESET = "WISHLIST_RESET";

Save and close the file.

Create Redux actions from the Redux action types mentioned in Step 1. Create a wishList.ts file inside the src/redux/actions directory.

Add the following content:

//Standard libraries
import { createAction } from "@reduxjs/toolkit";
//Redux
import * as ACTIONTYPES from "../action-types/wishList";

const GET_USER_WISHLIST_ACTION = createAction<any>(
 ACTIONTYPES.WISHLIST_GET_REQUIRED
);
const WISHLIST_RESET_ACTION = createAction(ACTIONTYPES.WISHLIST_RESET);

export { GET_USER_WISHLIST_ACTION, WISHLIST_RESET_ACTION };

Save and close the file.

Create Redux saga watchers and workers components.
- The Redux watchers watch for the dispatch or intercept of Redux actions.
- They also call the matched worker functions that will eventually call the REST services. This call will be passed to Reducers and Redux watchers will finally store the results in the Redux store.

Create a wishList.ts file inside the src/redux/sagas/watchers directory.

Add the following content:

//Standard libraries
import { takeLatest } from "redux-saga/effects";
//Redux
import * as ACTIONS from "../../action-types/wishlist";
import * as WORKERS from "../workers/wishlist";

/**
 * Wish List watch saga
 * watchers to intercept wish list actions
 */
export function* watchSaga() {
  yield takeLatest(
    ACTIONS.WISHLIST_GET_REQUESTED,
    WORKERS.fetchWishListDetails
  );
}

Save and close the file.

Create a wishList.ts file inside the src/redux/sagas/workers directory.

Add the following content:

//Standard libraries
import { call, put } from "redux-saga/effects";
//Foundation libraries
import wishListService from "../../../_foundation/apis/transaction/wishlist.service";
//Redux
import * as ACTIONS from "../action-types/wishList";

/**
 * Saga worker to invoke get wish list details
 */
export function* fetchWishListDetails(action: any) {
  try {
    const payload = action.payload;

    const response = yield call(wishListService.findwishlist, payload);
    const WishListData = response.data;

    yield put({
      type: ACTIONS.WISHLIST_GET_SUCCESS,
      response: wishListData,
    });
  } catch (error) {
    yield put({ type: ACTIONS.WISHLIST_GET_ERROR, error });
  }
}

Save and close the file.

Open the index.ts file from the src/redux/sagas directory. Add the following import statement:
```
import * as WISHLIST from "./watchers/wishList";
```
Add the following statement in the rootSaga function:
```
WISHLIST.watchSaga(),
```
Save and close the file.
Follow Creating Redux Store components to create the reducers, Redux store state variable & selectors to get the value in the react components.