1
00:00:02,270 --> 00:00:07,520
Por lo tanto, almacenar es excelente, buscar también sería bueno y, al final, quiero asegurarme de que, por

2
00:00:07,520 --> 00:00:10,510
ejemplo, cuando visitamos la pantalla de descripción general de los

3
00:00:10,580 --> 00:00:15,200
productos, simplemente lleguemos al servidor y obtengamos todos los productos desde allí, de modo que en

4
00:00:15,290 --> 00:00:16,510
esta pantalla ,

5
00:00:16,550 --> 00:00:19,390
cada vez que lo visitamos, cargamos los últimos productos.

6
00:00:19,400 --> 00:00:22,500
Ahora, para eso, debemos enviar una solicitud HTTP desde allí

7
00:00:22,520 --> 00:00:28,250
y, por lo tanto, al final lo que quiero hacer es enviar una nueva acción de Redux que llegue al servidor,

8
00:00:28,250 --> 00:00:35,590
obtenga mis productos desde allí y luego configure los productos en mi tienda Así que necesito una nueva acción aquí,

9
00:00:35,620 --> 00:00:43,060
establecer productos, que no necesitaba antes porque solo trabajamos con productos ficticios, pero ahora ese ya

10
00:00:43,060 --> 00:00:50,660
no es el caso, así que los productos establecidos ahora deberían enviarse y necesitaré un nuevo creador

11
00:00:50,660 --> 00:00:58,110
de acciones aquí que nombraré para buscar productos. Para esto no tengo un identificador porque nunca enviaré esto como

12
00:00:58,110 --> 00:01:01,310
una acción que debería llegar al reductor, en cambio,

13
00:01:01,310 --> 00:01:06,110
solo será mi creador de acciones con el código asíncrono con la solicitud HTTP.

14
00:01:06,110 --> 00:01:12,950
No necesitará ningún argumento, pero gracias a Redux Thunk, devuelve una función que obtiene esa función de envío como argumento

15
00:01:13,070 --> 00:01:16,470
y, al final, quiero enviar un objeto de acción

16
00:01:16,490 --> 00:01:23,460
donde el tipo es productos establecidos y donde quiero reenviar mi productos pero, por supuesto, eso no debería ser una

17
00:01:23,480 --> 00:01:30,490
matriz vacía, sino los productos que obtengo de mi API. Por lo tanto, podemos hacer una copia de este

18
00:01:30,490 --> 00:01:38,610
código aquí, incluida la parte de despacho asíncrono aquí, hasta llegar a donde obtenemos los datos de respuesta, copiar eso

19
00:01:38,610 --> 00:01:40,590
desde crear producto y reemplazar

20
00:01:40,590 --> 00:01:47,810
esta parte aquí con él y ahora lo que hacemos es Enviamos una solicitud a la misma

21
00:01:47,970 --> 00:01:52,530
URL que antes, lo que tiene sentido porque es donde se

22
00:01:52,530 --> 00:01:54,380
almacenan los productos.

23
00:01:54,390 --> 00:01:58,650
Sin embargo, ahora quiero establecer una solicitud de obtención y ese es realmente el valor predeterminado

24
00:01:58,740 --> 00:02:04,380
cuando usamos fetch, por lo que no necesitamos configurar esto. Para una solicitud de obtención, tampoco necesita establecer ningún encabezado y

25
00:02:04,380 --> 00:02:04,860
no

26
00:02:04,890 --> 00:02:09,150
puede establecer un cuerpo, por lo que en realidad aquí, podemos deshacernos por completo de este segundo

27
00:02:09,150 --> 00:02:12,020
argumento en la búsqueda, simplemente enviamos una solicitud de búsqueda como esta.

28
00:02:12,210 --> 00:02:18,000
Ahora la respuesta recuperará nuestros datos, pero ahora hay una característica importante sobre el formato

29
00:02:18,000 --> 00:02:21,880
de esos datos y es mejor si simplemente vemos eso.

30
00:02:21,900 --> 00:02:28,470
Permítanme que la consola registre los datos de respuesta aquí y comente esto por el momento o podemos dejarlo allí, no hace

31
00:02:28,470 --> 00:02:29,680
ningún daño, tampoco

32
00:02:29,700 --> 00:02:32,050
hace nada útil, no estamos manejando esto en

33
00:02:32,100 --> 00:02:37,200
el reductor todavía, pero registremos esto y ahora vayamos a la pantalla de resumen de productos y

34
00:02:37,200 --> 00:02:44,230
asegurémonos de que allí, despachemos esta acción de recuperación de productos. Ahora, afortunadamente, ya tengo acceso a la función de envío

35
00:02:44,230 --> 00:02:48,670
de Redux allí en la descripción general de los productos, por lo que

36
00:02:48,850 --> 00:02:55,210
ahora solo necesito agregar un efecto de uso para poder disparar esto cada vez que se carga este componente.

37
00:02:55,210 --> 00:03:04,760
Entonces, aquí, puedo agregar el efecto de uso y en mi función aquí, puedo llamar al despacho y ahora comunicarme con

38
00:03:04,790 --> 00:03:08,510
las acciones de mi producto que, por lo

39
00:03:08,510 --> 00:03:22,210
tanto, necesito importar como acciones de productos de acciones de la tienda productos, como este, que deberían ser acciones y ahora usar las acciones de productos aquí para disparar mi acción

40
00:03:22,250 --> 00:03:29,240
de obtención de productos que al final hará esta solicitud HTTP y este efecto debería ejecutarse

41
00:03:29,240 --> 00:03:36,260
cada vez que se cargue mi componente. Entonces, puedo agregar una matriz vacía y, de hecho, agregar mi

42
00:03:36,260 --> 00:03:38,300
única dependencia que tengo, que es

43
00:03:38,310 --> 00:03:44,070
despachar, aquí es la única dependencia que definimos dentro de nuestro componente, para que esto nunca vuelva a ejecutarse.

44
00:03:44,150 --> 00:03:48,350
El único momento en que se ejecutará es cuando se cargue este componente y ese

45
00:03:48,410 --> 00:03:49,830
es exactamente el caso,

46
00:03:49,850 --> 00:03:52,950
cada vez que visite la pantalla, quiero activar este efecto aquí.

47
00:03:53,270 --> 00:03:57,410
Entonces, si ahora guardo esto, guardemos esto y ahora mientras se carga,

48
00:03:57,440 --> 00:04:03,780
ves aquí en el registro, esto es lo que sucedió aquí tanto en Android como en iOS, por eso

49
00:04:03,790 --> 00:04:05,520
lo veo dos veces.

50
00:04:05,560 --> 00:04:07,460
Esto es lo que obtuve

51
00:04:07,510 --> 00:04:09,900
al final, este objeto fue devuelto por Firebase.

52
00:04:09,910 --> 00:04:15,970
Es un objeto con todos mis productos y solo tengo uno, por eso solo veo uno aquí y cada objeto

53
00:04:15,970 --> 00:04:18,190
coincide con su ID única, pero eso

54
00:04:18,700 --> 00:04:19,510
es importante.

55
00:04:19,510 --> 00:04:25,210
No volvemos a la matriz, recuperamos un objeto con ID únicos como claves y los valores para

56
00:04:25,210 --> 00:04:30,760
estas claves son mis datos de objeto y solo necesitamos saber eso para manejarlo correctamente.

57
00:04:30,760 --> 00:04:32,050
Entonces, de vuelta en

58
00:04:32,050 --> 00:04:34,200
nuestra acción, así es como se ven los

59
00:04:34,270 --> 00:04:38,790
datos de respuesta, por supuesto, en mi aplicación, trabajo con una matriz, así que necesito transformar esto.

60
00:04:38,950 --> 00:04:43,980
Entonces, mis productos cargados o como quieran llamarlo aquí deberían ser una matriz

61
00:04:44,200 --> 00:04:49,580
vacía y ahora podemos recorrer ese objeto para asignar los datos del objeto,

62
00:04:49,610 --> 00:04:54,570
los productos en el objeto a los productos en la matriz.

63
00:04:54,570 --> 00:05:00,490
Es relativamente fácil de hacer, podemos agregar un ciclo for / in aquí con nuestra clave donde

64
00:05:00,490 --> 00:05:09,190
revisamos todos los datos de respuesta que obtuvimos aquí al final y luego aquí, agrego cada producto a mis productos cargados con push, para que esto

65
00:05:09,250 --> 00:05:13,240
La matriz crece con el tiempo y lo que agrego aquí

66
00:05:13,240 --> 00:05:19,420
al final es solo un nuevo producto, utilizando el modelo de producto que, por lo tanto, debe importar,

67
00:05:19,420 --> 00:05:20,250
así

68
00:05:20,260 --> 00:05:25,610
que asegúrese de tener esa importación aquí apuntando a la carpeta de modelos y allí

69
00:05:26,860 --> 00:05:28,660
al archivo del producto y

70
00:05:29,690 --> 00:05:36,910
yo crear un nuevo producto aquí donde mi ID es esa clave porque esa es esa ID única aquí que tenemos

71
00:05:36,910 --> 00:05:43,820
en ese objeto para el que estamos en bucle, luego esa cosa del usuario, eso es U1 todavía, datos ficticios

72
00:05:43,820 --> 00:05:51,260
porque no tenemos datos de usuario involucrados de vez en cuando tenemos que buscar el objeto que recuperamos de Firebase para obtener

73
00:05:51,260 --> 00:05:52,180
el título, etc.

74
00:05:52,220 --> 00:05:58,720
Entonces, aquí, nuestro título para este nuevo producto que estamos creando es simplemente resData para la clave dada. título y lo mismo, por supuesto,

75
00:05:58,760 --> 00:06:00,380
aquí para

76
00:06:00,380 --> 00:06:05,920
el imageUrl, entonces. URL de la imagen. Por la

77
00:06:09,440 --> 00:06:19,610
descripción y por supuesto también por el precio, así. Entonces, esto agrega todo a los productos cargados y ahora los productos cargados serán

78
00:06:19,610 --> 00:06:25,570
una matriz poblada que puedo agregar aquí a la acción que se envía, a la acción

79
00:06:25,580 --> 00:06:27,070
de establecer productos.

80
00:06:27,230 --> 00:06:32,530
Entonces, lo único que falta es que ahora vamos al reductor y allí, podemos manejar los productos establecidos, tal vez aquí como

81
00:06:32,690 --> 00:06:38,080
el primer caso, pero por supuesto, la posición no importa. Agregue productos establecidos aquí y para

82
00:06:38,080 --> 00:06:43,660
eso, asegúrese de importarlos desde su archivo de acciones y luego allí, es algo muy

83
00:06:43,670 --> 00:06:49,230
trivial que estamos a punto de hacer. Al final, solo necesito devolver un

84
00:06:49,230 --> 00:06:59,090
nuevo estado donde los productos disponibles sean iguales a la acción. productos, por lo que a los productos que obtuve aquí en mi creador

85
00:06:59,330 --> 00:07:05,810
de acciones que agrego a mi acción enviada. Y para el producto

86
00:07:06,280 --> 00:07:14,210
del usuario, es bastante similar, hay acción. productos, simplemente filtrados para todos los productos que tienen mi ID de usuario, así que

87
00:07:15,450 --> 00:07:20,370
en este momento debido a mi código ficticio aquí donde codifico mi ID de usuario, eso por supuesto

88
00:07:20,490 --> 00:07:23,670
significa que todos los productos cargados se tratan como mis productos.

89
00:07:23,670 --> 00:07:29,790
Esto es algo que cambiaremos más adelante una vez que agreguemos la autenticación. Entonces con eso, ahora si esto se

90
00:07:30,080 --> 00:07:35,120
recarga, verá que comenzamos con los datos ficticios, pero luego esto se reemplaza

91
00:07:35,420 --> 00:07:39,830
inmediatamente con estos datos cargados. Entonces, cargar datos funciona bien,

92
00:07:39,830 --> 00:07:44,370
podemos trabajar con eso como podríamos con nuestros propios datos aquí.

93
00:07:44,390 --> 00:07:49,340
Por supuesto, no estamos almacenando pedidos en el servidor ni nada de eso, pero podemos cargar nuestros

94
00:07:49,340 --> 00:07:51,410
datos que previamente almacenamos en el servidor.