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

【问题标题】：Redux: dispatching an action multiple times results to too many api requestsRedux：多次分派一个动作导致太多的api请求
【发布时间】：2021-10-02 02:07:09
【问题描述】：

使用名为 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>

对于每个 Anime 组件，我都有一个 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（请求过多）：

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

【问题讨论】：

标签： javascript reactjs redux reducers

【解决方案1】：

好吧，您似乎受到 api 本身的限制，并且它是每单位时间请求数的阈值。可能应该有一个请求允许您传递多个动漫 ID 来获取请求，以避免单独请求每个动漫的详细信息。

【讨论】：