Actualmente estoy construyendo una tienda de ropa en la que puede agregar productos al carrito y eliminar cada uno de ellos como desee y hace que el carrito se vuelva a representar y muestre un nuevo carrito sin ese producto dentro de él.
así que hice un Slice for cart en redux. la parte 'addProduct' funciona bien, pero el reductor 'deleteProduct' que usa filter() no funciona. (cuando hago clic en mi botón Eliminar, no sucede nada y no hay cambios en la diferencia en Redux Devtools)
mi rebanada:
const selectedProductsSlice = createSlice({ name:'selectedProducts', initialState:{ productList:[], checkoutPrice:0, }, reducers: { addProduct:(state,{payload}) => { state.productList.push(payload) state.checkoutPrice += payload.price }, deleteProduct:(state,{payload}) => { state.productList.filter((foundProduct) => foundProduct.id !== payload.id) } }});mi botón y handleDelete:
<button className="btn-delete" onClick={handleDelete(product)}>Delete</button> function handleDelete(p) { console.log(p) dispatch(deleteProduct(p.product)) }editar: el filtro no funcionó de todas las formas posibles que probé. así que cambié mi forma e hice esto en su lugar para trabajar. pero aún me pregunto por qué el método filter() no funcionó correctamente.
deleteProduct: (state, { payload }) => { const foundIndex = state.productList.findIndex((p) => { return p.product.id === payload.id }) state.productList.splice(foundIndex,1) }La operación de filter crea una nueva matriz sin cambiar la instancia existente. Por lo tanto, debe asignarlo a state .
deleteProduct: (state, { payload }) => { return { ...state, productList: state.productList.filter( foundProduct => foundProduct.id !== payload.id ) }; }; También debe cambiar la forma en que llama a handleDelete en el controlador onClick.
onClick={() => handleDelete(product)}Pasé exactamente por el mismo problema que tú. Resolví este problema solo para mover mi reductor a otro reductor existente
Espero que lo superes. no pude pasar de largo
Los métodos de filtro devuelven una nueva matriz, por lo que debe actualizar su herramienta de matriz existente. Por favor actualice su porción:
const selectedProductsSlice = createSlice({ name:'selectedProducts', initialState:{ productList:[], checkoutPrice:0, }, reducers: { addProduct:(state,{payload}) => { state.productList.push(payload) state.checkoutPrice += payload.price }, deleteProduct:(state,{payload}) => { state.productList=state.productList.filter((foundProduct) => foundProduct.id !== payload.id) } }});