1
00:00:02,370 --> 00:00:07,800
Ahora estamos realmente cerca del final de este módulo, por lo tanto, debemos asegurarnos de que ahora despachemos acciones

2
00:00:07,800 --> 00:00:11,370
para crear un nuevo producto o para actualizar un producto y, por

3
00:00:11,410 --> 00:00:16,080
lo tanto, antes que nada, debemos agregar estas acciones aquí en nuestra carpeta de acciones .

4
00:00:16,210 --> 00:00:28,830
Así que exportaré una constante aquí, crearé un producto como este aquí, crearé un producto y luego aquí también, otro identificador para actualizar

5
00:00:28,860 --> 00:00:38,500
un producto con un producto actualizado y actualizaré un producto como este y crearé creadores de acciones adecuadas

6
00:00:38,500 --> 00:00:47,670
o crearé un producto y ahora depende de usted cómo desea estructurar esto, qué datos espera obtener

7
00:00:47,670 --> 00:00:50,270
cuando crea un producto.

8
00:00:50,340 --> 00:00:56,370
Soy fanático de crear el producto realmente aquí en la acción o en

9
00:00:56,490 --> 00:01:04,590
el reductor, por lo que realmente espero obtener un título aquí, una descripción, un imageUrl y un precio, digamos,

10
00:01:04,590 --> 00:01:14,070
y luego devuelvo un objeto de acción donde el tipo es crear producto y los datos del producto son simplemente todos esos

11
00:01:14,070 --> 00:01:15,220
datos combinados.

12
00:01:15,450 --> 00:01:22,710
Entonces, aquí tengo mi título, que se asigna al título que obtenemos como argumento, la descripción se asigna a la descripción

13
00:01:23,340 --> 00:01:28,230
y, por lo tanto, también podemos usar un acceso directo de JavaScript moderno donde

14
00:01:28,230 --> 00:01:31,490
si el nombre de la propiedad y el nombre de

15
00:01:31,530 --> 00:01:36,810
la variable de valor son los mismos, simplemente puede escribir así, así que si es

16
00:01:36,810 --> 00:01:38,610
lo mismo que precio:

17
00:01:38,610 --> 00:01:45,880
precio, podemos escribir esto aquí, por supuesto, también es posible para el título y la descripción, de modo que asignemos todos

18
00:01:45,880 --> 00:01:54,460
estos argumentos a propiedades del mismo nombre en este objeto y si actualizamos un producto que es relativamente igual, actualice el producto, por lo que

19
00:01:54,460 --> 00:01:59,920
generalmente podemos copiarlo, pero hay una diferencia importante. Aquí también necesitamos la identificación del producto que debe cambiar, por lo que obtenemos

20
00:01:59,920 --> 00:02:08,370
esto como un argumento adicional y podemos almacenarlo en nuestra acción, por lo tanto, en una propiedad separada de nuestro objeto de acción. Ahora en el reductor, por

21
00:02:08,370 --> 00:02:09,510
supuesto,

22
00:02:09,510 --> 00:02:10,920
necesitamos manejar

23
00:02:10,920 --> 00:02:20,900
eso, necesitamos manejar la creación y actualización. Así que agreguemos un nuevo caso aquí en el reductor de productos para

24
00:02:20,930 --> 00:02:28,940
crear producto y para eso, asegúrese de importar crear producto de productos de acciones y, por supuesto, uno para actualizar

25
00:02:28,940 --> 00:02:33,740
un producto con un producto actualizado, asegúrese de importar eso también.

26
00:02:35,970 --> 00:02:42,300
En crear producto, por supuesto, necesitamos crear un nuevo producto y lo almacenaré en una constante aquí con la nueva

27
00:02:42,300 --> 00:02:45,230
palabra clave en el modelo de producto que creamos

28
00:02:45,230 --> 00:02:51,780
anteriormente, para eso solo necesita asegurarse de importar aquí este modelo de producto la carpeta de modelos y ese producto

29
00:02:51,780 --> 00:02:58,260
aquí reciben una ID que por ahora puede generar manualmente con una nueva fecha para encadenar para tener una especie

30
00:02:58,260 --> 00:03:04,350
de ID ficticia pseudo única para el momento posterior, esto se generará en un servidor pero aún no

31
00:03:04,350 --> 00:03:05,600
lo tenemos .

32
00:03:05,970 --> 00:03:11,580
La identificación del propietario por ahora está codificada en U1 porque no tenemos usuarios en esta aplicación en este

33
00:03:11,580 --> 00:03:17,910
momento, pero el título, etc., se puede completar con los datos de la acción porque en la acción para crear un

34
00:03:17,940 --> 00:03:22,040
producto, tenemos la clave de datos del producto y contiene objeto con título, descripción,

35
00:03:22,050 --> 00:03:24,010
imagenUrl y precio y esos son

36
00:03:24,010 --> 00:03:25,800
datos que ahora podemos recuperar.

37
00:03:25,980 --> 00:03:36,000
Así que aquí para el título, obtenemos acción productData. título, para imageUrl, es acción. datos del

38
00:03:36,360 --> 00:03:43,800
producto. imageUrl, como era de esperar para la descripción, es acción. datos del producto. descripción y por

39
00:03:44,380 --> 00:03:52,780
el precio, es acción. datos del producto. precio. Este es ahora un nuevo producto que creo.

40
00:03:53,070 --> 00:03:58,890
Ahora necesitamos agregarlo a nuestra tienda devolviendo nuestro estado actualizado aquí, donde primero copio el estado existente y ahora

41
00:03:58,890 --> 00:04:03,840
necesito agregarlo tanto a los productos disponibles como a los productos de usuario porque lo creamos,

42
00:04:03,840 --> 00:04:09,690
ciertamente, por lo tanto, pertenece para nosotros, por lo que debe ser parte tanto de las matrices como de

43
00:04:09,690 --> 00:04:15,480
los productos disponibles, bueno, allí podemos tomar estos productos disponibles que obtuvimos y usar concat para obtener una nueva

44
00:04:15,480 --> 00:04:21,990
matriz que es la matriz anterior más agregar un nuevo elemento y aquí, el nuevo producto es ese nuevo elemento y hago

45
00:04:21,990 --> 00:04:25,040
exactamente lo mismo aquí para los productos de usuario.

46
00:04:25,110 --> 00:04:34,220
Así que aquí uso productos de usuario estatales y concaté mi nuevo producto. ¿Ahora qué pasa con la actualización? Para la actualización, en primer lugar, necesitamos

47
00:04:34,220 --> 00:04:37,430
encontrar el índice del producto actual, por lo

48
00:04:37,430 --> 00:04:46,580
que el índice de producto podría ser un nombre constante al acceder a nuestros productos de usuario y allí con find index, que

49
00:04:46,580 --> 00:04:51,570
es un método Javascript incorporado, podemos encontrar El índice de un determinado elemento.

50
00:04:51,590 --> 00:04:57,440
Nuevamente, esto toma una función que se ejecuta en cada elemento de esa matriz y que necesita

51
00:04:57,440 --> 00:05:02,930
devolver verdadero para que tengamos un índice y allí miraré las ID y buscaré las ID

52
00:05:02,930 --> 00:05:05,330
donde sea igual a mi pid,

53
00:05:05,330 --> 00:05:11,520
mi acción pid porque si recuerdas cómo configuramos esa acción, para actualizar tenemos el campo pid aquí que

54
00:05:11,520 --> 00:05:13,980
contiene los ID de producto que estamos obteniendo.

55
00:05:13,980 --> 00:05:19,470
Así que estoy buscando ese producto y luego almaceno el índice de ese producto en la matriz de

56
00:05:19,620 --> 00:05:21,890
productos del usuario en el índice del producto

57
00:05:21,900 --> 00:05:27,720
aquí, ahora podemos crear un producto actualizado aquí que técnicamente es un nuevo objeto de producto pero, por supuesto,

58
00:05:27,720 --> 00:05:29,570
está prepoblado con algunos viejos datos,

59
00:05:29,670 --> 00:05:31,200
por ejemplo, conservamos el

60
00:05:31,230 --> 00:05:34,320
ID, por lo que tomamos medidas pid como valor aquí.

61
00:05:34,320 --> 00:05:40,080
También mantengo la identificación del propietario y para eso, puedo acceder a los productos de usuario estatales para el índice que acabamos

62
00:05:40,080 --> 00:05:46,070
de descubrir, por lo que para ese índice de producto,. ID de propietario, no cambiaré esto.

63
00:05:46,290 --> 00:05:48,800
Por supuesto, guardaré el nuevo

64
00:05:48,900 --> 00:05:59,430
título, así que aquí guardaré la acción. datos del producto. título, almacenaré el nuevo imageUrl, así que acción. datos del

65
00:05:59,430 --> 00:06:03,180
producto. imageUrl y yo almacenaremos

66
00:06:03,180 --> 00:06:11,190
una nueva descripción, entonces acción. datos del producto. descripción. Sin embargo, mencioné que el precio no debería ser editable, por

67
00:06:11,520 --> 00:06:24,750
lo que, como valor para esto, mantendré el precio original, por lo tanto, indique el índice de productos de los usuarios. precio aqui.

68
00:06:24,840 --> 00:06:30,150
Por cierto, eso también significa que nuestra acción no es del todo correcta, allí también espero un precio, no debería hacerlo porque no

69
00:06:30,150 --> 00:06:36,060
podemos ingresarlo en nuestras entradas de todos modos, no lo necesitamos, así que no deberíamos Lo esperamos aquí, no debemos reenviarlo como parte de los datos

70
00:06:36,390 --> 00:06:41,090
del producto para actualizar el producto, para un nuevo producto lo necesitamos, pero para la actualización, no lo hacemos.

71
00:06:41,500 --> 00:06:46,600
Entonces, con eso, tenemos nuestro producto actualizado con algunos datos nuevos y algunos datos antiguos,

72
00:06:46,600 --> 00:06:55,090
ahora necesitamos actualizar nuestro estado, por supuesto, y para eso, tenemos los productos de usuario actualizados donde al final copie mis productos de usuario existentes

73
00:06:55,210 --> 00:07:01,960
con esta sintaxis aquí para crear una copia y luego configuro productos de usuario actualizados para el índice de producto

74
00:07:01,960 --> 00:07:09,460
seleccionado igual al producto actualizado, por lo que reemplazo el producto en este índice con el nuevo producto actualizado en mi copia,

75
00:07:09,460 --> 00:07:15,790
no en la matriz original sino en mi copia. Necesito hacer lo mismo en los productos disponibles,

76
00:07:15,790 --> 00:07:20,770
pero primero necesito encontrar el índice porque ese índice aquí solo funciona para los

77
00:07:20,770 --> 00:07:25,230
productos del usuario, el índice en los productos disponibles es muy diferente, así

78
00:07:25,750 --> 00:07:32,200
que tengo mi disponible índice de producto aquí si desea llamarlo así, que generalmente tiene la misma lógica de

79
00:07:32,200 --> 00:07:37,330
selección, por lo que podemos copiar eso, pero por supuesto buscaré en la matriz de

80
00:07:37,420 --> 00:07:45,660
productos disponibles en lugar de la matriz de productos del usuario. Y ahora nuevamente, aquí podemos tener los productos disponibles

81
00:07:45,660 --> 00:07:53,280
actualizados donde copio mis productos disponibles estatales y luego establezco productos disponibles actualizados para el índice de

82
00:07:53,340 --> 00:08:02,110
producto dado igual, discúlpeme por el índice de producto disponible, por supuesto, igual al producto actualizado, para que Reemplazo mi

83
00:08:02,410 --> 00:08:07,810
producto existente con el producto actualizado tanto en los productos disponibles como

84
00:08:07,810 --> 00:08:15,030
en la matriz de productos de usuario. Bueno y ahora, solo tenemos que devolver nuestro nuevo

85
00:08:15,030 --> 00:08:23,490
estado, en primer lugar, copiar el existente y ahora configurar productos disponibles iguales a productos disponibles actualizados y establecer productos de usuario iguales a

86
00:08:23,490 --> 00:08:32,790
productos de usuario actualizados, así que para mis matrices actualizadas estoy configurando allí. Con eso, esperamos tener toda la lógica que necesitamos, ahora despachemos estos eventos desde

87
00:08:32,790 --> 00:08:38,880
el interior de la pantalla del producto agregado. Entonces, aquí tenemos que importar el envío de

88
00:08:38,880 --> 00:08:46,440
uso de React Redux e importar nuestras acciones, así que importa todo como acciones de productos desde la carpeta

89
00:08:46,530 --> 00:08:54,910
de la tienda, allí desde la carpeta de acciones y desde el archivo de productos y luego despacha estas cosas en

90
00:08:55,360 --> 00:09:01,060
el controlador de envío, por supuesto. Aquí, lo que enviamos depende de si estamos editando

91
00:09:01,150 --> 00:09:02,540
o agregando amd

92
00:09:02,650 --> 00:09:08,110
como mencioné, podemos averiguar cuál es el caso con la ayuda del producto editado, si está

93
00:09:08,110 --> 00:09:11,100
configurado, estamos editando, si no está configurado, estamos sumando.

94
00:09:11,100 --> 00:09:18,370
Entonces, aquí, en el controlador de envío, podemos agregar un if check y verificar si el producto editado, si está

95
00:09:18,460 --> 00:09:19,170
configurado,

96
00:09:19,300 --> 00:09:25,660
lo estamos editando, por lo que quiero enviar mi evento de actualización del producto, para eso, en primer

97
00:09:25,660 --> 00:09:33,650
lugar, yo necesitamos crear esa función de despacho con la ayuda de usar despacho y ahora con eso creado, allá abajo podemos

98
00:09:34,310 --> 00:09:39,410
llamar a productos de despacho actualizar el producto porque eso es lo que estamos

99
00:09:40,570 --> 00:09:42,700
haciendo aquí y ahora reenviar todos

100
00:09:42,700 --> 00:09:44,980
los datos que necesitamos aquí, que

101
00:09:45,130 --> 00:09:49,060
es mi ID de producto , esa es la identificación del

102
00:09:51,850 --> 00:09:59,020
producto que estamos editando, lo estamos extrayendo aquí y, por supuesto, además, también reenviamos el título, reenviamos la descripción, todas

103
00:09:59,050 --> 00:10:07,630
estas constantes de estado que tenemos aquí, nuestra imagenUrl y no el precio porque no lo necesito y, en el caso contrario, significa que

104
00:10:07,630 --> 00:10:09,060
estamos agregando, luego quiero

105
00:10:09,130 --> 00:10:13,560
enviar la acción de los productos. crear producto, aquí

106
00:10:13,660 --> 00:10:21,850
reenviamos título, descripción, imageUrl y también el precio y con eso, deberíamos tener una

107
00:10:21,900 --> 00:10:26,580
configuración donde esperamos poder agregar y editar productos.

108
00:10:26,640 --> 00:10:28,040
Así que

109
00:10:28,050 --> 00:10:36,060
guardemos esto y echemos un vistazo. Si ahora vamos al área de administración aquí y agregué esto y agrego

110
00:10:36,120 --> 00:10:43,460
un signo de exclamación aquí y también uno aquí en la descripción y presiono guardar, obtengo indefinido no es un objeto, evaluando el precio

111
00:10:43,460 --> 00:10:45,440
de los accesorios a fijo.

112
00:10:45,530 --> 00:10:49,540
Parece que perdí mi precio aquí al intentar actualizar esto.

113
00:10:49,850 --> 00:10:54,140
Bien, antes de arreglar esto, veamos si agregar un nuevo producto funciona.

114
00:10:54,260 --> 00:11:00,890
Si agrego un producto aquí con prueba, prueba que, por supuesto, no es una imageUrl válida, por

115
00:11:00,890 --> 00:11:06,750
lo que no veremos una imagen pero al menos tomaremos algo, también es una prueba.

116
00:11:06,830 --> 00:11:10,250
Si intentamos esto y presiono enviar, esto tampoco funciona, así

117
00:11:10,250 --> 00:11:13,220
que de alguna manera ahorrar el precio no

118
00:11:13,220 --> 00:11:19,700
funciona y creo que el problema está aquí, por supuesto, el problema aquí es que el precio es realmente

119
00:11:19,700 --> 00:11:24,890
una cadena aquí, pero debería ser un número, por lo que podemos convertirlo fácilmente en un

120
00:11:24,890 --> 00:11:33,580
número agregando un plus aquí antes de pasarlo para crear el producto, para actualizarlo, por otro lado, si echamos un vistazo a nuestro reductor de productos,

121
00:11:33,580 --> 00:11:36,790
normalmente debería mantener el precio que ya tenía .

122
00:11:36,850 --> 00:11:42,870
Entonces, veamos si eso más lo soluciona para agregar o si también hay un problema diferente, este fue un cambio que se requiere

123
00:11:42,880 --> 00:11:48,060
de todos modos, pero veamos si hay otro problema. Así que prueba, prueba, doce. Por

124
00:11:48,060 --> 00:11:54,330
favor ingresa solo números aquí, no un texto que actualmente podrías pero que lo rompería,

125
00:11:54,330 --> 00:12:02,950
prueba esto, presiona este botón, sí, eso no se ve tan mal, tenemos algún problema con la imagen aquí pero

126
00:12:02,950 --> 00:12:09,920
si nos desplazamos hacia abajo, en realidad aquí si descartamos esto, podemos ver aquí nuestro producto,

127
00:12:09,920 --> 00:12:14,030
por lo que falta el precio, por lo que

128
00:12:14,040 --> 00:12:18,290
hay algo mal allí y tampoco parece que guardemos la

129
00:12:18,390 --> 00:12:22,380
imagen correctamente, no solo porque no se muestra sino

130
00:12:22,380 --> 00:12:25,400
por esa advertencia que recibimos, pero en

131
00:12:25,740 --> 00:12:27,570
general, esto funciona.

132
00:12:27,570 --> 00:12:31,650
Sin embargo, por ejemplo, aquí si trato de actualizar y guardar esto, todavía recibimos un error, por

133
00:12:31,650 --> 00:12:33,320
lo que todavía hay algo mal.

134
00:12:33,360 --> 00:12:39,270
Entonces, una cosa que está mal está en las acciones, por supuesto, para actualizar el producto aquí, el tipo debe ser actualizar el producto

135
00:12:39,270 --> 00:12:41,100
y no crear el producto, de lo

136
00:12:41,100 --> 00:12:45,710
contrario, activaremos la acción incorrecta en el reductor, lo que explica el error de precio que obtuvimos allí.

137
00:12:45,720 --> 00:12:50,190
Entonces, esto tiene que ser un producto de actualización aquí para actualizar un producto como era de esperar.

138
00:12:50,400 --> 00:12:57,060
Entonces, ese es un problema, pero se puede encontrar otro gran problema en la pantalla del producto agregado. Uso mi método de devolución de llamada aquí para

139
00:12:57,060 --> 00:13:00,580
ajustar el controlador de envío correctamente y lo hago para

140
00:13:00,660 --> 00:13:03,480
evitar recreaciones innecesarias de las funciones.

141
00:13:03,480 --> 00:13:08,730
El problema es que inicialmente configuré esto para tener una matriz vacía como una lista de dependencias, lo que significa

142
00:13:08,730 --> 00:13:12,740
que esto nunca se vuelve a crear, lo que tenía sentido cuando solo teníamos acceso

143
00:13:13,230 --> 00:13:17,100
a la consola allí, pero ahora estamos haciendo cosas allí y ahora tenemos dependencias.

144
00:13:17,100 --> 00:13:22,710
En este momento, nunca vuelvo a crear esta función, lo que significa que nunca se recrea para sus valores actualizados.

145
00:13:22,710 --> 00:13:28,180
Entonces, cuando enviamos nuestro formulario, nunca tomamos en cuenta lo que ingresó el usuario.

146
00:13:28,200 --> 00:13:30,930
Entonces, en realidad ahora tenemos

147
00:13:31,020 --> 00:13:40,590
que especificar las dependencias aquí, la función de despacho pero, lo que es más importante, incluso, la identificación del producto, el título,

148
00:13:40,680 --> 00:13:49,380
la descripción y el imageUrl y, por supuesto, el precio. Ahora con eso, si guardamos esto, deberíamos estar bien y todos los

149
00:13:49,380 --> 00:13:50,880
problemas deberían desaparecer.

150
00:13:50,880 --> 00:13:52,220
Esperemos a que esto

151
00:13:52,290 --> 00:13:59,510
se vuelva a cargar, vaya al administrador ahora y comience a editar esto tal vez y ahora si agregamos un signo de exclamación en el

152
00:13:59,510 --> 00:14:05,660
título y en la descripción y guardamos esto y volvemos, vemos que aquí y si vamos a productos , también lo

153
00:14:05,720 --> 00:14:09,090
vemos aquí y en los detalles, también vemos ese signo de exclamación.

154
00:14:09,170 --> 00:14:12,910
Ahora, si volvemos a administrador y creamos

155
00:14:13,080 --> 00:14:15,200
un nuevo producto,

156
00:14:15,390 --> 00:14:21,790
prueba, prueba, doce, prueba esto y lo guardo y vuelvo, ahora

157
00:14:21,890 --> 00:14:26,780
esto también aparece allí. Por supuesto, la imagen no aparece

158
00:14:26,810 --> 00:14:31,480
porque no hemos ingresado una URL válida, pero todos los demás datos aparecen,

159
00:14:31,550 --> 00:14:35,410
por lo que esto generalmente funciona y, por supuesto, podría

160
00:14:35,410 --> 00:14:44,450
ingresar una imagenUrl válida y eso también se rompería, probémoslo rápidamente también. Entonces, volvamos a la sección de administración y agreguemos un estante aquí, tal

161
00:14:44,470 --> 00:14:53,970
vez, para eso seleccioné la URL de un estante que encontré en Internet para 199. 99, este es un buen

162
00:14:53,970 --> 00:15:00,870
estante como este. Si ahora guardamos esto y volvemos, se ve bien, aquí está nuestra

163
00:15:00,870 --> 00:15:05,260
imagen y también vemos eso aquí en la pantalla del producto y también podemos verlo aquí.

164
00:15:05,730 --> 00:15:07,070
Esto parece

165
00:15:07,080 --> 00:15:11,610
funcionar y, con eso, generalmente tenemos una configuración que funciona.

166
00:15:11,610 --> 00:15:16,410
Ahora hay cosas menores en las que quiero trabajar, por ejemplo, antes de eliminar, sería

167
00:15:16,410 --> 00:15:23,310
bueno tener un pequeño diálogo de confirmación y, además, quiero asegurarme de que cuando agreguemos o editemos un producto, cuando hagamos clic

168
00:15:23,400 --> 00:15:26,140
en guardar aquí, navegamos automáticamente hacia atrás.

169
00:15:26,130 --> 00:15:31,590
Entonces, estas son solo cosas menores, por supuesto, pero creo que son una buena final aquí en este módulo.