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

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;