Dynamic data fetching in dynamic pages (Next.js and Redux Toolkit)

Question

In this dynamic page, we have to fetch different APIs by coming from different routes. I want to dynamically fetch and list not only fetchProducts, but also crops from any data on this page. For example: How should we do this? the code you see is from index.js File structure:

product/
  [category]
    [slug].js
    index.js

import React, { useEffect } from "react";

import { ProductCard } from "@components/Product/ProductCategory/ProductList";
import { useDispatch, useSelector } from "react-redux";
import { fetchProducts } from "redux/slices/product/productCategorySlice";
import { useRouter } from "next/router";
import Link from "next/link";

const CategoryDetail = () => {
  const router = useRouter();
  const { category } = router.query;

  const productList = useSelector((state) => state.productCategory);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchProducts(category));
  }, [dispatch, category]);

  
  return (
    <div className="container max-w-full">
      <div className="flex flex-row py-24">
        <div className="w-80per pl-30">

          {productList.loading && console.log("Loading now...")}

          {!productList.loading && productList.error
            ? console.log(productList.error)
            : null}

          {!productList.loading && productList.productList.data 
            ? (
              <div className="grid grid-cols-4 gap-5">
                {productList.productList.data.data.map((item) => (
                  <ProductCard key={item} data={item} modal={false} />
                ))}
              </div>
            ) 
            : null}

        </div>
      </div>
    </div>
  );
};

export default CategoryDetail;