Redux:多次调度一个操作会导致过多的api请求

Question

使用名为Jikan的动漫api，我正在尝试显示新动漫节目的宣传缩略图。我使用了两个api调用，一个用于获取新的动漫节目：

export const get_new_anime = () =>
  `${base_url}search/anime?q&order_by=score&status=airing&sort=desc`;

一个是通过获取id来获取动漫的视频(包含宣传片)。

export const get_news = (anime_id) => `${base_url}anime/${anime_id}/videos`;

在我的主页上，我映射了这些节目，为每个动漫返回一个组件：

<Promos>
{new.map((anime, index) => (
<Anime key={anime.mal_id} index={index}></Anime>))}
</Promos>

对于每个动画组件，我都有一个useEffect，它对每个新的id使用useDispatch

const Anime = ({ id, index }) => {
  const dispatch = useDispatch();
  const loadDetailHandler = () => {
    //  eslint-disable-line react-hooks/exhaustive-deps
    dispatch(loadDetail(id));

  useEffect(() => {
    loadDetailHandler(id);
  }, [id]); // eslint-disable-line react-hooks/exhaustive-deps

  const promo = useSelector((state) => state.detail.promo);

  const isLoading = useSelector((state) => state.detail.isLoading);

  return (
    <PromoBox
      style={
        !isLoading
          ? { backgroundImage: `url("${promo[index][0].image_url}")` }
          : null
            }
     ></PromoBox>);
    };

下面是我的promoReducer的样子：

const initState = {
  promo: [],
  isLoading: true,
};

const promoReducer = (state = initState, action) => {
  switch (action.type) {
    case "LOADING_PROMO":
      return {
        ...state,
        isLoading: true,
      };
    case "GET_DETAIL":
     

      return {
        ...state,

        promo: [...state.promo, action.payload.promo], 
        
        isLoading: false,
        
      };

    default:
      return { ...state };
  }
};

export default promoReducer;

这是promoAction

export const loadPromo = (id) => async (dispatch) => {
  dispatch({
    type: "LOADING_PROMO",
  });

  const promoData = await axios.get(get_promos(id));
 
  dispatch({
    type: "GET_DETAIL",
    payload: {  
      promo: promoData.data.promo,
    },
  });
};

虽然它确实会在调度操作时返回促销数据，但问题是在调度的某些情况下，不会返回任何数据。以下是来自redux devtools的截图，以显示我的意思：

​

​

我试图得到所有新动漫的宣传片，我希望得到50个宣传片数据。在devtools中，你可以看到我只有9个。接着是错误429 (请求太多)：

​

如何解决此问题？有没有更好的方法来做到这一点，因为这似乎是一种糟糕的做法：

​

​

Answer 1

看起来你受到api本身和每单位时间请求数阈值的限制。可能应该有一个请求，允许您传递多个动漫in来获取请求，以避免单独请求每个动漫的详细信息。