Used custom hook to dispatch action to fetch products data

src/components/products/ProductDetail.jsx

@@ -3,11 +3,15 @@ import { useParams } from 'react-router-dom';
 import useCartActions from '../../hooks/cartReducerHooks.js';
 import useWishlistActions from '../../hooks/wishlistReducerHooks.js';
 import { useIsItemInCart, useIsItemInWishlist, useProducts } from '../../hooks/useStoreItems.js';
+import useGetProducts from '../../hooks/useGetProducts.js';
 import Loader from '../Loader.jsx';
 import Rating from './Rating.jsx';
 
 export default function ProductDetail() {
 
+    // Getting products in store if not exists.
+    useGetProducts();
+
     // Getting product data from store.
     const productData = useProducts();
 

src/components/products/Products.jsx

@@ -1,15 +1,16 @@
 import React, { useEffect, useState } from 'react';
 import ProductCard from './ProductCard.jsx';
 import { useParams } from 'react-router-dom';
-import { useDispatch, useSelector } from 'react-redux';
-import { getProducts } from '../../features/product/productSlice.js';
+import { useSelector } from 'react-redux';
+import StatusCode from '../../utils/StatusCode.js';
+import useGetProducts from '../../hooks/useGetProducts.js';
 import FilterSection from './FilterSection.jsx';
 import Loader from '../Loader.jsx';
-import StatusCode from '../../utils/StatusCode.js';
 
 export default function Products() {
 
-    const dispatch = useDispatch();
+    // Getting products in store.
+    useGetProducts();
 
     // Getting product data and status from store.
     const { value: productData, status } = useSelector(state => state.product);
@@ -25,11 +26,6 @@ export default function Products() {
         'Wired', 'Noise Cancelling', 'Wireless', 'Speaker'
     ]);
 
-    // Dispatching action to get products.
-    useEffect(() => {
-        dispatch(getProducts());
-    }, []);
-
     useEffect(() => {
         if (filterCriteria.length <= 0) {
             setFilterCriteria(['Wired', 'Noise Cancelling', 'Wireless', 'Speaker']);