1
00:00:02,320 --> 00:00:09,040
Así que ahora con el componente del artículo del producto reorganizado, es hora de poder eliminar los artículos

2
00:00:09,040 --> 00:00:14,120
porque eso es una de las cosas más simples que podemos hacer.

3
00:00:14,170 --> 00:00:19,600
Esto nos lleva de regreso a Redux y allí, ahora es el momento de trabajar en los productos

4
00:00:19,600 --> 00:00:21,120
y comenzaré con las

5
00:00:21,160 --> 00:00:26,450
acciones que actualmente son un archivo vacío, los productos. archivo js en la carpeta de

6
00:00:26,560 --> 00:00:35,350
acciones donde quiero exportar una acción que nos ayuda a eliminar productos. Por lo tanto, el identificador simplemente se llama eliminar producto y

7
00:00:35,350 --> 00:00:46,900
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

8
00:00:46,900 --> 00:00:53,430
de acción donde el tipo es eliminar producto y pid, el ID del producto es simplemente el

9
00:00:53,440 --> 00:00:55,990
ID del producto reenviado, como este.

10
00:00:59,620 --> 00:01:07,990
Ahora en el reductor, en el archivo del reductor de productos, podemos escuchar eso porque

11
00:01:08,560 --> 00:01:17,110
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

12
00:01:17,230 --> 00:01:23,900
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

13
00:01:23,900 --> 00:01:29,840
producto de nuestra matriz de productos de usuario y, por supuesto, también de la matriz de productos disponibles porque

14
00:01:29,840 --> 00:01:34,490
se elimina en general, no solo en nuestros productos de usuario sino de toda

15
00:01:34,490 --> 00:01:35,290
la aplicación.

16
00:01:37,990 --> 00:01:39,190
Por lo

17
00:01:39,190 --> 00:01:48,100
tanto, aquí, devolveré un nuevo objeto donde copiaremos el estado existente para asegurarnos de que no perdemos ningún estado y ahora los productos

18
00:01:48,100 --> 00:01:51,630
de usuario son simplemente estado. userProducts, por lo que

19
00:01:51,640 --> 00:01:57,070
los productos de usuario antiguos en los que podemos filtrar, es un método Javascript incorporado

20
00:01:57,070 --> 00:02:04,640
que devuelve una nueva matriz, una nueva matriz que básicamente se crea ejecutando una función en cada elemento de la matriz anterior

21
00:02:04,660 --> 00:02:09,930
y si esa función devuelve verdadero , conservamos ese elemento, si devuelve falso, lo descartamos.

22
00:02:10,000 --> 00:02:15,490
Entonces, esto ejecuta una función donde obtenemos el producto, esta función es ejecutada por Javascript,

23
00:02:15,490 --> 00:02:20,720
por así decirlo, y pasa el elemento que está viendo actualmente a esta función.

24
00:02:20,800 --> 00:02:29,110
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

25
00:02:29,650 --> 00:02:33,390
action pid, que es la ID del producto que queremos eliminar.

26
00:02:33,400 --> 00:02:39,530
Lo que esto significa es que básicamente mantendrá todos los productos donde los ID no coinciden, si coinciden, sabemos que es

27
00:02:39,550 --> 00:02:41,890
el producto del que queremos deshacernos y, por

28
00:02:41,890 --> 00:02:43,240
lo tanto, devolvemos falso,

29
00:02:43,240 --> 00:02:46,340
lo que significa que en la nueva matriz, no será incluido.

30
00:02:46,370 --> 00:02:50,890
Ahora es esencialmente la misma lógica para los productos disponibles, solo

31
00:02:50,900 --> 00:02:55,530
tenemos que revisar todos los productos disponibles y filtrar el producto allí.

32
00:02:55,550 --> 00:03:01,090
Este es un cambio que debemos hacer, otro cambio debe hacerse en el carrito, sin embargo, porque

33
00:03:01,090 --> 00:03:06,400
cuando eliminamos un producto, también debería eliminarse del carrito porque, de lo contrario, tenemos un

34
00:03:06,400 --> 00:03:09,690
producto en el carrito que ya no existe. .

35
00:03:09,820 --> 00:03:17,410
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

36
00:03:17,410 --> 00:03:18,810
el carrito. js

37
00:03:18,820 --> 00:03:20,290
reducer también y aquí,

38
00:03:23,060 --> 00:03:27,830
debemos asegurarnos de que eliminamos el producto del carrito si se eliminó.

39
00:03:29,670 --> 00:03:36,150
Entonces, aquí en el carrito, por supuesto, obtenemos nuestra identificación de producto del producto que queremos

40
00:03:36,300 --> 00:03:47,940
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

41
00:03:47,950 --> 00:03:53,680
manera que el producto se ha ido y con ido, quiero decir, totalmente borrado

42
00:03:53,680 --> 00:04:01,920
del carrito, no solo reducido en uno sino totalmente borrado. Entonces, los elementos están aquí al final, una

43
00:04:01,920 --> 00:04:02,760
copia

44
00:04:02,760 --> 00:04:12,610
de los elementos existentes sin ese producto, por lo que crearé nuevos elementos constantes y actualizados donde copie mis elementos de estado

45
00:04:12,610 --> 00:04:13,910
existentes aquí, así

46
00:04:15,010 --> 00:04:22,820
y luego elimine los elementos actualizados para la acción pid, así que elimino este artículo del carrito.

47
00:04:22,820 --> 00:04:29,600
Por supuesto, esto solo tiene sentido si este artículo existe en el carrito, por lo que primero comprobaré si los artículos

48
00:04:29,750 --> 00:04:33,940
de estado para la acción pid, si eso devuelve algo significativo y

49
00:04:34,220 --> 00:04:40,310
si no es el caso, simplemente devolveré el estado existente porque entonces ya terminé con este caso, no necesito

50
00:04:40,310 --> 00:04:44,750
cambiar nada en el estado, así que simplemente devolveré el estado existente sin cambios.

51
00:04:45,230 --> 00:04:46,840
Si lo hago más allá

52
00:04:46,850 --> 00:04:52,330
de esto, compruebe, entonces sé que el producto con la ID que estamos a punto de eliminar es parte del artículo.

53
00:04:52,340 --> 00:05:00,790
Entonces, continúo copiando mis artículos, luego elimino el producto desde allí, pero antes de hacerlo, obtengo

54
00:05:00,790 --> 00:05:11,970
el total del artículo accediendo a los artículos de estado para la acción pid y luego, por supuesto, tenemos esto, si

55
00:05:11,970 --> 00:05:20,150
echamos un vistazo al carrito Quiero decir, tenemos este campo de suma aquí, así que

56
00:05:20,150 --> 00:05:27,300
al final necesito eliminar la suma. Estoy interesado en la suma porque ahora puedo actualizar mis artículos allí

57
00:05:27,300 --> 00:05:34,440
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

58
00:05:34,620 --> 00:05:44,540
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

59
00:05:44,540 --> 00:05:45,760
adecuadamente

60
00:05:45,860 --> 00:05:50,600
cuando lo eliminamos. Ahora solo tenemos que enviar esta

61
00:05:50,660 --> 00:05:52,960
eliminación, así que de vuelta

62
00:05:52,990 --> 00:06:00,170
en los productos de usuario, aquí en eliminar, queremos enviar. Entonces, desde React Redux podemos importar despacho de uso

63
00:06:00,170 --> 00:06:04,140
para obtener acceso a la función de despacho aquí llamando

64
00:06:04,490 --> 00:06:12,290
al despacho de uso como lo hicimos muchas veces antes y luego aquí, cuando se presiona eliminar, podemos despachar nuestra acción

65
00:06:12,290 --> 00:06:12,980
y

66
00:06:12,980 --> 00:06:13,870
para eso,

67
00:06:13,880 --> 00:06:24,130
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

68
00:06:24,160 --> 00:06:29,650
carpeta de acciones y desde el archivo de productos y ahora usamos la acción de

69
00:06:29,650 --> 00:06:36,100
productos allí cuando enviamos esto para llamar a eliminar producto y reenviar la identificación del producto que

70
00:06:36,100 --> 00:06:40,340
por supuesto es itemData. articulo. Identificación aquí porque estamos

71
00:06:40,480 --> 00:06:46,830
revisando todos los productos aquí y eso básicamente significa que itemData. el artículo se refiere a instancias de nuestro modelo

72
00:06:46,840 --> 00:06:51,870
de producto, cada instancia tiene una propiedad de ID y la reenviamos para eliminar el producto.

73
00:06:51,940 --> 00:06:58,900
Entonces, si lo intentamos y vamos al administrador y hago clic en Eliminar en la camisa roja, de hecho, se ha ido aquí y

74
00:06:58,900 --> 00:07:01,960
si vuelvo a los productos, también se ha ido aquí.

75
00:07:02,200 --> 00:07:08,680
Ahora, si volvemos a cargar esto y agrego la camisa roja al carrito, lo ves aquí, la agregué dos veces.

76
00:07:08,680 --> 00:07:16,380
Ahora, si voy al administrador y lo elimino y vuelvo a los productos y al carrito, el carrito está vacío ahora.

77
00:07:16,520 --> 00:07:23,090
Por otro lado, si agrego, digamos, la alfombra y la taza de café ahora, regrese a admin, elimine la

78
00:07:23,090 --> 00:07:28,460
alfombra pero no la taza de café, verá en los productos, la taza de café

79
00:07:28,520 --> 00:07:35,850
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í,

80
00:07:35,880 --> 00:07:41,240
eso es algo que arreglaré más adelante junto con el hecho de que aquí, en realidad, vemos un signo negativo ahora para el

81
00:07:41,250 --> 00:07:43,680
total, eso también es algo que arreglaré en un segundo.

82
00:07:43,680 --> 00:07:45,810
En primer lugar, asegurémonos de que, sin

83
00:07:45,840 --> 00:07:52,830
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

84
00:07:52,830 --> 00:07:54,720
permita agregar un nuevo producto.