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) => (
<Typography
key={i}
component={"img"}
src={item.url}
alt=""
className="carouselImage"
/>
))
: "No images available"}





<Typography component={"h2"}>
{product.productname}

<Typography component={"h3"}>
Price: ${product.price}


{" "}

<Typography component={"span"}>
reviews ({product.numOfReviews})



<Typography
component={"span"}
className={product.stock < 1 ? "outofstock " : "instock"}
>
{product.stock < 1 ? "Out Of Stock" : "In Stock"}

                <Typography component={"p"}>Quantity </Typography>
                <Box sx={quantityWrapper}>
                  <Button variant="outlined" onClick={handleDecrease}>
                    -
                  </Button>
                  <Typography variant="h6" sx={{ margin: "0 10px" }}>
                    {quantity}
                  </Typography>
                  <Button variant="outlined" onClick={handleIncrease}>
                    +
                  </Button>
                </Box>
              </Box>
              <Box sx={totalPriceWrapper}>
                <Typography component={"h3"}>
                  Total Price: ${totalPrice}
                </Typography>
              </Box>
            </Box>
            <Box sx={addToCartWrapper}>
              <Button disabled={product.stock <= 0} onClick={addToCart}>
                Add To Cart
              </Button>
              <Typography component={"p"}>
                Description:<br></br> {product.description}
              </Typography>
            </Box>
          </Grid>
        </Grid>
        <SwiperSliderReciew />
      </>
    )}
  </Container>
  <ToastContainer />
</Box>

);
};

export default SingleProduct;

i have same issue
here is my code

[alphacentauri07]

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

had this error quite many time, everytime it was in store.js either their was improper import of reducer, syntax error of reducer by me