Para el botón Eliminar, comencemos nuevamente con la lógica de Redux.
Entonces, aquí en las acciones, por ejemplo, podemos registrar un nuevo identificador, eliminar del carrito suena como un
nombre apropiado dado que habíamos agregado al carrito antes, así que elimine del carrito.
También agregaré nuevamente una función de creador de acciones aquí, eliminar del carrito.
Esto ahora solo necesita la ID del producto que debe eliminarse, por lo que solo la ID del producto
y luego esto devuelve un nuevo objeto de acción donde el tipo de curso se elimina del carrito y donde tenemos el pid, la ID
del producto, donde reenvío el Identificación del producto que estoy obteniendo aquí. Ahora en el reductor, teníamos que agregar
al estuche del carrito, ahora simplemente tenemos que agregar
otro estuche aquí y ese estuche es el de
quitar del estuche del carrito.
Para eso, debe asegurarse de importar el identificador de acción eliminado del carrito del archivo
de acciones
del carrito y en el
caso de eliminar del carrito aquí, tenemos dos casos nuevamente.
Una es que solo teníamos un artículo de ese producto en el carrito, como para la
alfombra azul, en este
caso necesitamos eliminarlo por completo del objeto de
artículos del
carrito, por lo tanto, de este objeto y esto lo eliminará de esta fila que sacamos aquí.
Si tenemos dos o más artículos, entonces solo queremos reducir la cantidad en 1.
Por supuesto, siempre puede borrar este elemento por completo si lo desea, pero quiero mostrarle cómo
puede diferenciar entre estos dos casos.
Entonces, en realidad, si tenemos una cantidad superior a uno, no quiero borrar el artículo del
carrito, sino reducir la cantidad en 1.
Por lo tanto, al retirar del carrito, tenemos que averiguar cuál es nuestra cantidad. Entonces, nuestra cantidad actual que almaceno en esta constante se puede deducir
de nuestro estado, por supuesto, allí en los artículos, tenemos que encontrar el producto que estamos buscando y, por supuesto, podemos hacerlo con la
ayuda de la identificación que es
parte de nuestra acción aquí en el campo pid porque ahora los elementos de estado son un
objeto y, por lo tanto, podemos acceder a la acción. pid aquí, cierto.
Esto accederá dinámicamente al valor con la clave de ID del producto aquí en nuestro artículo,
por lo que con
la ID del producto estamos obteniendo esta acción
y así es como agregamos artículos a nuestros objetos objeto aquí.
Usamos nuestra identificación de producto como un identificador, esto es
lo que uso aquí para obtener acceso.
Esto tendrá una cantidad porque tendrá un valor que es un artículo del producto, por supuesto,
también puede agregar un cheque si este artículo es realmente parte del carrito, pero la
forma en que construimos esta aplicación, nunca deberíamos poder llegar a este acción sin que ese producto sea parte
del carrito porque solo podemos activar nuestra acción de eliminación aquí desde el interior de la pantalla del carrito, por
lo que no necesitamos verificar aquí, pero definitivamente necesitamos obtener la cantidad.
Ahora podemos verificar si la cantidad actual es mayor que 1, lo que significa que debemos reducirla,
debemos reducirla, no borrarla, de lo
contrario, debemos borrarla.
Ahora comencemos con el caso de borrado.
Entonces, aquí solo tenemos que devolver un nuevo objeto de elementos que incluya todos los
elementos antiguos pero que ya no incluya este elemento. Entonces, podemos tener nuestros artículos de carrito actualizados aquí, donde clonamos
artículos de estado, como este y ahora para eliminar una propiedad, podemos usar la palabra clave eliminar Javascript sabe y allí, podemos eliminar artículos
de carrito actualizados para la acción. pid.
Por lo tanto, esto eliminará este artículo de nuestro objeto Javascript copiado aquí, eliminará este artículo por completo, este artículo del producto por completo
de nuestro objeto de artículos de carrito. Así es como podemos borrarlo. Ahora, en el otro caso en el
que simplemente necesitamos reducirlo, puedo tener mi artículo de
carrito actualizado, de modo que ese único artículo de carrito donde creo un nuevo artículo de carrito con la clase
de artículo de carrito y allí, quiero copiar los valores de los existentes artículo del carrito pero simplemente reduzca la cantidad.
Entonces, el artículo del carrito toma la cantidad correcta como los primeros
valores, por lo que ahora el objetivo es obtener acceso a los artículos de estado para la identificación del producto que obtengo en
la acción y, dado que repetir esto será engorroso, lo guardaré en un auxiliar una constante , el artículo de carrito seleccionado es esto aquí, ahora
podemos reemplazarlo aquí con el artículo de carrito seleccionado y aquí puedo
usar el artículo de carrito seleccionado. cantidad menos uno.
Ahora, por supuesto, sabemos que esto no será cero porque la cantidad era mayor que 1 y ahora podemos mantener el resto
de los datos, por supuesto.
Así que mantenemos el precio del producto aquí, mantenemos el título del producto, eso no cambia, la suma,
sin embargo, por supuesto cambia y esa es
la suma, la suma anterior menos el precio, por supuesto,
menos el precio del producto porque eliminamos uno artículo, tenemos que reducir la suma por el precio de un artículo.
Ahora este artículo de carrito actualizado debe reemplazar el artículo actual en nuestro objeto de artículos de carrito. Para que también podamos reutilizar algo de código, en realidad cambiaré esto un
poco y crearé artículos de carrito actualizados como una variable aquí en lugar de una constante
aquí en el bloque else, de modo que simplemente actualice este valor de variables, de modo que aquí en el
bloque if,
también podemos usar el mismo nombre de variable, artículos de carrito actualizados donde configuro esto igual a una copia de
los artículos existentes pero luego reemplazo mi acción pid aquí, por lo que mi ID de producto, mi identificador, el valor allí con el Artículo de carrito actualizado que es
mi artículo de carrito antiguo con la cantidad y suma actualizadas. Esos son los artículos actualizados del carrito, ahora,
por
supuesto, también tendremos que ajustar la cantidad total de nuestro estado, por lo
que después de este bloqueo, de lo contrario, devolveremos una copia del estado, los artículos se pueden configurar como artículos actualizados
del carrito y ahora es importante, la
cantidad total se puede establecer para indicar la cantidad total menos el precio del producto
del artículo de carrito seleccionado porque, al igual que actualicé la suma de este artículo de carrito único, la
suma total del carrito también debe reajustarse como tal. Ahora podemos intentar enviar esta acción de eliminar del carrito.
Así que vayamos a la pantalla del carrito donde al final tengo esto en la función de eliminación y allí,
ahora quiero enviar una acción, por lo que necesitaré acceso a
la función de envío con la ayuda del gancho de envío de uso. Ahora podemos usar eso aquí, acceder a él llamando simplemente usar despacho como este y
luego despachar esto allí abajo.
Dispatch ahora importa todas las acciones que necesitamos, así que importa todo como acciones de carrito desde la carpeta de la tienda, desde el carrito de acciones como este, nuevamente
usando esta importación agrupada que es totalmente opcional, también puedes apuntar a las cosas específicas que necesitas, así
que apunta a las
específicas creadores de acciones, en este caso, eliminar el creador del carrito que necesitaríamos y
luego allí abajo, simplemente ejecutar este creador
de acciones, en mi caso utilizando acciones del carrito. removeFromCart, reenvíe la identificación del producto que, por supuesto,
obtenemos aquí, es itemData. articulo.
y ahora tenga en cuenta que estamos recorriendo elementos de esta forma, por lo que tendremos un campo de ID
de producto allí y, por lo tanto, podemos usar esto aquí para reenviar esto para eliminarlo del carrito,
por lo tanto, esto debería permitirnos actualizar esta. Y eso debería ser todo, Redux debería hacer
el resto detrás de escena y debería volver a mostrar automáticamente la pantalla del carrito cada vez
que el carrito cambie, así que cada vez que eliminemos artículos. Así que agregué dos camisas rojas y una alfombra azul y si me
quito una
camisa roja, de hecho, un problema que tenemos es el cambio de orden,
tendremos que arreglarlo, pero verá que la cantidad se actualizó correctamente.
Si ahora elimino esto, la cantidad total también se actualizó correctamente, si ahora elimino esto, de hecho se ha ido por completo
y ahora esto también está deshabilitado.
Entonces, esto generalmente funciona, pero, por supuesto, el orden se cambia, eso no
es algo que quiera que ocurra aquí.
Ahora, para evitar que el pedido cambie, simplemente podemos ir a la pantalla del carrito donde cambio mis artículos para que sean
una matriz y allí, solo debemos asegurarnos de que esta matriz siempre esté ordenada de la misma manera
porque este selector siempre volverá a aparecer. desencadenar y recuperar nuestros datos cada vez que cambia nuestro estado de Redux.
Por lo tanto, aquí, siempre obtendremos la última instantánea de datos que tenemos allí y, por lo tanto, es aquí
donde solo tenemos que clasificarla de la misma manera todo el tiempo y, por lo tanto, siempre la procesaremos
de la misma manera.
Por lo tanto, solo debemos asegurarnos de que nuestra matriz de artículos de carrito transformados esté ordenada llamando a sort allí.
Si lo llamo así, empiezo a agregar algunos datos aquí, ahora ves que esto solo
no funcionó porque no le estamos diciendo cómo ordenarlo y no
sabe cómo hacer esto para objetos fuera de el cuadro, pero podemos pasar una función para ordenar
donde siempre comparamos dos elementos, a y b, entre sí y luego ordenar tiene que
devolver un número al final que determina qué viene
primero y allí, por supuesto,
puede ordenar esto desea, por ejemplo, por ID de producto, por lo que simplemente podemos devolver una comparación donde verificamos la ID de producto de
A, comparar esto con la ID de producto de B y si es mayor, entonces con una expresión ternaria
aquí, devolví uno, de lo contrario devuelvo menos uno .
Esta es la función de clasificación normal con la que se incluye Javascript y ahora esto garantiza
que siempre clasifiquemos
de la misma manera, por lo tanto, ahora verá que si elimino esto, el corto rojo permanece en su lugar y, por lo tanto, nuestra lógica de carrito está terminada.
Ahora podemos asegurarnos de que también podemos hacer clic en ese botón de pedido ahora y lo agregamos como un pedido
que luego podemos visitar con el útil cajón aquí que nos permite ir a la pantalla de pedidos que,
por supuesto, también tenemos que añadir.