Création de composants Redux et Redux Saga

• Ajoutez les types d'action Redux qui seront distribués dans les composants React.

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

• Enregistrez et fermez le fichier.

• Ajoutez le contenu suivant :

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

• Enregistrez et fermez le fichier.

• Les observateurs Redux surveillent la distribution ou l'interception d'actions Redux.
• Ils appellent également les fonctions de travail correspondantes qui appelleront éventuellement les services REST. Cet appel sera transmis aux réducteurs et les observateurs Redux stockeront finalement les résultats dans le magasin Redux.

• Ajoutez le contenu suivant :

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

• Enregistrez et fermez le fichier.

• Ajoutez le contenu suivant :

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

• Enregistrez et fermez le fichier.

import * as WISHLIST from "./watchers/wishList";

WISHLIST.watchSaga(),