Así que ahora con el componente del artículo del producto reorganizado, es hora de poder eliminar los artículos
porque eso es una de las cosas más simples que podemos hacer.
Esto nos lleva de regreso a Redux y allí, ahora es el momento de trabajar en los productos
y comenzaré con las
acciones que actualmente son un archivo vacío, los productos. archivo js en la carpeta de
acciones donde quiero exportar una acción que nos ayuda a eliminar productos. Por lo tanto, el identificador simplemente se llama eliminar producto y
contiene un texto de eliminar producto aquí y también exportaré un creador de acción eliminar producto que toma el ID del producto, como este y que luego devuelve un objeto
de acción donde el tipo es eliminar producto y pid, el ID del producto es simplemente el
ID del producto reenviado, como este.
Ahora en el reductor, en el archivo del reductor de productos, podemos escuchar eso porque
actualmente, nunca nos preocupamos por ninguna acción. Ahora podemos activar el tipo de acción aquí y manejar el caso de que se elimine el producto que obtenemos
de nuestro archivo de acción de productos y, por lo tanto, debe agregar esa importación. Si el caso es eliminar un producto, necesitamos eliminar el
producto de nuestra matriz de productos de usuario y, por supuesto, también de la matriz de productos disponibles porque
se elimina en general, no solo en nuestros productos de usuario sino de toda
la aplicación.
Por lo
tanto, aquí, devolveré un nuevo objeto donde copiaremos el estado existente para asegurarnos de que no perdemos ningún estado y ahora los productos
de usuario son simplemente estado. userProducts, por lo que
los productos de usuario antiguos en los que podemos filtrar, es un método Javascript incorporado
que devuelve una nueva matriz, una nueva matriz que básicamente se crea ejecutando una función en cada elemento de la matriz anterior
y si esa función devuelve verdadero , conservamos ese elemento, si devuelve falso, lo descartamos.
Entonces, esto ejecuta una función donde obtenemos el producto, esta función es ejecutada por Javascript,
por así decirlo, y pasa el elemento que está viendo actualmente a esta función.
Por lo tanto, obtenemos el producto para cada producto en nuestra matriz de productos de usuario y queremos devolver la ID del producto, a diferencia de
action pid, que es la ID del producto que queremos eliminar.
Lo que esto significa es que básicamente mantendrá todos los productos donde los ID no coinciden, si coinciden, sabemos que es
el producto del que queremos deshacernos y, por
lo tanto, devolvemos falso,
lo que significa que en la nueva matriz, no será incluido.
Ahora es esencialmente la misma lógica para los productos disponibles, solo
tenemos que revisar todos los productos disponibles y filtrar el producto allí.
Este es un cambio que debemos hacer, otro cambio debe hacerse en el carrito, sin embargo, porque
cuando eliminamos un producto, también debería eliminarse del carrito porque, de lo contrario, tenemos un
producto en el carrito que ya no existe. .
Entonces, aquí, también agregaré un caso para eliminar el producto y, por lo tanto, debe importar el producto de eliminación de los productos de acciones en
el carrito. js
reducer también y aquí,
debemos asegurarnos de que eliminamos el producto del carrito si se eliminó.
Entonces, aquí en el carrito, por supuesto, obtenemos nuestra identificación de producto del producto que queremos
eliminar, es esta solicitud en esa acción la que se envía, por lo tanto, aquí devolvemos un nuevo estado donde queremos actualizar nuestro carrito y la cantidad total de tal
manera que el producto se ha ido y con ido, quiero decir, totalmente borrado
del carrito, no solo reducido en uno sino totalmente borrado. Entonces, los elementos están aquí al final, una
copia
de los elementos existentes sin ese producto, por lo que crearé nuevos elementos constantes y actualizados donde copie mis elementos de estado
existentes aquí, así
y luego elimine los elementos actualizados para la acción pid, así que elimino este artículo del carrito.
Por supuesto, esto solo tiene sentido si este artículo existe en el carrito, por lo que primero comprobaré si los artículos
de estado para la acción pid, si eso devuelve algo significativo y
si no es el caso, simplemente devolveré el estado existente porque entonces ya terminé con este caso, no necesito
cambiar nada en el estado, así que simplemente devolveré el estado existente sin cambios.
Si lo hago más allá
de esto, compruebe, entonces sé que el producto con la ID que estamos a punto de eliminar es parte del artículo.
Entonces, continúo copiando mis artículos, luego elimino el producto desde allí, pero antes de hacerlo, obtengo
el total del artículo accediendo a los artículos de estado para la acción pid y luego, por supuesto, tenemos esto, si
echamos un vistazo al carrito Quiero decir, tenemos este campo de suma aquí, así que
al final necesito eliminar la suma. Estoy interesado en la suma porque ahora puedo actualizar mis artículos allí
con los artículos actualizados donde lo eliminé con la palabra clave eliminar y la cantidad total del carrito es la cantidad total del estado menos
el total del artículo, por lo que el total de este carrito artículo que habíamos agregado antes. Así que ahora también actualizamos el carrito
adecuadamente
cuando lo eliminamos. Ahora solo tenemos que enviar esta
eliminación, así que de vuelta
en los productos de usuario, aquí en eliminar, queremos enviar. Entonces, desde React Redux podemos importar despacho de uso
para obtener acceso a la función de despacho aquí llamando
al despacho de uso como lo hicimos muchas veces antes y luego aquí, cuando se presiona eliminar, podemos despachar nuestra acción
y
para eso,
por supuesto, necesitamos para importar esta acción, así que hagamos esto, importemos tal vez todo como acciones de productos desde la carpeta de la tienda, desde la
carpeta de acciones y desde el archivo de productos y ahora usamos la acción de
productos allí cuando enviamos esto para llamar a eliminar producto y reenviar la identificación del producto que
por supuesto es itemData. articulo. Identificación aquí porque estamos
revisando todos los productos aquí y eso básicamente significa que itemData. el artículo se refiere a instancias de nuestro modelo
de producto, cada instancia tiene una propiedad de ID y la reenviamos para eliminar el producto.
Entonces, si lo intentamos y vamos al administrador y hago clic en Eliminar en la camisa roja, de hecho, se ha ido aquí y
si vuelvo a los productos, también se ha ido aquí.
Ahora, si volvemos a cargar esto y agrego la camisa roja al carrito, lo ves aquí, la agregué dos veces.
Ahora, si voy al administrador y lo elimino y vuelvo a los productos y al carrito, el carrito está vacío ahora.
Por otro lado, si agrego, digamos, la alfombra y la taza de café ahora, regrese a admin, elimine la
alfombra pero no la taza de café, verá en los productos, la taza de café
todavía está en el carrito, así que eso hizo trabajo. Por cierto, es posible que notes que la taza de café está un poco cortada aquí,
eso es algo que arreglaré más adelante junto con el hecho de que aquí, en realidad, vemos un signo negativo ahora para el
total, eso también es algo que arreglaré en un segundo.
En primer lugar, asegurémonos de que, sin
embargo, en la sección de administración podamos ir a la pantalla de edición o que también tengamos un elemento allí que nos
permita agregar un nuevo producto.