Creación de componentes Redux y Redux Saga

Necesita los componentes Redux y Redux Saga para crear el componente de reacción de la vista de la lista de deseos.

About this task

Complete los pasos siguientes para crear los componentes Redux y Redux Saga.

Procedure

Cree el archivo wishList.ts dentro del directorio src/redux/action-types.

Añada los tipos de acción de Redux que se enviarán en los componentes de 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";

Guarde y cierre el archivo.

Cree acciones de Redux a partir de los tipos de acción de Redux mencionados en el paso 1. Cree un archivo wishList.ts dentro del directorio src/redux/actions.

Añada el siguiente contenido a:

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

Guarde y cierre el archivo.

Cree componentes de observadores y trabajadores de Redux.
- Los observadores de Redux están atentos al envío o la intercepción de las acciones de Redux.
- También llaman a las funciones de trabajadores coincidentes que finalmente llamarán a los servicios REST coincidentes. Esta llamada se pasará a Reducers y los usuarios de Redux finalmente almacenarán los resultados en la tienda Redux.

Cree un archivo wishList.ts dentro del directorio src/redux/sagas/watchers.

Añada el siguiente contenido a:

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

Guarde y cierre el archivo.

Cree un archivo wishList.ts dentro del directorio src/redux/sagas/workers.

Añada el siguiente contenido a:

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

Guarde y cierre el archivo.

Abra el archivo index.ts desde el directorio src/redux/sagas. Añada la siguiente sentencia import:
```
import * as WISHLIST from "./watchers/wishList";
```
Añada la sentencia siguiente en la función rootSaga:
```
WISHLIST.watchSaga(),
```
Guarde y cierre el archivo.
Siga Creación de componentes de Redux Store para crear los reductores, la variable de estado de tienda de Redux y selectores para obtener el valor en los componentes react.