1
00:00:02,100 --> 00:00:05,460
Para el botón Eliminar, comencemos nuevamente con la lógica de Redux.

2
00:00:05,490 --> 00:00:11,850
Entonces, aquí en las acciones, por ejemplo, podemos registrar un nuevo identificador, eliminar del carrito suena como un

3
00:00:11,850 --> 00:00:17,120
nombre apropiado dado que habíamos agregado al carrito antes, así que elimine del carrito.

4
00:00:17,110 --> 00:00:22,710
También agregaré nuevamente una función de creador de acciones aquí, eliminar del carrito.

5
00:00:22,740 --> 00:00:27,750
Esto ahora solo necesita la ID del producto que debe eliminarse, por lo que solo la ID del producto

6
00:00:27,750 --> 00:00:34,260
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

7
00:00:34,260 --> 00:00:40,800
del producto, donde reenvío el Identificación del producto que estoy obteniendo aquí. Ahora en el reductor, teníamos que agregar

8
00:00:40,800 --> 00:00:44,560
al estuche del carrito, ahora simplemente tenemos que agregar

9
00:00:44,560 --> 00:00:48,280
otro estuche aquí y ese estuche es el de

10
00:00:50,290 --> 00:00:53,030
quitar del estuche del carrito.

11
00:00:53,050 --> 00:00:57,960
Para eso, debe asegurarse de importar el identificador de acción eliminado del carrito del archivo

12
00:00:58,000 --> 00:00:58,990
de acciones

13
00:01:01,840 --> 00:01:03,670
del carrito y en el

14
00:01:03,670 --> 00:01:07,120
caso de eliminar del carrito aquí, tenemos dos casos nuevamente.

15
00:01:07,140 --> 00:01:12,660
Una es que solo teníamos un artículo de ese producto en el carrito, como para la

16
00:01:12,660 --> 00:01:13,900
alfombra azul, en este

17
00:01:13,980 --> 00:01:16,760
caso necesitamos eliminarlo por completo del objeto de

18
00:01:16,770 --> 00:01:17,850
artículos del

19
00:01:17,850 --> 00:01:23,400
carrito, por lo tanto, de este objeto y esto lo eliminará de esta fila que sacamos aquí.

20
00:01:23,400 --> 00:01:27,870
Si tenemos dos o más artículos, entonces solo queremos reducir la cantidad en 1.

21
00:01:27,870 --> 00:01:33,120
Por supuesto, siempre puede borrar este elemento por completo si lo desea, pero quiero mostrarle cómo

22
00:01:33,120 --> 00:01:35,450
puede diferenciar entre estos dos casos.

23
00:01:35,490 --> 00:01:41,130
Entonces, en realidad, si tenemos una cantidad superior a uno, no quiero borrar el artículo del

24
00:01:41,130 --> 00:01:43,870
carrito, sino reducir la cantidad en 1.

25
00:01:44,100 --> 00:01:51,210
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

26
00:01:51,210 --> 00:01:57,930
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

27
00:01:57,960 --> 00:02:00,000
ayuda de la identificación que es

28
00:02:00,000 --> 00:02:04,770
parte de nuestra acción aquí en el campo pid porque ahora los elementos de estado son un

29
00:02:05,550 --> 00:02:11,440
objeto y, por lo tanto, podemos acceder a la acción. pid aquí, cierto.

30
00:02:11,450 --> 00:02:16,680
Esto accederá dinámicamente al valor con la clave de ID del producto aquí en nuestro artículo,

31
00:02:16,950 --> 00:02:18,380
por lo que con

32
00:02:18,390 --> 00:02:21,220
la ID del producto estamos obteniendo esta acción

33
00:02:21,240 --> 00:02:24,950
y así es como agregamos artículos a nuestros objetos objeto aquí.

34
00:02:24,960 --> 00:02:28,890
Usamos nuestra identificación de producto como un identificador, esto es

35
00:02:28,920 --> 00:02:32,410
lo que uso aquí para obtener acceso.

36
00:02:32,430 --> 00:02:36,940
Esto tendrá una cantidad porque tendrá un valor que es un artículo del producto, por supuesto,

37
00:02:36,990 --> 00:02:41,120
también puede agregar un cheque si este artículo es realmente parte del carrito, pero la

38
00:02:41,130 --> 00:02:46,290
forma en que construimos esta aplicación, nunca deberíamos poder llegar a este acción sin que ese producto sea parte

39
00:02:46,290 --> 00:02:51,690
del carrito porque solo podemos activar nuestra acción de eliminación aquí desde el interior de la pantalla del carrito, por

40
00:02:51,690 --> 00:02:55,340
lo que no necesitamos verificar aquí, pero definitivamente necesitamos obtener la cantidad.

41
00:02:55,410 --> 00:03:03,780
Ahora podemos verificar si la cantidad actual es mayor que 1, lo que significa que debemos reducirla,

42
00:03:03,780 --> 00:03:06,740
debemos reducirla, no borrarla, de lo

43
00:03:06,750 --> 00:03:08,940
contrario, debemos borrarla.

44
00:03:09,090 --> 00:03:11,790
Ahora comencemos con el caso de borrado.

45
00:03:11,850 --> 00:03:18,900
Entonces, aquí solo tenemos que devolver un nuevo objeto de elementos que incluya todos los

46
00:03:18,930 --> 00:03:27,520
elementos antiguos pero que ya no incluya este elemento. Entonces, podemos tener nuestros artículos de carrito actualizados aquí, donde clonamos

47
00:03:27,520 --> 00:03:36,870
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

48
00:03:36,870 --> 00:03:41,880
de carrito actualizados para la acción. pid.

49
00:03:41,880 --> 00:03:49,290
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

50
00:03:49,290 --> 00:03:57,020
de nuestro objeto de artículos de carrito. Así es como podemos borrarlo. Ahora, en el otro caso en el

51
00:03:57,020 --> 00:03:59,690
que simplemente necesitamos reducirlo, puedo tener mi artículo de

52
00:04:01,040 --> 00:04:07,250
carrito actualizado, de modo que ese único artículo de carrito donde creo un nuevo artículo de carrito con la clase

53
00:04:07,280 --> 00:04:13,700
de artículo de carrito y allí, quiero copiar los valores de los existentes artículo del carrito pero simplemente reduzca la cantidad.

54
00:04:14,220 --> 00:04:17,910
Entonces, el artículo del carrito toma la cantidad correcta como los primeros

55
00:04:17,910 --> 00:04:25,290
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

56
00:04:25,290 --> 00:04:33,450
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

57
00:04:33,510 --> 00:04:37,290
podemos reemplazarlo aquí con el artículo de carrito seleccionado y aquí puedo

58
00:04:37,290 --> 00:04:41,760
usar el artículo de carrito seleccionado. cantidad menos uno.

59
00:04:41,760 --> 00:04:48,240
Ahora, por supuesto, sabemos que esto no será cero porque la cantidad era mayor que 1 y ahora podemos mantener el resto

60
00:04:48,240 --> 00:04:49,820
de los datos, por supuesto.

61
00:04:49,830 --> 00:04:57,270
Así que mantenemos el precio del producto aquí, mantenemos el título del producto, eso no cambia, la suma,

62
00:04:57,270 --> 00:05:00,840
sin embargo, por supuesto cambia y esa es

63
00:05:00,910 --> 00:05:05,090
la suma, la suma anterior menos el precio, por supuesto,

64
00:05:05,100 --> 00:05:13,410
menos el precio del producto porque eliminamos uno artículo, tenemos que reducir la suma por el precio de un artículo.

65
00:05:13,470 --> 00:05:21,870
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

66
00:05:21,870 --> 00:05:26,760
poco y crearé artículos de carrito actualizados como una variable aquí en lugar de una constante

67
00:05:26,760 --> 00:05:32,880
aquí en el bloque else, de modo que simplemente actualice este valor de variables, de modo que aquí en el

68
00:05:33,240 --> 00:05:34,230
bloque if,

69
00:05:34,230 --> 00:05:40,530
también podemos usar el mismo nombre de variable, artículos de carrito actualizados donde configuro esto igual a una copia de

70
00:05:40,530 --> 00:05:49,890
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

71
00:05:49,890 --> 00:05:56,610
mi artículo de carrito antiguo con la cantidad y suma actualizadas. Esos son los artículos actualizados del carrito, ahora,

72
00:05:56,700 --> 00:05:57,520
por

73
00:05:57,540 --> 00:06:02,550
supuesto, también tendremos que ajustar la cantidad total de nuestro estado, por lo

74
00:06:02,550 --> 00:06:10,800
que después de este bloqueo, de lo contrario, devolveremos una copia del estado, los artículos se pueden configurar como artículos actualizados

75
00:06:11,160 --> 00:06:14,030
del carrito y ahora es importante, la

76
00:06:14,100 --> 00:06:20,160
cantidad total se puede establecer para indicar la cantidad total menos el precio del producto

77
00:06:23,530 --> 00:06:31,030
del artículo de carrito seleccionado porque, al igual que actualicé la suma de este artículo de carrito único, la

78
00:06:31,060 --> 00:06:38,200
suma total del carrito también debe reajustarse como tal. Ahora podemos intentar enviar esta acción de eliminar del carrito.

79
00:06:38,200 --> 00:06:46,940
Así que vayamos a la pantalla del carrito donde al final tengo esto en la función de eliminación y allí,

80
00:06:46,940 --> 00:06:51,860
ahora quiero enviar una acción, por lo que necesitaré acceso a

81
00:06:51,890 --> 00:07:03,040
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

82
00:07:03,550 --> 00:07:05,740
luego despachar esto allí abajo.

83
00:07:05,740 --> 00:07:17,150
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

84
00:07:17,150 --> 00:07:24,080
usando esta importación agrupada que es totalmente opcional, también puedes apuntar a las cosas específicas que necesitas, así

85
00:07:24,080 --> 00:07:25,760
que apunta a las

86
00:07:25,790 --> 00:07:31,610
específicas creadores de acciones, en este caso, eliminar el creador del carrito que necesitaríamos y

87
00:07:32,480 --> 00:07:35,400
luego allí abajo, simplemente ejecutar este creador

88
00:07:35,420 --> 00:07:41,780
de acciones, en mi caso utilizando acciones del carrito. removeFromCart, reenvíe la identificación del producto que, por supuesto,

89
00:07:41,780 --> 00:07:45,030
obtenemos aquí, es itemData. articulo.

90
00:07:45,110 --> 00:07:50,810
y ahora tenga en cuenta que estamos recorriendo elementos de esta forma, por lo que tendremos un campo de ID

91
00:07:50,810 --> 00:07:55,840
de producto allí y, por lo tanto, podemos usar esto aquí para reenviar esto para eliminarlo del carrito,

92
00:07:55,850 --> 00:08:00,770
por lo tanto, esto debería permitirnos actualizar esta. Y eso debería ser todo, Redux debería hacer

93
00:08:00,770 --> 00:08:05,470
el resto detrás de escena y debería volver a mostrar automáticamente la pantalla del carrito cada vez

94
00:08:05,570 --> 00:08:12,060
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

95
00:08:13,260 --> 00:08:13,790
quito una

96
00:08:13,800 --> 00:08:17,000
camisa roja, de hecho, un problema que tenemos es el cambio de orden,

97
00:08:17,010 --> 00:08:19,800
tendremos que arreglarlo, pero verá que la cantidad se actualizó correctamente.

98
00:08:19,920 --> 00:08:25,620
Si ahora elimino esto, la cantidad total también se actualizó correctamente, si ahora elimino esto, de hecho se ha ido por completo

99
00:08:26,360 --> 00:08:28,080
y ahora esto también está deshabilitado.

100
00:08:28,080 --> 00:08:31,970
Entonces, esto generalmente funciona, pero, por supuesto, el orden se cambia, eso no

101
00:08:31,980 --> 00:08:34,140
es algo que quiera que ocurra aquí.

102
00:08:34,380 --> 00:08:40,620
Ahora, para evitar que el pedido cambie, simplemente podemos ir a la pantalla del carrito donde cambio mis artículos para que sean

103
00:08:40,620 --> 00:08:45,960
una matriz y allí, solo debemos asegurarnos de que esta matriz siempre esté ordenada de la misma manera

104
00:08:45,990 --> 00:08:51,690
porque este selector siempre volverá a aparecer. desencadenar y recuperar nuestros datos cada vez que cambia nuestro estado de Redux.

105
00:08:52,320 --> 00:08:57,540
Por lo tanto, aquí, siempre obtendremos la última instantánea de datos que tenemos allí y, por lo tanto, es aquí

106
00:08:57,540 --> 00:09:02,670
donde solo tenemos que clasificarla de la misma manera todo el tiempo y, por lo tanto, siempre la procesaremos

107
00:09:02,670 --> 00:09:03,790
de la misma manera.

108
00:09:03,900 --> 00:09:11,250
Por lo tanto, solo debemos asegurarnos de que nuestra matriz de artículos de carrito transformados esté ordenada llamando a sort allí.

109
00:09:11,410 --> 00:09:17,310
Si lo llamo así, empiezo a agregar algunos datos aquí, ahora ves que esto solo

110
00:09:17,410 --> 00:09:21,820
no funcionó porque no le estamos diciendo cómo ordenarlo y no

111
00:09:21,820 --> 00:09:28,480
sabe cómo hacer esto para objetos fuera de el cuadro, pero podemos pasar una función para ordenar

112
00:09:28,480 --> 00:09:34,490
donde siempre comparamos dos elementos, a y b, entre sí y luego ordenar tiene que

113
00:09:34,600 --> 00:09:38,140
devolver un número al final que determina qué viene

114
00:09:38,190 --> 00:09:40,780
primero y allí, por supuesto,

115
00:09:40,800 --> 00:09:50,530
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

116
00:09:50,530 --> 00:09:58,110
A, comparar esto con la ID de producto de B y si es mayor, entonces con una expresión ternaria

117
00:09:58,150 --> 00:10:02,210
aquí, devolví uno, de lo contrario devuelvo menos uno .

118
00:10:02,370 --> 00:10:07,620
Esta es la función de clasificación normal con la que se incluye Javascript y ahora esto garantiza

119
00:10:07,620 --> 00:10:08,610
que siempre clasifiquemos

120
00:10:08,670 --> 00:10:17,520
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.

121
00:10:17,520 --> 00:10:23,620
Ahora podemos asegurarnos de que también podemos hacer clic en ese botón de pedido ahora y lo agregamos como un pedido

122
00:10:23,610 --> 00:10:29,250
que luego podemos visitar con el útil cajón aquí que nos permite ir a la pantalla de pedidos que,

123
00:10:29,250 --> 00:10:31,190
por supuesto, también tenemos que añadir.