1
00:00:02,220 --> 00:00:06,440
Para la función de agregar al carrito, necesitaremos trabajar en dos cosas: una es,

2
00:00:06,450 --> 00:00:09,850
por supuesto, que podemos tener una pantalla de carrito, que tenemos

3
00:00:09,880 --> 00:00:17,250
un icono aquí en nuestro encabezado que nos lleva a la pantalla del carrito, donde podemos ver la suma total y los artículos del

4
00:00:17,250 --> 00:00:20,640
carrito y dónde tenemos ese botón de pedido ahora, pero diría

5
00:00:20,640 --> 00:00:26,580
que ese es el segundo paso porque el primer paso más importante es que agregamos la lógica para administrar

6
00:00:26,910 --> 00:00:33,030
los artículos del carrito y eso involucra a Redux. Para esto, agregaré un nuevo

7
00:00:33,040 --> 00:00:40,620
reductor, un segundo reductor que denominaré cart, cart. js y también un archivo de acciones y este es en

8
00:00:40,750 --> 00:00:43,280
realidad un archivo de acciones que completaremos.

9
00:00:43,330 --> 00:00:45,270
Lo haremos con el archivo de productos más tarde también

10
00:00:45,280 --> 00:00:52,250
una vez que nos sumerjamos en agregar productos, etc., pero por ahora, comencemos con la función de carrito. Entonces aquí en el

11
00:00:52,250 --> 00:00:55,010
carrito. js en la carpeta

12
00:00:55,250 --> 00:01:00,350
de reductores, configuraré mi estado inicial para ese segmento de carrito y nuevamente, son todos estos

13
00:01:00,350 --> 00:01:05,390
reductores separados y los estados que logran conformar esa tienda Redux total porque al final, eso

14
00:01:05,390 --> 00:01:11,420
es lo que luego combinas aquí con reducciones combinadas en un reductor de raíz y un gran estado al final.

15
00:01:11,520 --> 00:01:16,150
Solo tenemos estos subestados individuales para facilitar la administración de los datos.

16
00:01:16,230 --> 00:01:22,100
Entonces, aquí en el reductor de carrito, ¿cómo debería ser el estado de nuestro carrito?

17
00:01:22,500 --> 00:01:31,000
Bueno, nuestro carrito tendrá un montón de artículos, podría ser una matriz y una suma que inicialmente es cero, por lo que una cantidad total que podría decir,

18
00:01:31,360 --> 00:01:35,680
por supuesto, también podría nombrar esta cantidad total para que quede realmente claro de

19
00:01:35,680 --> 00:01:36,720
qué se trata.

20
00:01:36,730 --> 00:01:39,160
Estas son las dos cosas que componen mi carrito aquí y,

21
00:01:39,160 --> 00:01:45,460
como siempre, no puedo enfatizar esto lo suficiente, hay más de una forma de implementar esto. Entonces, si también desea administrar algunos otros datos aquí,

22
00:01:45,460 --> 00:01:47,350
definitivamente hágalo, no hay un

23
00:01:47,380 --> 00:01:48,480
enfoque único

24
00:01:48,490 --> 00:01:50,920
correcto o incorrecto, este es solo

25
00:01:50,920 --> 00:01:53,330
mi enfoque para construir esta aplicación.

26
00:01:53,410 --> 00:01:58,480
Ahora es importante que para este carrito aquí, quiero asegurarme de que si ya tenemos un artículo

27
00:01:58,590 --> 00:02:02,120
en el carrito, digamos la camisa roja y hago clic en el

28
00:02:02,440 --> 00:02:09,340
carrito por segunda vez, no agrego dos artículos a esta matriz, pero Todavía solo tengo un artículo allí y, en cambio, cada artículo en

29
00:02:09,340 --> 00:02:15,850
esa matriz de artículos debe ser un objeto donde administro, como la identificación del producto tal vez, donde tengo el título y

30
00:02:15,850 --> 00:02:18,940
la cantidad del artículo en el carrito, para que

31
00:02:18,970 --> 00:02:22,630
luego cambie a 2 si hago clic en él por segunda vez.

32
00:02:22,720 --> 00:02:31,960
Por lo tanto, también podría argumentar que los artículos tal vez no deberían ser una matriz, sino un objeto Javascript porque eso nos permite almacenar la

33
00:02:32,170 --> 00:02:37,930
ID del producto como una clave y el valor podría ser un objeto con el título,

34
00:02:38,220 --> 00:02:42,420
con la cantidad, con el precio y eso es solo una

35
00:02:42,470 --> 00:02:43,840
alternativa, también podría

36
00:02:43,840 --> 00:02:48,830
hacer todo esto con una matriz, pero ese es realmente el enfoque que usaré.

37
00:02:49,180 --> 00:02:54,190
Ahora, el reductor que exporto, por lo tanto, es un reductor que, por supuesto, obtiene un

38
00:02:54,190 --> 00:03:00,700
estado que tiene nuestro estado inicial como valor predeterminado y una acción como argumento que al final necesita devolver algunos datos.

39
00:03:01,150 --> 00:03:04,890
Entonces, al final, necesita devolver un nuevo estado que luego usa Redux.

40
00:03:04,900 --> 00:03:07,210
Ahora necesitamos una acción para continuar.

41
00:03:07,660 --> 00:03:15,610
Así que aquí exportaré una constante, un identificador de acción y nombraré este agregar al carrito, el identificador depende de

42
00:03:15,610 --> 00:03:22,790
usted, iré con agregar al carrito de esta manera y en el archivo de acciones, crearé tal

43
00:03:22,780 --> 00:03:24,490
función creadora de acciones.

44
00:03:24,610 --> 00:03:26,620
Entonces, aquí hay otra

45
00:03:26,650 --> 00:03:34,800
constante que nombraré agregar al carrito que recibe, digamos, el objeto de producto completo que quiero agregar, para que pueda extraer la

46
00:03:34,800 --> 00:03:40,260
información que necesito y luego aquí, tenemos que devolver un objeto de acción que tiene

47
00:03:40,260 --> 00:03:44,730
un tipo que se agrega al carrito y luego a nuestro producto.

48
00:03:44,730 --> 00:03:50,010
Esta es solo una forma de crear estas acciones que nos hace muy simple hacerlo dentro

49
00:03:50,010 --> 00:03:51,240
de nuestros componentes.

50
00:03:51,240 --> 00:03:56,970
Entonces, al final, en el reductor de carrito, en todos los reductores en realidad, pero en el lugar de los reductores de

51
00:03:57,310 --> 00:03:58,010
carrito donde

52
00:03:58,020 --> 00:04:06,180
nos importa, obtendremos esa acción de agregar al carrito, por lo que aquí debemos cambiar el tipo de acción y manejar el caso que es agregar al carrito y, por lo

53
00:04:06,360 --> 00:04:07,950
tanto, debe importar agregar al carrito

54
00:04:07,950 --> 00:04:14,050
desde esa carpeta de acciones y allí, desde el archivo del carrito. Ahora, y por cierto importante, esta acción cuando se envía

55
00:04:14,070 --> 00:04:19,200
se recibe en todos los reductores, pero si no lo maneja con un caso separado, su caso

56
00:04:19,200 --> 00:04:26,460
predeterminado se activará, lo que normalmente debería devolver su porción de estado actual para este reductor, que significa que el segmento de estado

57
00:04:26,460 --> 00:04:31,100
para este reductor no ha cambiado. Sin embargo, aquí en el reductor de

58
00:04:31,140 --> 00:04:34,550
carrito, por supuesto, quiero cambiar mi estado, por lo tanto,

59
00:04:34,710 --> 00:04:36,750
me encargo de agregar al carrito

60
00:04:36,750 --> 00:04:39,660
aquí y ahora en agregar al carrito, ¿qué

61
00:04:39,660 --> 00:04:41,240
debería suceder allí?

62
00:04:42,280 --> 00:04:50,720
Bueno, obtenemos nuestro producto adicional, podemos sacarlo de la acción porque allí en la acción, tendremos una clave de producto, eso es lo que

63
00:04:50,720 --> 00:04:51,750
acabamos de

64
00:04:51,770 --> 00:04:56,040
configurar aquí en el carrito de acciones. js, así que obtendré nuestro producto y

65
00:04:56,060 --> 00:05:00,710
lo almacenaré en un producto agregado constante aquí con el que podemos trabajar ahora y tendremos

66
00:05:01,920 --> 00:05:08,910
el precio de nuestro producto aquí, que por supuesto es producto agregado. precio y tendremos el título de nuestro producto

67
00:05:08,940 --> 00:05:16,170
que se agrega Producto. título. Antes de continuar, definamos cómo es

68
00:05:16,170 --> 00:05:21,460
el artículo del carrito, para que se vea cómo almacenamos aquí, el valor que tenemos allí.

69
00:05:21,650 --> 00:05:30,550
Así que iré a la carpeta de mis modelos y agregaré un artículo de carrito. archivo js aquí y luego agregue una clase de elemento

70
00:05:30,580 --> 00:05:32,650
de carrito que recibe un

71
00:05:32,890 --> 00:05:39,370
constructor y antes de que lo olvide nuevamente, que debe exportarse aquí y ahora en

72
00:05:39,370 --> 00:05:46,750
ese constructor, espero obtener la cantidad del producto que estamos a punto de agregar, el precio del

73
00:05:47,020 --> 00:05:56,950
producto, el título del producto y la suma de este artículo, si tenemos tres veces la camisa roja, nuestra suma sería tres veces

74
00:05:56,950 --> 00:05:58,980
29. 99,

75
00:05:59,110 --> 00:06:01,690
aproximadamente alrededor de $ 90.

76
00:06:01,690 --> 00:06:10,220
Ahora, lo que no obtengo aquí es el ID del producto porque lo usaré como una clave dentro de mi objeto aquí que contiene los elementos

77
00:06:10,220 --> 00:06:13,440
y luego se aclarará una vez que lo implementemos.

78
00:06:14,150 --> 00:06:17,690
Entonces, aquí en el artículo del carrito, solo

79
00:06:17,840 --> 00:06:22,890
almaceno todos los datos que recibo, la cantidad, el precio del producto y

80
00:06:22,900 --> 00:06:34,200
tengo esos datos que necesito enviar más tarde, así que el título del producto y la suma, como esta y ahora de vuelta en el reductor, por supuesto,

81
00:06:34,260 --> 00:06:41,520
podemos importar esta clase de artículo de carrito desde la carpeta de modelos y desde el artículo de

82
00:06:41,520 --> 00:06:47,880
carrito aquí y ahora de nuevo en esa caja de agregar al carrito, primero que nada

83
00:06:47,980 --> 00:06:52,680
necesitamos saber si ese producto ya es parte de nuestros artículos.

84
00:06:52,680 --> 00:06:59,370
Ahora, como mencioné, agregaré cada nuevo producto agregando una nueva clave a los artículos, que es la ID de ese producto, ya que

85
00:06:59,370 --> 00:07:01,020
es único, siempre tenemos cada

86
00:07:01,020 --> 00:07:06,870
clave solo una vez y luego el valor será un artículo del carrito, ya que solo Lo definí en modelos

87
00:07:07,110 --> 00:07:12,990
y, por lo tanto, sé que si la identificación del producto que obtengo aquí ya es una clave de los

88
00:07:13,170 --> 00:07:17,050
artículos, entonces este ya tiene nuestro artículo como un artículo de carrito.

89
00:07:17,070 --> 00:07:26,190
Así que aquí, simplemente podemos verificar si hay elementos para Producto agregado. La identificación existe, por lo que si eso devuelve algo verdadero,

90
00:07:26,200 --> 00:07:36,290
por lo que no está indefinido, entonces ya tenemos el artículo en el carrito, lo cual está bien, pero solo tenemos que cambiar

91
00:07:36,290 --> 00:07:38,800
la cantidad, de lo contrario,

92
00:07:38,860 --> 00:07:41,600
tendremos que agregar un artículo nuevo.

93
00:07:41,600 --> 00:07:45,920
Comencemos con el caso else porque ese es el caso que encontraremos por

94
00:07:45,920 --> 00:07:47,170
primera vez cuando

95
00:07:47,330 --> 00:07:51,910
agreguemos algo por primera vez, allí necesitamos un nuevo artículo de carrito, lo creo

96
00:07:51,920 --> 00:07:58,460
con la nueva palabra clave y la clase de artículo de carrito que definí y allí , necesitamos proporcionar la cantidad

97
00:07:58,520 --> 00:08:00,530
que, por supuesto, es uno si

98
00:08:00,920 --> 00:08:08,840
solo agregamos un nuevo artículo, necesitamos proporcionar el precio del producto, el título del producto aquí y la suma y la suma, por supuesto, inicialmente

99
00:08:09,050 --> 00:08:11,580
es solo el precio de nuestro producto, ¿verdad?

100
00:08:11,600 --> 00:08:17,810
Porque si agregamos un artículo de ese precio, entonces la suma de este artículo de carrito es el precio de nuestro producto y ahora

101
00:08:17,810 --> 00:08:21,200
este nuevo artículo de carrito debe agregarse a nuestros artículos de carrito aquí.

102
00:08:24,100 --> 00:08:29,050
Entonces, aquí, devolvemos una copia de nuestro estado y establecemos elementos

103
00:08:29,220 --> 00:08:38,290
iguales a un nuevo objeto donde copie todos mis elementos de estado existentes, de modo que copie mi objeto

104
00:08:38,290 --> 00:08:39,630
de elementos

105
00:08:39,640 --> 00:08:47,200
existente aquí y luego agregue una nueva clave con esta sintaxis dinámica con los corchetes donde

106
00:08:47,200 --> 00:08:55,280
se agrega el nombre de la clave Producto. ID, eso es lo que quise decir con la ID del producto que es la clave

107
00:08:55,340 --> 00:08:59,190
en nuestro objeto de artículos y el valor es nuestro nuevo artículo de carrito.

108
00:08:59,390 --> 00:09:04,730
Esto es solo una sintaxis que debe conocer, es Javascript vainilla, así es como puede agregar o acceder aquí arriba

109
00:09:04,730 --> 00:09:11,570
a una propiedad dinámica en lugar de codificarla como una cadena aquí. Por cierto, esto aquí, por supuesto,

110
00:09:11,600 --> 00:09:20,170
también debería ser estatal. artículos, mi error. Entonces, con esto, deberíamos agregar un nuevo artículo de carrito aquí.

111
00:09:20,230 --> 00:09:24,790
Ahora, si ya tiene un artículo en el carrito, entonces, por supuesto, no creamos

112
00:09:24,790 --> 00:09:31,480
un artículo nuevo, sino que queremos actualizar el existente. Así que tendré mi artículo de carrito actualizado

113
00:09:31,480 --> 00:09:35,470
aquí y para eso, sigo creando un nuevo artículo de

114
00:09:35,800 --> 00:09:46,960
carrito pero lo rellenaré previamente con algunos datos existentes, por ejemplo, la cantidad aquí. Obtenemos eso de los artículos estatales para la ID del producto agregado porque eso ya debería ser parte de

115
00:09:46,960 --> 00:09:52,150
los artículos estatales, estamos verificando esto aquí y esto tendrá una clave de cantidad, por supuesto, porque dicho

116
00:09:52,150 --> 00:09:57,730
artículo aquí en mis artículos es solo de escriba los artículos del carrito, para que tenga una propiedad de

117
00:09:57,730 --> 00:09:58,480
cantidad y

118
00:09:58,600 --> 00:10:02,020
simplemente agreguemos uno a eso porque estamos agregando un nuevo artículo del

119
00:10:02,080 --> 00:10:09,560
carrito, por lo que tenemos que incrementar esto. Ahora el artículo del carrito como segundo argumento toma el precio del producto. Luego, por supuesto, ya que crearemos la

120
00:10:09,570 --> 00:10:14,540
aplicación de modo que el precio nunca cambie, lo que agregaría mucha complejidad aquí, tendríamos

121
00:10:14,550 --> 00:10:19,860
que administrar el carrito de una manera totalmente diferente en ese caso, tendríamos que almacenar cada artículo

122
00:10:19,890 --> 00:10:25,350
del carrito como un lista de transacciones para este artículo del carrito que es demasiado para esto aquí.

123
00:10:25,350 --> 00:10:30,760
Entonces, dado que esto nunca cambia, ya que el precio nunca cambia, al final podemos simplemente tomar

124
00:10:30,760 --> 00:10:36,930
el precio de producción que estamos obteniendo o tomar el precio existente que almacenamos antes porque eso nuevamente nunca cambiará.

125
00:10:36,930 --> 00:10:42,150
El título puede cambiar y quiero almacenar el título más reciente aquí, así que definitivamente tomaré uno del

126
00:10:42,150 --> 00:10:46,620
producto que estamos obteniendo aquí en lugar de mi instantánea anterior y, por último, pero no

127
00:10:46,710 --> 00:10:51,480
menos importante, el último valor aquí, mi suma total para este artículo del carrito, esa es, por

128
00:10:51,480 --> 00:10:59,520
supuesto, la suma actual, así que accedo a los artículos de estado para la ID aquí, suma más el precio del producto porque agregamos un artículo nuevo aquí, tenemos

129
00:10:59,520 --> 00:11:06,660
que agregar el precio multiplicado por 1 a la suma actual. Ese es el artículo del

130
00:11:06,660 --> 00:11:08,570
carrito actualizado.

131
00:11:08,580 --> 00:11:16,750
Ahora con eso, podemos devolver nuestro nuevo segmento de estado copiando los estados anteriores y estableciendo elementos iguales y ahora importantes,

132
00:11:16,930 --> 00:11:26,460
a un objeto donde copiamos el estado. artículos pero donde ahora configuramos nuevamente el producto agregado. ID y sí, esto ya existe, pero

133
00:11:26,460 --> 00:11:33,310
con eso simplemente lo anulamos con nuestro artículo de carrito actualizado, por lo que hacemos la misma

134
00:11:33,310 --> 00:11:37,070
actualización que hacemos allí. Ahora que, sin embargo,

135
00:11:37,100 --> 00:11:40,150
no es todo lo que necesitamos hacer, también

136
00:11:40,250 --> 00:11:43,750
necesitamos cambiar la cantidad total porque eso, por supuesto, cambia.

137
00:11:43,940 --> 00:11:52,420
Entonces, cuando agregamos un artículo por primera vez, la cantidad total debería ser básicamente nuestra cantidad total anterior, por lo tanto, indique la

138
00:11:52,430 --> 00:11:57,530
cantidad total más el precio del producto y es lo mismo si agregamos

139
00:11:57,530 --> 00:12:04,910
un artículo a un carrito existente o cuando ya existe allí porque, al final, nuestro total siempre es el total

140
00:12:04,910 --> 00:12:10,130
anterior más el precio, porque siempre agregamos un artículo de ese producto, así es

141
00:12:10,130 --> 00:12:12,190
como funcionará esta aplicación.

142
00:12:12,200 --> 00:12:14,480
Entonces, nuestra declaración de actualización aquí

143
00:12:14,480 --> 00:12:18,920
es casi la misma, lo único que difiere es cómo creamos ese artículo del carrito,

144
00:12:18,920 --> 00:12:24,110
por lo tanto, por supuesto, también podemos reutilizar este código, moverlo fuera del bloque if else y en

145
00:12:24,110 --> 00:12:27,590
lugar de tener dos constantes diferentes aquí , podemos crear una variable

146
00:12:30,670 --> 00:12:33,150
antes de ingresar el enunciado if, actualizado o

147
00:12:33,190 --> 00:12:36,990
un nuevo artículo del carrito tal vez, ese podría ser un nombre porque

148
00:12:37,090 --> 00:12:44,590
no sabemos cuál será de antemano y luego aquí en la rama if aquí, configuramos actualizado o nuevo artículo de carrito para este artículo de carrito

149
00:12:44,590 --> 00:12:49,900
actualizado, aquí, por otro lado, lo configuramos para este nuevo artículo de carrito y aquí, siempre usamos el

150
00:12:49,930 --> 00:12:54,270
artículo de carrito actualizado o nuevo y con eso, tenemos un poco de reutilización de

151
00:12:54,400 --> 00:13:00,610
código aquí y no repetirnos lo que siempre es bueno. Otra nota al margen, copiar el estado aquí, por

152
00:13:00,610 --> 00:13:04,420
supuesto, siempre es redundante porque siempre establece los artículos y la cantidad total.

153
00:13:04,420 --> 00:13:09,520
Entonces, si siempre tiene estos dos campos aquí y siempre cambia los dos, no necesita

154
00:13:09,520 --> 00:13:15,940
copiar el estado existente, si alguna vez introduce otro dato en su segmento de estado aquí que no cambia

155
00:13:15,940 --> 00:13:20,680
aquí sin embargo, debe copiar su estado anterior para no perder esos datos

156
00:13:20,680 --> 00:13:21,150
adicionales.

157
00:13:21,190 --> 00:13:26,470
Por lo tanto, aquí dejaré esa funcionalidad de copia aunque técnicamente no la necesitemos aquí, pero

158
00:13:26,470 --> 00:13:30,750
si alguna vez debemos cambiar nuestro estado donde está guardado y no nos

159
00:13:31,030 --> 00:13:34,310
olvidamos de copiarlo y, por lo tanto, perdemos datos.

160
00:13:34,330 --> 00:13:36,190
Bueno, hubo mucho trabajo, con

161
00:13:36,190 --> 00:13:38,300
eso podemos comenzar a enviar esta acción

162
00:13:38,320 --> 00:13:42,130
y, por supuesto, quiero enviarla desde la descripción general del producto y los

163
00:13:42,190 --> 00:13:45,650
detalles del producto porque en ambas pantallas, he agregado botones al carrito.

164
00:13:45,710 --> 00:13:50,890
Entonces, comencemos en la pantalla de descripción general de los productos, allí para despachar

165
00:13:50,890 --> 00:13:52,380
las acciones de

166
00:13:52,600 --> 00:14:00,880
Redux necesitamos incluir el gancho de despacho de uso aquí, con eso aquí simplemente podemos obtener acceso a esta función de despacho llamando

167
00:14:00,880 --> 00:14:08,410
al despacho de uso como este y ahora cuando hacemos clic en Agregar aquí abajo, podemos enviar nuestra acción aquí

168
00:14:08,410 --> 00:14:13,330
y, por supuesto, en lugar de usar funciones en línea aquí, podría tener

169
00:14:13,480 --> 00:14:15,930
funciones almacenadas en constantes separadas dentro

170
00:14:16,090 --> 00:14:24,700
de su componente funcional aquí, como alternativa, me limitaré a las funciones en línea para ahora y voy a importar todas mis acciones aquí

171
00:14:24,790 --> 00:14:32,080
como acciones de carrito desde la carpeta de la tienda y allí, la carpeta de acciones, el archivo del carrito.

172
00:14:32,080 --> 00:14:37,060
Ahora, esta es una sintaxis de importación que combina todas las exportaciones del archivo en un

173
00:14:37,060 --> 00:14:40,020
solo objeto, solo tenemos una exportación aquí, por lo

174
00:14:40,030 --> 00:14:42,610
tanto, también podría apuntar a esa exportación

175
00:14:42,610 --> 00:14:46,630
específica, luego tendremos múltiples exportaciones y, por lo tanto, usaré este enfoque.

176
00:14:46,630 --> 00:14:49,750
Entonces aquí, luego despachamos la acción del carro.

177
00:14:49,930 --> 00:14:55,400
agregue al carrito y esta es una función que tenemos que ejecutar, esta es nuestra función de creador de

178
00:14:55,400 --> 00:14:57,050
acción y esto como argumento

179
00:14:57,430 --> 00:15:05,270
toma nuestro producto, por lo que al final aquí, tenemos que pasar itemData. artículo que es solo nuestro producto aquí en la pantalla de detalles

180
00:15:05,270 --> 00:15:06,330
del producto.

181
00:15:06,410 --> 00:15:12,850
Por lo tanto, hacemos exactamente lo mismo, importamos el despacho de uso de React Redux, por lo tanto, aquí

182
00:15:12,890 --> 00:15:17,560
podemos obtener acceso a la función de despacho llamando al despacho de uso

183
00:15:18,050 --> 00:15:23,990
y luego para este botón aquí en la función en línea o en una función con nombre

184
00:15:24,440 --> 00:15:26,330
separada si así lo desea

185
00:15:26,360 --> 00:15:31,490
, puede llamar al despacho, ahora necesitamos importar nuestras acciones y usaré la misma sintaxis

186
00:15:31,490 --> 00:15:42,190
que antes, donde importo todo como acciones de carrito desde la carpeta de la tienda, la carpeta de acciones, el archivo del carrito y ahora las acciones del carrito, llame a

187
00:15:42,190 --> 00:15:48,630
agregar a carrito aquí y reenviar el producto seleccionado que es nuestro producto que queremos agregar al carrito aquí.

188
00:15:48,820 --> 00:15:54,190
Con suerte, se envían acciones para que el artículo se agregue al carrito, pero por supuesto en este

189
00:15:54,190 --> 00:15:56,040
momento no podemos confirmar esto.

190
00:15:56,110 --> 00:16:04,390
Bueno, en realidad podemos. Puede activar el depurador React Native y no lo he usado

191
00:16:04,990 --> 00:16:12,010
antes, pero allí, ahora puede presionar comando o control t para abrir una nueva pestaña, luego confirmar esta

192
00:16:15,030 --> 00:16:15,660
importación

193
00:16:19,500 --> 00:16:20,520
aquí, y

194
00:16:23,560 --> 00:16:30,790
luego ir a sus aplicaciones y allí, abrir el menú de depuración en iOS con comando D, en Android

195
00:16:35,000 --> 00:16:43,990
con control o comando M y haga clic en depurar Javascript remoto. Ahora el mío se abrió en el puerto 19003 en realidad, así que

196
00:16:43,990 --> 00:16:45,290
abrí el depurador

197
00:16:45,300 --> 00:16:52,120
React Native en el puerto incorrecto, seleccióneme nuevamente presione el comando T o control T en el depurador y elija 19003,

198
00:16:52,120 --> 00:17:00,460
use cualquier puerto abierto para usted en Chrome, haga clic en confirmar y ahora se conecta a su aplicación React en ejecución aquí en el

199
00:17:01,210 --> 00:17:05,550
depurador, asegúrese de cerrar su depurador de Chrome y luego vuelva a cargar

200
00:17:05,590 --> 00:17:09,630
su aplicación, ahora esto debería conectarse aquí y ahora no solo puede

201
00:17:09,640 --> 00:17:11,310
inspeccionar su aplicación aquí como

202
00:17:11,410 --> 00:17:11,940
lo

203
00:17:11,980 --> 00:17:17,950
expliqué anteriormente, no, también puede eche un vistazo a la parte de arriba y ese es su depurador

204
00:17:17,950 --> 00:17:22,200
de Redux, allí puede ver lo que Redux está haciendo por usted.

205
00:17:22,280 --> 00:17:28,620
Lo único que tiene que hacer para que esto funcione es instalar un nuevo paquete

206
00:17:28,660 --> 00:17:34,160
con npm install --save dev porque es una dependencia de desarrollo que solo

207
00:17:34,160 --> 00:17:40,520
necesitamos durante el desarrollo y allí, instale la extensión de herramientas de desarrollo de Redux, vaya

208
00:17:40,650 --> 00:17:44,870
a su aplicación . js a partir de

209
00:17:47,350 --> 00:17:50,010
entonces y luego importar desde esta

210
00:17:50,010 --> 00:17:56,280
extensión de herramientas de desarrollo de Redux. Puede importar componer con herramientas de desarrollo desde allí y esa es

211
00:17:56,300 --> 00:18:00,050
una función que pasa para crear la tienda como un segundo argumento, simplemente puede

212
00:18:00,090 --> 00:18:03,260
ejecutarla allí de esta manera. Ahora, por cierto, este es

213
00:18:03,260 --> 00:18:04,530
el código, esta

214
00:18:04,560 --> 00:18:10,020
importación y este uso que debe eliminar antes de implementar su aplicación porque esto es solo algo que debe

215
00:18:10,020 --> 00:18:14,160
ejecutarse durante el desarrollo, no en su aplicación de producción, debe eliminar eso antes

216
00:18:14,160 --> 00:18:20,580
de implementar su aplicación pero durante el desarrollo, eso está bien. Y con eso agregado, si ahora guarda esto, en realidad

217
00:18:20,580 --> 00:18:26,940
verá que aquí en este Inspector de Redux, verá que se envía una acción de inicio, no lo había visto antes.

218
00:18:26,940 --> 00:18:30,560
Esa es una acción que se envía automáticamente cuando se inicia la aplicación.

219
00:18:30,570 --> 00:18:35,670
Si ahora hago clic en el carrito aquí, también verá la acción agregar al

220
00:18:35,670 --> 00:18:41,990
carrito y ahora aquí, puede ver detalles sobre esa acción, como los datos que se adjuntaron y

221
00:18:41,990 --> 00:18:48,120
sobre su estado aquí y allá, por ejemplo, esto ¿Cuál es el estado de mi producto y

222
00:18:48,590 --> 00:18:50,380
dónde está mi carrito?

223
00:18:50,670 --> 00:18:54,840
Bueno, por supuesto que falta porque, aunque tenemos el reductor en la acción configurada, en la aplicación. archivo js, en reductores

224
00:18:54,840 --> 00:18:58,660
combinados, no estamos incluyendo el estado del carrito.

225
00:18:58,740 --> 00:19:07,110
Entonces, importamos el reductor de carrito. / StoreReducers / cart y ahora con eso importado, podemos agregarlo a nuestro

226
00:19:07,440 --> 00:19:13,890
objeto de reductores combinados y ahora allí, agregamos un segmento de carrito por ejemplo, apuntamos al reductor de carrito y, por

227
00:19:13,890 --> 00:19:20,560
lo tanto, ahora esto se incluye en nuestra tienda Redux. Con eso, si ahora espera a que esto se vuelva

228
00:19:20,560 --> 00:19:25,830
a cargar y vuelva a hacer clic en el carrito, ahora en esta acción de agregar al carrito,

229
00:19:25,830 --> 00:19:30,960
en el estado, verá que ahora hay un segmento de carrito y ahora ve que hay una

230
00:19:30,990 --> 00:19:35,700
cantidad total, ves que hay un artículo con la clave P1 que es nuestro producto con

231
00:19:35,710 --> 00:19:43,900
una cantidad de 1, ese precio, la suma de esto y si ahora hago clic en el carrito por segunda vez aquí, hay otra acción enviada y si

232
00:19:43,900 --> 00:19:48,790
tenemos un Mire el estado después de esta acción, ahora vemos, enfriar solo un artículo, pero ahora

233
00:19:48,790 --> 00:19:52,620
con la cantidad dos, el precio del producto por artículo es esto, pero

234
00:19:52,630 --> 00:19:54,030
la suma es esta.

235
00:19:54,190 --> 00:19:55,120
Esta es

236
00:19:55,120 --> 00:19:57,760
la camisa, si ahora despacho la alfombra azul también,

237
00:19:57,760 --> 00:20:02,590
tenemos que agregarla al carrito una vez más y allí en el estado, ahora vemos que

238
00:20:02,590 --> 00:20:04,190
hay dos elementos allí, P1

239
00:20:04,270 --> 00:20:09,930
y P2, P1 no ha cambiado pero P2 ahora se agregó y la cantidad total también me parece bien.

240
00:20:09,940 --> 00:20:16,150
Así que esto parece funcionar y así es como puede ver su estado de Redux mientras su aplicación se está ejecutando

241
00:20:16,240 --> 00:20:17,140
sin mostrarla aquí.

242
00:20:17,140 --> 00:20:21,610
Ahora, por supuesto, también queremos mostrarlo visualmente, pero esta es una buena manera de ver su

243
00:20:21,610 --> 00:20:25,120
estado detrás de escena con la ayuda del depurador React Native.

244
00:20:25,120 --> 00:20:30,010
Ahora lo cerraremos aquí porque ralentiza un poco la aplicación y, por lo tanto, aquí

245
00:20:30,010 --> 00:20:35,230
en el menú de depuración, también detendré mi depuración remota y cerraré el inspector aquí por completo.

246
00:20:35,260 --> 00:20:40,660
También de vuelta en la aplicación. js, me deshaceré de la composición con herramientas de

247
00:20:40,660 --> 00:20:42,000
desarrollo aquí para no

248
00:20:42,070 --> 00:20:47,020
olvidarlo más tarde, pero siempre puede agregar esto aquí o dejarlo aquí mientras está desarrollando para que

249
00:20:47,020 --> 00:20:48,380
pueda mirar en su tienda.

250
00:20:48,460 --> 00:20:51,010
La conclusión principal para nosotros aquí es que esto

251
00:20:51,010 --> 00:20:57,280
parece funcionar y con eso funciona, por supuesto, ahora podemos trabajar en agregar un botón de acción aquí al encabezado y asegurarnos de

252
00:20:57,280 --> 00:21:03,430
que podemos ir a la página del carrito desde eso o con la ayuda de eso. botón de acción para que en la

253
00:21:03,430 --> 00:21:06,220
página del carrito, podamos mostrar la información de nuestro carrito.