时间戳

首页 > 解决方案 > API 请求在 react-app 中使用 redux-saga 失败

javascript - API 请求在 react-app 中使用 redux-saga 失败

问题描述

我想在主页加载产品。我决定实施 usingredux-saga来处理副作用。API 调用在 redux 传奇中失败。这是代码。你能告诉我出了什么问题吗？

api.js

export const getProducts = async (sort, order, page) => {
  return await axios.post(`${process.env.REACT_APP_API}/products`, {
    sort,
    order,
    page,
  });
};

产品传奇.js

import { takeEvery, call, put, all } from "redux-saga/effects";

import ProductActionTypes from "./product.types";

import {
  loadLatestArrivalProductSuccess,
  loadLatestArrivalProductFail,
} from "./product.actions";

import { getProducts } from "./Api";

export function* fetchLatestArrivalProducts() {
  try {
    const response = yield call(getProducts("createdAt", "desc", 1));
     // it's failing inside try
    yield put(loadLatestArrivalProductSuccess(response.data));
  } catch (error) {
    yield put(loadLatestArrivalProductFail(error));
  }
}

export function* fetchLatestArrivalProductsStart() {
  yield takeEvery(
    ProductActionTypes.LOAD_LATEST_ARRIVAL_PRODUCT_START,
    fetchLatestArrivalProducts
  );
}

export function* productSagas() {
  yield all([call(fetchLatestArrivalProductsStart)]);
}

product.reducer.js

import ProductActionTypes from "./product.types";

const INITIAL_STATE = {
  products: [],
  loading: false,
  page: 1,
  errorMessage: undefined,
};

const productReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case ProductActionTypes.LOAD_LATEST_ARRIVAL_PRODUCT_START:
      return {
        ...state,
        loading: true,
      };
    case ProductActionTypes.LOAD_LATEST_ARRIVAL_PRODUCT_SUCCESS:
      return {
        ...state,
        loading: false,
        products: action.payload,
      };
    case ProductActionTypes.LOAD_LATEST_ARRIVAL_PRODUCT_FAIL:
      return {
        ...state,
        loading: false,
        errorMessage: action.payload,
      };

    default:
      return state;
  }
};

export default productReducer;

product.type.js

const ProductActionTypes = {
  LOAD_LATEST_ARRIVAL_PRODUCT_START: "LOAD_LATEST_ARRIVAL_PRODUCT_START",
  LOAD_LATEST_ARRIVAL_PRODUCT_SUCCESS: "LOAD_LATEST_ARRIVAL_PRODUCT_SUCCESS",
  LOAD_LATEST_ARRIVAL_PRODUCT_FAIL: "LOAD_LATEST_ARRIVAL_PRODUCT_FAIL",
  LATEST_ARRIVAL_PRODUCT_COUNT: "LATEST_ARRIVAL_PRODUCT_COUNT",
};

export default ProductActionTypes;

这是列出家庭所有产品的后端代码

 exports.list = async (req, res) => {

  try {
    const { sort, order, page } = req.body;
    const currentPage = page || 1;
    const perPage = 3;

    const products = await Product.find({})
      .skip((currentPage - 1) * perPage)
      .populate("category")
      .populate("subs")
      .sort([[sort, order]])
      .limit(perPage)
      .exec();

    res.json(products);
  } catch (err) {
    console.log(err);
  }
};

标签： javascriptreactjsredux-saga

解决方案

在 saga 中调用getProducts函数时，应将函数后面的参数设置为参数。

export function* fetchLatestArrivalProducts() {
  try {
    const response = yield call(getProducts, "createdAt", "desc", 1);
     // it's failing inside try
    yield put(loadLatestArrivalProductSuccess(response.data));
  } catch (error) {
    yield put(loadLatestArrivalProductFail(error));
  }
}

更新

如果你想将 prop 传递给 saga

export function* fetchLatestArrivalProducts(action) {
  try {
    const response = yield call(getProducts, "createdAt", "desc", action.page);
     // it's failing inside try
    yield put(loadLatestArrivalProductSuccess(response.data));
  } catch (error) {
    yield put(loadLatestArrivalProductFail(error));
  }
}

推荐阅读