Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Uncaught TypeError: Cannot destructure property 'products' of 'useSelector(...)' as it is undefined. #103

Open
Nikhil23696 opened this issue Dec 12, 2024 · 0 comments

Comments

@Nikhil23696
Copy link

I am new to mern stack and building a ecommerce project and got error. I could not find perfect solution, please help any one.
Below is my code.........

// Home.jsx -- file

const product = {
name: "Blue Tshirt",
images: [{ url: "https://i.ibb.co/DRST11n/1.webp" }],
price: "$300",
_id: "uihf48"
}
const Home = () => {
const { products } = useSelector(state => state.allProduct)
useGetProduct()

return (
<>


Welcome to DigiStore


Find amazing Product Below


Scroll

  </div>
  <h2 className='text-center  m-5 border-b-2 w-48  mx-auto '>Featured Product</h2>
  <div className='flex flex-wrap justify-center max-w-[100%]'>
    {products && products.map((product) => <Product product={product} />)}
  </div> 
</>

)
}

export default Home

// productSlice.js--- file

import { createSlice } from "@reduxjs/toolkit";

const productSlice = createSlice({
name: "allProduct",
initialState: {
products: [],
},
reducers: {
getProduct : (state,action)=>{
state.products = action.payload
}
}
})
export const {getProduct} = productSlice.actions
export default productSlice.reducer

// custom hook file---

import axios from "axios";
import { useEffect } from "react";
import { useDispatch } from "react-redux";
import { getProduct } from "@/redux/productSlice";

const useGetProduct = ()=>{
const dispatch = useDispatch();
useEffect(()=>{
const fetchProduct = async()=>{
try {
const res = await axios.get('http://localhost:4000/api/v1/products', {withCredentials: true})
dispatch(getProduct(res.data.products))
} catch (error) {
console.log(error)
}
}
fetchProduct();
},[dispatch])
}
export default useGetProduct

also want to tell you that, products is available in my redux dev tools but cannot render on ui. Please help

Thanks in advance

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant