Cannot destructure property 'product' of '(0 , react_redux__WEBPACK_IMPORTED_MODULE_3__.useSelector)(...)' as it is undefined.

[Bdisha123]

Cannot destructure property 'product' of '(0 , react_redux__WEBPACK_IMPORTED_MODULE_3__.useSelector)(...)' as it is undefined.

anyone have solved this error ???? if yes please share the solution

[Abhishek3303Singh]

Bro problem is simple. give the proper path and state name which is used in redux. you provided the wrong path and try to pull the product using useSelector.

[DeepakChoudhary-DWT]

import { Box, Button, Container, Grid, Typography } from "@mui/material"; import React, { useEffect, useState } from "react"; import { addToCart, addToCartWrapper, carouselWrapperBox, quantityWrapper, quantityWrapperMain, reviewsBox, singleProdduct, singleProductContent, starRatting, totalPriceWrapper, } from "../styles/style"; import Carousel from "react-material-ui-carousel"; import { useDispatch, useSelector } from "react-redux"; import { getProductDetails } from "./Redux/Action/productAction"; import { useNavigate, useParams } from "react-router-dom"; import ReactStars from "react-rating-stars-component"; import Loader from "./Loader"; import { addItemToCart } from "./Redux/Action/cartActions"; import ProductReview from "./user/ProductReview"; import { Swiper, SwiperSlide } from "swiper/react"; import SwiperCore, { Navigation } from "swiper/core"; import "swiper/css/pagination"; import "swiper/css/navigation"; import SwiperSliderReciew from "./SwiperSliderReciew"; import { toast, ToastContainer } from "react-toastify"; import "react-toastify/dist/ReactToastify.css";

const SingleProduct = () => { console.log("first"); const Navigate = useNavigate();

const dispatch = useDispatch(); const { id } = useParams(); console.log(id, "id"); const { product, loading, error } = useSelector( (state) => state.singleProdutDetail ); console.log(product, "product d"); const [quantity, setQuantity] = useState(1); const [totalPrice, setTotalPrice] = useState(null);

useEffect(() => { setTotalPrice(product?.price); }, [product]);

useEffect(() => { console.log("useEffect triggered ");

dispatch(getProductDetails(id));

}, [dispatch, id]);

const handleDecrease = () => { if (quantity > 1) { setQuantity(quantity - 1); setTotalPrice((prevTotalPrice) => prevTotalPrice - product.price); } };

const handleIncrease = () => { if (quantity < product.stock) { setQuantity(quantity + 1); setTotalPrice((prevTotalPrice) => prevTotalPrice + product.price); } };

const addToCart = () => { if (quantity <= product.stock) { dispatch(addItemToCart(id, quantity)); toast.success("Item Added successfully!"); // Navigate(/cart/${id}); } else { alert("Cannot add more than available stock to the cart"); } }; SwiperCore.use([Navigation]); return ( <Box sx={singleProdduct} component={"section"}>

{loading ? ( ) : ( <> {product && product.images ? product.images.map((item, i) => ( )) : "No images available"} {product.productname} Price: ${product.price} {" "} reviews ({product.numOfReviews}) {product.stock < 1 ? "Out Of Stock" : "In Stock"} Quantity - {quantity} + Total Price: ${totalPrice} Add To Cart Description:

{product.description} )}

  <ToastContainer />
</Box>

); };

export default SingleProduct;

i have same issue here is my code