javascript - Redux：多次分派一个动作导致太多的api请求

问题描述

使用名为 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用于useDispatch每个新的id

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（请求过多）：

我该如何解决这个问题？有没有更好的方法来做到这一点，因为这似乎是不好的做法：

标签： javascriptreactjsreduxreducers

javascript - Redux：多次分派一个动作导致太多的api请求

问题描述

解决方案

推荐阅读