Estoy usando el kit de herramientas redux para agregar un objeto a mi matriz, para eso estoy enviando una función pero recibo este error (estoy importando datos en mi archivo de detalles con la ayuda del estado y los parámetros):
" Details.js:16 RangeError no capturado: se excedió el tamaño máximo de la pila de llamadas en addToCart (Details.js:16:1) "
aquí está mi archivo de detalles
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;y aquí está mi porción de 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 } },Esto debería funcionar
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" }notas al margen:
id en lugar de { id } al controlador del botón "addToCart" y envolvería la id en { payload: { id } }productSlice )