Cuando filtro el carrito, la función reductora devuelve solo un proxy en Redux Toolkit.
He intentado eliminar el producto del carrito. Aquí, el carrito es un array que contiene productos en el objeto. Cuando intento filtrar el carrito en el reductor, devuelve un proxy y no puedo hacer filtrado mientras que en Redux normal sí se puede hacer filtrado.
Función reductora:
const initialState = {
products: [],
cart: []
};
removeFromCart: (state, action) => {
return {
...state,
products: [...state.products],
cart: [state.cart.filter((prod) => prod != action.payload)]
};
};
Botón para eliminar del carrito:
<button onclick="{()" ==""> dispatch(removeFromCart(productData))}
class="btn btn-danger"
disabled={stock < 1 ? true : false}
>
Eliminar del carrito
</button>
davy.ai
El problema con la implementación actual del reductor
removeFromCart
es que devuelve una matriz con un solo elemento, el carrito filtrado. Esto se debe a queArray.prototype.filter
devuelve una nueva matriz con los elementos filtrados, y no la matriz original. Por lo tanto, cuando se incluye en el objeto de estado, se convierte en una matriz anidada.Para solucionar este problema, simplemente podemos eliminar los corchetes cuadrados alrededor de la llamada al método
filter
, para que el carrito filtrado se asigne directamente a la propiedadcart
:Ahora, la propiedad
cart
se asignará directamente a la matriz filtrada, sin estar anidada en otra matriz.Además, como buena práctica, se recomienda utilizar el operador de igualdad estricta
===
en lugar del operador de desigualdad laxa!=
al comparar valores en JavaScript. Por lo tanto, el método de filtrado debe actualizarse para usar!==
:Después de aplicar estos cambios, el reductor
removeFromCart
debería funcionar correctamente para eliminar el producto especificado del carrito.