CODEWITHSUNDEEP
javascriptreactjsreduxreducers
Patorikku
Patorikku

Reputation: 71

Redux: dispatching an action multiple times results to too many api requests

Using an api for anime called Jikan, I'm trying to display promo thumbnails of new anime shows. I'm using two api calls, one to get the new anime shows:

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

and one for getting the videos (containing promos) of anime by getting its id.

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

In my home page, here I am mapping the shows, returning a component for each anime:

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

And for each Anime component, I have a useEffect which uses useDispatch for every new 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>);
    };

Here is how my promoReducer looks like:

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;

and here is the 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,
    },
  });
};

While it does return the promo data as the action is dispatched, the problem is that in some instances of dispatching, no data is returned. Here is a screenshot from redux devtools to show what I mean:

enter image description here

and I was trying to get the promos of all the new anime, in which I was expecting to get 50 results of promo data. In devtools, you can see I only got 9 of them. This is followed by an error 429 (too many requests): enter image description here

How can I resolve this issue? And is there a better way to do this, because this seems like bad practice:

enter image description here

Upvotes: 0

Views: 673

Answers (1)

theVelja
theVelja

Reputation: 51

Well it seems that you're limited by the api itself and it's threshold for the number of request per unit of time. There should probably be a request that allows you to pass multiple anime ids to get request in order to avoid requesting details for each anime individually.

Upvotes: 1

Related Questions