Custom hook to dispatch action to fetch products

Author: Aayush259

src/hooks/useGetProducts.js

@@ -0,0 +1,16 @@
+import { useDispatch } from 'react-redux';
+import { getProducts } from '../features/product/productSlice.js';
+import { useProducts } from './useStoreItems.js';
+
+const useGetProducts = () => {
+
+    const dispatch = useDispatch();
+    const productData = useProducts();
+
+    if (productData && productData.length > 0) return;
+
+
+    dispatch(getProducts());
+};
+
+export default useGetProducts;

src/hooks/useStoreItems.js

@@ -1,5 +1,8 @@
 import { useSelector } from 'react-redux';
 
+// Custom hook to use product state from store.
+const useProducts = () => useSelector(state => state.product.value);
+
 // Custom hook to use cart state from store.
 const useCartItems = () => useSelector(state => state.cart.value);
 
@@ -20,4 +23,4 @@ const useIsItemInWishlist = () => (itemName) => {
     return wishlistItems.some(item => item.name === itemName);
 };
 
-export { useCartItems, useWishlistItems, useIsItemInCart, useIsItemInWishlist };
+export { useProducts, useCartItems, useWishlistItems, useIsItemInCart, useIsItemInWishlist };