done redux setup

package-lock.json

         "@fontsource/roboto": "^5.1.0",
         "@mui/icons-material": "^6.1.10",
         "@mui/material": "^6.1.10",
+        "@reduxjs/toolkit": "^2.5.0",
         "@shopify/shopify-api": "^11.6.0",
         "@shopify/storefront-api-client": "^1.0.3",
         "@testing-library/jest-dom": "^5.17.0",
         "dotenv": "^16.4.7",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-redux": "^9.1.2",
+        "react-redux": "^9.2.0",
         "react-router-dom": "^7.0.2",
         "react-scripts": "5.0.1",
         "shopify-api-node": "^3.14.0",
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.5.0.tgz",
+      "integrity": "sha512-awNe2oTodsZ6LmRqmkFhtb/KH03hUhxOamEQy411m3Njj3BbFvoBovxo4Q1cBWnV1ErprVj9MlF0UPXkng0eyg==",
+      "license": "MIT",
+      "dependencies": {
+        "immer": "^10.0.3",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reduxjs/toolkit/node_modules/immer": {
+      "version": "10.1.1",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
+      "integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
       "license": "MIT"
     },
     "node_modules/@types/use-sync-external-store": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
-      "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==",
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
       "license": "MIT"
     },
     "node_modules/@types/ws": {
       "license": "MIT"
     },
     "node_modules/react-redux": {
-      "version": "9.1.2",
-      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.1.2.tgz",
-      "integrity": "sha512-0OA4dhM1W48l3uzmv6B7TXPCGmokUU4p1M44DGN2/D9a1FjVPukVjER1PcPX97jIg6aUeLq1XJo1IpfbgULn0w==",
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
+      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
       "license": "MIT",
       "dependencies": {
-        "@types/use-sync-external-store": "^0.0.3",
-        "use-sync-external-store": "^1.0.0"
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
       },
       "peerDependencies": {
-        "@types/react": "^18.2.25",
-        "react": "^18.0",
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
         "redux": "^5.0.0"
       },
       "peerDependenciesMeta": {
         "node": ">=8"
       }
     },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.7.tgz",
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "license": "MIT"
     },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "license": "MIT"
+    },
     "node_modules/resolve": {
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
       }
     },
     "node_modules/use-sync-external-store": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
-      "integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.4.0.tgz",
+      "integrity": "sha512-9WXSPC5fMv61vaupRkCKCxsPxBocVnwakBEkMIHHpkTTg6icbJtg6jzgtLDm4bl3cSHAca52rYWih0k4K3PfHw==",
       "license": "MIT",
       "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
     "node_modules/util-deprecate": {

package.json

     "@fontsource/roboto": "^5.1.0",
     "@mui/icons-material": "^6.1.10",
     "@mui/material": "^6.1.10",
+    "@reduxjs/toolkit": "^2.5.0",
     "@shopify/shopify-api": "^11.6.0",
     "@shopify/storefront-api-client": "^1.0.3",
     "@testing-library/jest-dom": "^5.17.0",
     "dotenv": "^16.4.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-redux": "^9.1.2",
+    "react-redux": "^9.2.0",
     "react-router-dom": "^7.0.2",
     "react-scripts": "5.0.1",
     "shopify-api-node": "^3.14.0",

src/components/ImageView/ImageView.jsx

-import React, { useState } from "react";
+import { useState, useEffect } from "react";
+import { useSelector } from "react-redux";
 import {
   Box,
   Typography,
 import Grid from '@mui/material/Grid2';
 
 const ImageView = () => {
-  const [previewImage, setPreviewImage] = useState("https://business.aducktive.com/storage/product/23/ceGt6VWGAdW0tVUArAAkpAwk4DUu6QdGA95udBQK.webp"); // Initial preview image
+
+  const product = useSelector((state) => state.products.product.data)
+  
+  const [previewImage, setPreviewImage] = useState("");
   const [isZoomed, setIsZoomed] = useState(false);
 
-  const thumbnails = [
-    "https://business.aducktive.com/storage/product/23/ceGt6VWGAdW0tVUArAAkpAwk4DUu6QdGA95udBQK.webp",
-    "https://business.aducktive.com/storage/product/24/z6wjsGoGb5X5F72TIW9JihYQR3ZnwEHFgcnfOCOF.webp",
-    "https://business.aducktive.com/storage/product/22/JtniBtfevbtO9iJy3LUozgyGGe2HLv2rVNZ7C16e.webp",
-    "https://business.aducktive.com/storage/product/25/GTyY9k0PvQUuC4cq5rUNgbIAw6H4vR6S5Ht3PSYn.webp",
-  ];
+  useEffect(()=>{
+
+    setPreviewImage(product?.images?.nodes[0]?.url)
+  
+  },[product])
 
   const handleThumbnailClick = (image) => {
     setPreviewImage(image);
               src={previewImage}
               alt="Preview"
               style={{
-                width: "100%",
+                width: "70%",
                 height: "auto",
                 display: "block",
+                margin:"auto auto"
               }}
             />
           </Box>
               gap:2
             }}
           >
-            {thumbnails.map((thumbnail, index) => (
+            {product?.images?.nodes?.map(({src, url}, index) => (
               <IconButton
                 key={index}
-                onClick={() => handleThumbnailClick(thumbnail)}
+                onClick={() => handleThumbnailClick(url)}
                 sx={{
                   borderRadius: 2,
                   overflow: "hidden",
                 }}
               >
                 <img
-                  src={thumbnail}
-                  alt={`Thumbnail ${index + 1}`}
+                  src={url}
+                  alt={`img_${index + 1}`}
                   style={{
                     width: "100%",
                     height: "auto",

src/components/ProductDetails/ProductDetails.jsx

-import React from "react";
+import { useState } from "react";
+import { useSelector } from "react-redux";
 import {
   Box,
   Typography,
-  Select,
-  MenuItem,
   Button,
-  FormControl,
-  InputLabel,
+  TextField
 } from "@mui/material";
-import Grid from '@mui/material/Grid2';
+import AddIcon from '@mui/icons-material/Add';
+import RemoveIcon from '@mui/icons-material/Remove';
 
 const ProductDetails = () => {
+
+  const product = useSelector((state) => state.products.product.data)
+  const [quantity, setQuantity] = useState(1);
+  const [selectedSize, setSelectedSize] = useState(null);
+
+  const handleIncrement = () => {
+    setQuantity((prevQuantity) => prevQuantity + 1);
+  };
+
+  const handleDecrement = () => {
+    setQuantity((prevQuantity) => (prevQuantity > 1 ? prevQuantity - 1 : 1));
+  };
+
+  const handleSizeClick = (size) => {
+    setSelectedSize(size);
+    // alert(`Selected size: ${size}`);
+  };
+
   return (
-    <Box sx={{ position: "relative"}}>
+    <Box sx={{ position: "relative" }}>
       {/* Flex Container */}
-      <Box sx={{ display: "flex", flexDirection: "column", gap: 2}}>
+      <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
         {/* Section 1: Product Info */}
         <Box>
-          <Typography variant="h5" sx={{fontWeight:"bold", mb:2}}>Product Name</Typography>
+          <Typography variant="h5" sx={{ fontWeight: "bold", mb: 2 }}>
+            {product.title}
+          </Typography>
           <Typography variant="body2" color="text.secondary">
-            Product Type
+            {product?.collections?.nodes[0]?.title}
           </Typography>
           <Typography
             variant="body1"
             sx={{ fontWeight: "bold" }}
           >
-            $99.99
+            {`${product?.compareAtPriceRange?.minVariantPrice?.currencyCode} 
+            ${parseFloat(product?.compareAtPriceRange?.minVariantPrice?.amount).toFixed(2)}`}
           </Typography>
         </Box>
 
-        {/* Section 2: Description */}
-        <Box sx={{mb:5}}>
-          <Typography variant="h6" color="text.secondary" sx={{fontWeight:"bold", mb:3}}>
-            Description
-          </Typography>
-          <Typography variant="body1" color="text.secondary" sx={{fontWeight:"400", mb:3 }}>
-            Materials : Plain Soft Crepe with embroidery.
-          </Typography>
-          <Typography variant="body1" color="text.secondary" sx={{fontWeight:"400" }}>
-            Care Instruction : Handwash for better care - Machine wash cotton items in cold or warm water. Do not use hot water as it may shrink the fabric - Use normal wash cycle and gentle detergent - Avoid using any harsh chemicals like bleach - Tumble dry on low setting, then promptly remove the item from the dryer to avoid wrinkles - Iron to remove wrinkle. Adding a spray starch will revive the crispness of cotton fabrics. Note : - Sale items are not returnable, exchangeable & refundable - Change of mind not applicable - Wrong washing, storing or ironing method which may cause product damage will not be entertained - Due to lighting effects, monitor’s brightness, contrast setting, etc., they could be some slight differences in the colour tone of the pictures and the actual item. Delivery : Postage will take around 3-5 working days from purchasing date
+        {/* Section 2: Size */}
+        <Box>
+          <Typography variant="body1" sx={{ fontWeight: "bold", color: "#000", mb: 2 }}>
+            Size
           </Typography>
+          <Box display="flex" gap={2}>
+            {["S", "M", "L", "XL"].map((size) => (
+              <Button
+                key={size}
+                variant={selectedSize === size ? "contained" : "outlined"}
+                color={selectedSize === size ? "primary" : "primary"}
+                sx={{ color: "#000" }}
+                onClick={() => handleSizeClick(size)}
+              >
+                {size}
+              </Button>
+            ))}
+          </Box>
         </Box>
 
-        {/* Section 3: Controls */}
-        <Grid container spacing={2} sx={{mt:"auto"}}>
-          {/* Size Select */}
-          <Grid item size={12}>
-            <FormControl fullWidth>
-              <InputLabel>Size</InputLabel>
-              <Select defaultValue="">
-                <MenuItem value="small">Small</MenuItem>
-                <MenuItem value="medium">Medium</MenuItem>
-                <MenuItem value="large">Large</MenuItem>
-              </Select>
-            </FormControl>
-          </Grid>
 
-          {/* Color Select */}
-          <Grid item size={12}>
-            <FormControl fullWidth>
-              <InputLabel>Color</InputLabel>
-              <Select defaultValue="">
-                <MenuItem value="red">Red</MenuItem>
-                <MenuItem value="blue">Blue</MenuItem>
-                <MenuItem value="green">Green</MenuItem>
-              </Select>
-            </FormControl>
-          </Grid>
+        {/* Section 3: Quantity */}
+        <Box sx={{ mb: 5 }}>
+          <Typography variant="body1" sx={{ fontWeight: "bold", color: "#000", mb: 2 }}>
+            Qunatity
+          </Typography>
+          <Box display="flex" alignItems="center" gap={2}>
+            <Button
+              variant="contained"
+              color="primary"
+              sx={{width:"35px"}}
+              onClick={handleDecrement}
+            >
+              <RemoveIcon />
+            </Button>
 
-          {/* Material Select */}
-          <Grid item size={12}>
-            <FormControl fullWidth>
-              <InputLabel>Material</InputLabel>
-              <Select defaultValue="">
-                <MenuItem value="cotton">Cotton</MenuItem>
-                <MenuItem value="wool">Wool</MenuItem>
-                <MenuItem value="silk">Silk</MenuItem>
-              </Select>
-            </FormControl>
-          </Grid>
+            <TextField
+              value={quantity}
+              inputProps={{ readOnly: true, style: { textAlign: 'center' } }}
+              size="small"
+              sx={{width:"100px"}}
+              variant="outlined"
+            />
 
-          {/* Buy Now Button */}
-          <Grid item size={12}>
             <Button
-              onClick={()=>{window.location.href ="/cart"}}
               variant="contained"
-              color="common.black"
-              fullWidth
-              sx={{
-                backgroundColor: (theme) => theme.palette.common.black,
-                color: "white",
-                textTransform: "none",
-                mt: 2,
-                "&:hover": {
-                  backgroundColor: (theme) => theme.palette.grey[900],
-                },
-              }}
+              color="primary"
+              sx={{width:"35px"}}
+              onClick={handleIncrement}
             >
-              BUY NOW
+              <AddIcon />
             </Button>
-          </Grid>
-        </Grid>
+          </Box>
+        </Box>
+
+        {/* Section 4: Description */}
+        <Box sx={{ mb: 5 }}>
+          <Typography variant="body1" sx={{ fontWeight: "bold", color: "#000" }}>
+            Description
+          </Typography>
+          <Typography variant="body1" color="text.secondary" sx={{ fontWeight: "400" }}>
+            <div dangerouslySetInnerHTML={{ __html: product.descriptionHtml }}></div>
+          </Typography>
+        </Box>
+
+        <Button
+          onClick={() => { window.location.href = "/cart" }}
+          variant="contained"
+          color="common.black"
+          fullWidth
+          sx={{
+            backgroundColor: (theme) => theme.palette.common.black,
+            color: "white",
+            textTransform: "none",
+            mt: 2,
+            "&:hover": {
+              backgroundColor: (theme) => theme.palette.grey[900],
+            },
+          }}
+        >
+          BUY NOW
+        </Button>
       </Box>
 
     </Box>

src/components/ProductList/ProductList.jsx

-import React from 'react';
+import React, { useEffect } from 'react';
 import { Box, Typography, Button } from '@mui/material';
 import Grid from '@mui/material/Grid2';
 
+//REDUX
+import { useSelector, useDispatch } from 'react-redux';
+import { fetchProducts } from '../../redux/slices/productSlice';
+
 const ProductList = ({ size = 99999 }) => {
 
-  const images = [
-    {
-      id: 1,
-      url: 'https://via.placeholder.com/300',
-      title: 'KEMBOJA IN BEIGE',
-      price: 123.90,
-      description: "Atma Sari Kurta Raya Collection 2024",
-      extra_desc: "or 3 payments of 68.50 MYR with Atome"
-    },
-    {
-      id: 2,
-      url: 'https://via.placeholder.com/300',
-      title: 'KEMBOJA IN BEIGE',
-      price: 123.90,
-      description: "Atma Sari Kurta Raya Collection 2024",
-      extra_desc: "or 3 payments of 68.50 MYR with Atome"
-    },
-    {
-      id: 3,
-      url: 'https://via.placeholder.com/300',
-      title: 'KEMBOJA IN BEIGE',
-      price: 123.90,
-      description: "Atma Sari Kurta Raya Collection 2024",
-      extra_desc: "or 3 payments of 68.50 MYR with Atome"
-    },
-    {
-      id: 4,
-      url: 'https://via.placeholder.com/300',
-      title: 'KEMBOJA IN BEIGE',
-      price: 123.90,
-      description: "Atma Sari Kurta Raya Collection 2024",
-      extra_desc: "or 3 payments of 68.50 MYR with Atome"
-    },
-    {
-      id: 5,
-      url: 'https://via.placeholder.com/300',
-      title: 'KEMBOJA IN BEIGE',
-      price: 123.90,
-      description: "Atma Sari Kurta Raya Collection 2024",
-      extra_desc: "or 3 payments of 68.50 MYR with Atome"
-    },
-    {
-      id: 6,
-      url: 'https://via.placeholder.com/300',
-      title: 'KEMBOJA IN BEIGE',
-      price: 123.90,
-      description: "Atma Sari Kurta Raya Collection 2024",
-      extra_desc: "or 3 payments of 68.50 MYR with Atome"
-    }
-  ];
+  const products = useSelector((state) => state.products.products.data)
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+
+    dispatch(fetchProducts())
+
+  }, [])
+
+  const renderProduct = (id, img_url, title, collection, price, currency, extra_desc) => {
+
+    return (
+      <Grid item size={{ xs: 6, sm: 6, md: 3 }}>
+        <Box
+          onClick={() => { window.location.href = `/products/${id}` }}
+          sx={{
+            overflow: 'hidden',
+            position: 'relative',
+            cursor: 'pointer'
+          }}
+
+        >
+          <img
+            src={img_url}
+            alt={title}
+            style={{
+              width: '100%',
+              aspectRatio: '3 / 4',
+              objectFit: 'cover',
+            }}
+          />
+
+          <Button sx={{ position: "absolute", top: 20, left: 20, boxShadow: 0 }} variant="contained">
+            NEW
+          </Button>
+
+          <Box sx={{ py: 5 }}>
+            <Typography variant="body2" >
+              {collection}
+            </Typography>
+            <Typography variant="h5" sx={{ fontWeight: "bolder" }}>
+              {title}
+            </Typography>
+            <Typography variant="body" >
+              {`${currency} ${price}`}
+            </Typography>
+            <Typography variant="body2" sx={{ mt: 2 }}>
+              {extra_desc}
+            </Typography>
+          </Box>
+        </Box>
+      </Grid>
+    )
+
+  }
 
   return (
     <Box sx={{ mb: 5 }}>
       <Grid container spacing={1} columns={12}>
-        {images.map((image, index) => {
+        {products.map((product, index) => {
+          
+          let {id, title, compareAtPriceRange, images, collections} = product
+          let price = compareAtPriceRange.maxVariantPrice.amount
+          let currency = compareAtPriceRange.maxVariantPrice.currencyCode
+          let img_url = images.nodes[0].url
+          let collection_name = collections.nodes[0]?.title
+          
+          // ID
+          const parts = id.split('/');
+          let prodID = parts[parts.length - 1];
 
-          if (index < size) {
 
-            return <Grid item size={{xs:6, sm:6, md:3}} key={index}>
-              <Box
-                onClick={()=>{ window.location.href = `/products/${image.id}` }}
-                sx={{
-                  overflow: 'hidden',
-                  position: 'relative',
-                  cursor: 'pointer'
-                }}
-        
-              >
-                <img
-                  src={image.url}
-                  alt={image.title}
-                  style={{
-                    width: '100%',
-                    aspectRatio: '3 / 4',
-                    objectFit: 'cover',
-                  }}
-                />
-
-                <Button sx={{ position: "absolute", top: 20, left: 20, boxShadow: 0 }} variant="contained">
-                  NEW
-                </Button>
-
-                <Box sx={{ py: 5 }}>
-                  <Typography variant="body2" >
-                    {image.description}
-                  </Typography>
-                  <Typography variant="h5" sx={{ fontWeight: "bolder" }}>
-                    {image.title}
-                  </Typography>
-                  <Typography variant="body" >
-                    {`RM ${image.price}`}
-                  </Typography>
-                  <Typography variant="body2" sx={{ mt: 2 }}>
-                    {image.extra_desc}
-                  </Typography>
-                </Box>
-              </Box>
-            </Grid>
+          if (index < size) {
+            return renderProduct(prodID, img_url, title, collection_name, price, currency, "" )
           }
 
         })}

src/index.js

 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
+import { Provider } from 'react-redux';
+import store from './redux/store';
 import '@fontsource/roboto/300.css';
 import '@fontsource/roboto/400.css';
 import '@fontsource/roboto/500.css';
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <Provider store={store}>
+      <App />
+    </Provider>
   </React.StrictMode>
 );
 

src/pages/Products/Product.jsx

 import React, { useEffect } from 'react'
 import { Box, Typography } from '@mui/material';
 import { useParams } from 'react-router-dom';
+import { useSelector, useDispatch } from 'react-redux';
 import Grid from '@mui/material/Grid2';
 import logoSrc from "../../assets/svg/logo.svg";
 import ImageView from '../../components/ImageView/ImageView';
 import ProductHistoryList from '../../components/ProductHistoryList';
 import SocialMedia from '../../components/SocialMedia'
 import Feature from '../../components/Feature'
+import { fetchProduct } from '../../redux/slices/productSlice';
 
 const Product = () => {
 
   let { pid } = useParams();
+  const product = useSelector((state) => state.products.product.data)
+  const dispatch = useDispatch();
 
   useEffect(() => {
 
+    dispatch(fetchProduct(pid))
+
   }, [])
 
   return (

src/redux/slices/productSlice.js

+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
+import ProductService from '../../services/ProductService';
+
+const initialState = {
+    product:{
+      data: {},
+      status: 'idle',
+      error: null,
+    },
+    products:{
+      data: [],
+      status: 'idle',
+      error: null,
+    },
+    productsHistory:[],
+    productsSelected:[],
+    ProductsSuggestion:[]
+};
+
+export const fetchProduct = createAsyncThunk(
+  'product/fetchProduct',
+  async (pid) => {
+    
+    const response = await ProductService.getProduct(pid)
+    return response
+
+  }
+)
+
+export const fetchProducts = createAsyncThunk(
+  'product/fetchProducts',
+  async () => {
+    const response = await ProductService.getProducts()
+    return response
+
+  }
+)
+
+export const productSlice = createSlice({
+  name: 'product',
+  initialState,
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchProducts.pending, (state) => {
+        state.products.status = 'loading';
+        state.products.error = null;
+      })
+      .addCase(fetchProducts.fulfilled, (state, action) => {
+        state.products.status = 'succeeded';
+        state.products.data = action.payload
+      })
+      .addCase(fetchProducts.rejected, (state, action) => {
+        state.products.status = 'failed';
+        state.products.data = [];
+        state.products.error = action.error.message;
+      })
+      .addCase(fetchProduct.pending, (state) => {
+        state.product.status = 'loading';
+        state.product.error = null;
+      })
+      .addCase(fetchProduct.fulfilled, (state, action) => {
+        state.product.status = 'succeeded';
+        state.product.data = action.payload
+      })
+      .addCase(fetchProduct.rejected, (state, action) => {
+        state.product.status = 'failed';
+        state.product.data = {};
+        state.product.error = action.error.message;
+      })
+  }
+});
+
+
+export default productSlice.reducer;

src/redux/store.js

+import { configureStore } from '@reduxjs/toolkit';
+import productsReducer from './slices/productSlice';
+
+const store = configureStore({
+  reducer: {
+    products: productsReducer,
+  },
+});
+
+export default store;

src/services/ProductService.js

-import axios from 'axios'
 import { createStorefrontApiClient } from '@shopify/storefront-api-client';
-import { API_URL, REACT_APP_API_KEY, REACT_APP_API_SECRET, REACT_APP_ACCESS_TOKEN, REACT_APP_SHOP_NAME } from '../utils/httpCommon'
+import { REACT_APP_ACCESS_TOKEN, REACT_APP_SHOP_NAME } from '../utils/httpCommon'
 
-const shopUrl = REACT_APP_SHOP_NAME;
-const accessToken = REACT_APP_ACCESS_TOKEN;
+const defaultQuery = 'status:active, product_type:clothing, product_categroy:dresses';
+const defaultResult = 10;
+const defaultSortBy = 'TITLE';
 
 const client = createStorefrontApiClient({
-  storeDomain: `https://${shopUrl}/api/2024-10/graphql.json`,
+  storeDomain: `https://${REACT_APP_SHOP_NAME}/api/2024-10/graphql.json`,
   apiVersion: '2024-10',
-  publicAccessToken: accessToken,
+  publicAccessToken: REACT_APP_ACCESS_TOKEN,
 });
 
+// getProduct(5, CREATED_AT, 'product_type:clothing'); 
+const getProducts = async (maxResults = defaultResult, sortBy = defaultSortBy, customQuery = defaultQuery) => {
 
-const getProducts = async () => {
+  const query = `{
+    products(first: ${maxResults}, query: "${customQuery}", sortKey: ${sortBy}) {
+      nodes {
+        id
+        title
+        productType
+        compareAtPriceRange {
+          maxVariantPrice {
+            amount
+            currencyCode
+          }
+          minVariantPrice {
+            amount
+            currencyCode
+          }
+        }
+        images(first: 1) {
+          nodes {
+            src
+            url
+          }
+        }
+        collections(first: 1) {
+          nodes {
+            title
+          }
+        }
+        variants(first: 5) {
+          nodes {
+            id
+            title
+            price {
+              amount
+              currencyCode
+            }
+          }
+        }
+      }
+      pageInfo {
+        hasNextPage
+        hasPreviousPage
+      }
+    }
+  }`
+
+  const { data, errors, extensions } = await client.request(query, {
+    variables: {
+      handle: 'sample-product',
+    },
+  });
 
-  const productQuery = `
-    {
-      products(first: 99) {
+  return data.products.nodes
+
+}
+
+const getProduct = async (id = "") => {
+
+  const query = `{
+    product(id: "gid://shopify/Product/${id}") {
+      id
+      title
+      descriptionHtml
+      productType
+      compareAtPriceRange {
+        maxVariantPrice {
+          currencyCode
+          amount
+        }
+        minVariantPrice {
+          amount
+          currencyCode
+        }
+      }
+      images(first: 4) {
         nodes {
-          media(first: 4) {
-            nodes {
-              previewImage {
-                url
-              }
-            }
+          src
+          url
+        }
+      }
+      variants(first: 5) {
+        nodes {
+          id
+          title
+          price {
+            amount
+            currencyCode
           }
+        }
+      }
+      collections(first: 1) {
+        nodes {
           title
-          tags
         }
       }
     }
-  `;
+  }`
 
-  const { data, errors, extensions } = await client.request(productQuery, {
+  const { data, errors, extensions } = await client.request(query, {
     variables: {
       handle: 'sample-product',
     },
   });
 
-  console.log(data)
-
-  return
+  return data.product
 
 }
 
+
 const ProductService = {
-  getProducts
+  getProducts,
+  getProduct
 }
 
 export default ProductService