I’m Building a react/nextjs/redux app
I have components each will call an individual backend API

The issue I’m having is making the component that loads in the data more reusable there is some repetitiveness that I am hoping to get rid of

Component 1:

import { StateLoading } from "@/shared/constants/loading";

import { useSelectorEffect } from "@/hooks/useSelector";
import { getGames, selectGames, selectStatus } from "@/store/games/gamesSlice";
import { Game } from "@/shared/interfaces/game";

const GamesDisplay = () => {
  const games = useAppSelector(selectGames) as Game[];
  const isClientLoaded = useSelectorEffect(games, getGames); //custom hook below
  const isLoading = useAppSelector(selectStatus) === StateLoading.LOADING;

  if (isLoading) {
    return <div>Loading....</div>;
  }
  return (
    <>
      <div>Games Display</div>
      {isClientLoaded && (
        <ul>
          {games?.map((comic: Game) => (
            <li key={comic.id}>{comic.title}</li>
          ))}
        </ul>
      )}
    </>
  );
};
export default GamesDisplay;

Component 2:

import { Comic } from "@/shared/interfaces/comic";
import { StateLoading } from "@/shared/constants/loading";

import { useSelectorEffect } from "@/hooks/useSelector";

const ComicsDisplay = () => {
  const comics = useAppSelector(selectComicsArray) as Comic[];
  const isClientLoaded = useSelectorEffect(comics, getComics); //custom hook below
  const isLoading = useAppSelector(selectStatus) === StateLoading.LOADING;

  if (isLoading) {
    return <div>Loading....</div>;
  }
  return (
    <>
      <div>MusicDisplay</div>
      {isClientLoaded && (
        <ul>
          {comics?.map((comic: Comic) => (
            <li key={comic.id}>{comic.title}</li>
          ))}
        </ul>
      )}
    </>
  );
};
export default ComicsDisplay;

As you can see they’re quite similar

custom hook:

import { useEffect, useState } from "react";

import { useAppDispatch } from "./store.hooks";

export const useSelectorEffect = (slice: any, dispatchAction: any) => {
  const dispatch = useAppDispatch();
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    if (slice === undefined) {
      dispatch(dispatchAction());
    }

    setIsClient(true);
  }, [slice, dispatchAction, dispatch, isClient]);

  return isClient;
};