I'm using redux toolkit to add a object to my array , for that i'm dispatching a function but i'm getting this error (i'm importing data into my details file by help of state and params):
" Details.js:16 Uncaught RangeError: Maximum call stack size exceeded at addToCart (Details.js:16:1) "
here is my details file
import {react,useEffect} from 'react';
import { useParams } from 'react-router-dom';
import {useDispatch,useSelector} from 'react-redux';
import {getProduct,addtocart} from '../features/productSlice'
function Details(){
const params = useParams();
const dispatch = useDispatch();
useEffect(()=>{
dispatch(getProduct(params.id))
},[])
function addToCart(){
dispatch(addToCart(id));
}
const productdetail = useSelector((state)=> state.myproduct.product)
const {title,image,description,price,id}= productdetail;
console.log(params)
return(
<>
<div className='container'>
<img src={image}/>
<h1>{title}</h1>
<h5>{description}</h5>
<h4>{price}</h4>
</div>
<button
className='btn btn-warning'
onClick={()=>{addToCart({id}) }
}
> Add to cart </button>
</>
)
}
export default Details;
and here is my portion of Slice
const productSlice = createSlice({
name:"myproduct",
initialState,
reducers:{
getProduct:(state,action)=>{
state.product = state.products.find((el) => el.id == action.payload)
},
addtocart:(state,action)=>{
state.cart = state.cart.push(action.payload)
},
removefromcart:(state,action)=>{
state.cart = action.payload
}
},
This should work
function addToCart({ id } = {}) {
// dispatch(addToCart(id)); <- wrong, calls itself untill exceeds max call stack size throwing a RangeError
dispatch(addtocart({ payload: id })); // i expect this to work, because "addtocart" is the action you're importing from "productSlice"
}
sidenotes:
id instead of { id } to "addToCart" button handler, and wrap the id in { payload: { id } }productSlice)