1
00:00:02,550 --> 00:00:04,670
Para asegurarnos de que se cargan, nuevamente

2
00:00:04,710 --> 00:00:10,260
necesitamos volver al creador de la acción y agregar una nueva acción en el creador de la acción de órdenes, disculpe.

3
00:00:11,590 --> 00:00:18,880
Un identificador que necesito es establecer órdenes, del mismo modo que teníamos una para establecer productos para establecer las órdenes cargadas

4
00:00:18,880 --> 00:00:21,340
y luego aquí tengo mi creador

5
00:00:21,340 --> 00:00:28,120
de acción para buscar órdenes que no toma argumentos, pero que luego devuelve mi función de envío asíncrono, gracias a

6
00:00:28,140 --> 00:00:36,580
Redux Thunk y allí, en última instancia, despacho o envío una nueva acción en la que el tipo es establecer órdenes y donde tengo

7
00:00:36,580 --> 00:00:41,250
mis órdenes cargadas y, por supuesto, eso no debería ser una matriz vacía.

8
00:00:41,290 --> 00:00:47,050
En cambio, podemos tomar prestada la lógica del creador de acciones de productos, de buscar productos allí. Podemos tomar toda esa lógica,

9
00:00:47,110 --> 00:00:55,850
copiar todo eso aquí y pasarlo al creador de la acción de órdenes

10
00:00:55,850 --> 00:00:57,180
y

11
00:00:57,410 --> 00:01:04,000
ejecutarlo antes de enviarlo, aquí. Ahora, por supuesto, tenemos que ajustar esto, por ejemplo, la solicitud debe enviarse

12
00:01:04,190 --> 00:01:07,940
a pedidos / U1 y nuevamente se reemplazará más tarde con un valor dinámico,

13
00:01:07,940 --> 00:01:13,880
por ahora está codificado para buscar pedidos para este usuario. Debería ser una solicitud de obtención, quiero comprobar esto,

14
00:01:13,880 --> 00:01:14,930
está bien.

15
00:01:14,930 --> 00:01:16,250
Aquí obtuve mis

16
00:01:16,250 --> 00:01:19,450
datos de respuesta, ahora recibí mis pedidos cargados, ese

17
00:01:19,460 --> 00:01:21,550
parece ser un nombre más

18
00:01:21,560 --> 00:01:27,170
apropiado, todavía reviso todos los datos que obtuve y quiero establecer mis pedidos cargados allí, pero

19
00:01:27,230 --> 00:01:30,050
ahora hay una diferencia importante, No creo nuevos

20
00:01:30,050 --> 00:01:34,210
productos aquí que agrego a los pedidos cargados, en lugar de eso

21
00:01:34,340 --> 00:01:37,680
necesito crear nuevos pedidos aquí y para eso, debe importar

22
00:01:37,890 --> 00:01:43,510
el pedido desde el modelo de pedido. Ahora también veo que falta una llave,

23
00:01:43,520 --> 00:01:48,990
ahora antes de proceder con eso, necesito asegurarme de que también atrape cualquier error

24
00:01:49,020 --> 00:01:57,550
que pueda estar obteniendo y allí quiero lanzar el error, básicamente volver a tirarlo, asegurarme llega a mi componente y necesito una

25
00:01:57,550 --> 00:01:59,220
llave de cierre

26
00:01:59,260 --> 00:02:04,530
más, pero ahora volviendo a nuestra lógica aquí donde creo nuevos pedidos, allí la

27
00:02:07,350 --> 00:02:11,480
ID es la clave, al igual que para los productos, los

28
00:02:11,490 --> 00:02:18,920
artículos se pueden encontrar en mis datos de respuesta porque básicamente, recupere esto aquí, así que los datos de

29
00:02:18,920 --> 00:02:24,420
respuesta contendrán una clave de elementos de tarjeta, por ejemplo, que contiene los elementos

30
00:02:24,420 --> 00:02:30,360
de mi tarjeta que necesito. Entonces los datos de respuesta para la clave dada y allí,. cardItems, ahí es donde

31
00:02:30,360 --> 00:02:38,200
encuentro mis artículos porque eso es lo que enviamos aquí al final para almacenar los artículos de la tarjeta, entonces

32
00:02:38,200 --> 00:02:42,610
mi pedido que creo aquí, por supuesto, también necesita la cantidad

33
00:02:42,640 --> 00:02:48,700
total, lo obtengo de la clave resData y luego allí si tenemos un vistazo a

34
00:02:48,700 --> 00:02:53,290
Firebase, es ese campo de cantidad total aquí y la fecha.

35
00:02:53,330 --> 00:03:00,520
Bueno, para eso, creo un nuevo objeto de fecha pero lo inicializo con la clave resData. fecha.

36
00:03:00,540 --> 00:03:05,760
Ahora necesitamos crear un nuevo objeto de datos porque resData key. la fecha es solo esa cadena de fecha aquí y

37
00:03:05,850 --> 00:03:08,190
necesito un objeto de fecha, no una cadena de

38
00:03:08,190 --> 00:03:13,800
fecha, por lo tanto, la envolvemos, esta cadena la envolvemos con la creación del objeto de fecha aquí y, por lo tanto,

39
00:03:13,800 --> 00:03:14,220
obtenemos

40
00:03:14,250 --> 00:03:17,130
un objeto de datos y ese es el orden que agrego

41
00:03:17,130 --> 00:03:22,470
aquí para pedidos cargados, hacemos eso para todos los pedidos que estamos obteniendo y con eso, podemos enviar esto y ahora

42
00:03:22,470 --> 00:03:24,950
solo tenemos que manejarlo en el reductor de pedidos.

43
00:03:25,080 --> 00:03:32,230
Entonces, si manejo las órdenes establecidas y para eso, por supuesto, necesita importar este identificador de acción, lo único que tengo que hacer es devolver un nuevo objeto

44
00:03:32,290 --> 00:03:37,500
de estado donde las órdenes son iguales a la acción. órdenes y eso es todo lo

45
00:03:37,570 --> 00:03:39,280
que tenemos que hacer,

46
00:03:39,280 --> 00:03:40,640
muy simple.

47
00:03:40,720 --> 00:03:42,250
Ahora, ¿por qué es tan simple?

48
00:03:42,280 --> 00:03:47,530
Porque en el creador de la acción, hacemos todo el trabajo. Allí mapeamos nuestros pedidos y luego aquí, solo tengo

49
00:03:47,530 --> 00:03:50,290
la clave de órdenes en mi acción que contiene todos

50
00:03:50,440 --> 00:03:53,740
los pedidos mapeados, así que eso es justo lo que necesito almacenar aquí.

51
00:03:54,150 --> 00:04:03,570
Ahora el paso restante es que despachemos los pedidos de búsqueda aquí en nuestra pantalla de pedidos. Así que vamos allí y agreguemos el efecto de uso nuevamente

52
00:04:03,840 --> 00:04:10,560
para hacer eso y para despachar, también necesitamos importar el despacho de uso de React Redux

53
00:04:10,560 --> 00:04:14,470
y luego aquí podemos obtener acceso a esa función

54
00:04:14,730 --> 00:04:20,050
de despacho ejecutando el despacho de uso y luego aquí el efecto de

55
00:04:20,250 --> 00:04:28,420
uso, agregamos despacho como una dependencia porque en esta función de efecto aquí, despacho y ahora necesito mis acciones

56
00:04:28,420 --> 00:04:31,640
de pedido, así que permítanme importar

57
00:04:31,660 --> 00:04:39,730
todo como acciones de pedidos desde la carpeta de la tienda, desde la carpeta de acciones, desde el archivo

58
00:04:39,730 --> 00:04:50,840
de pedidos y con el importado aquí , podemos decir órdenes de acciones. Solicite pedidos como ese y luego continuaremos y haremos esa solicitud y, por

59
00:04:51,110 --> 00:04:56,690
lo tanto, ahora si guardamos esto y vamos a la pantalla de pedidos,

60
00:04:56,690 --> 00:05:05,790
inicialmente está vacío pero muy muy rápido y carga todos los pedidos que almacenamos y esos son estos tres órdenes que tengo

61
00:05:05,790 --> 00:05:14,260
aquí y, por supuesto, podemos ampliar esto como antes. Ahora, un spinner de carga también sería bueno y, por supuesto,

62
00:05:14,260 --> 00:05:15,790
también puedes pausar

63
00:05:15,790 --> 00:05:18,830
el video aquí y probarlo por tu cuenta.

64
00:05:18,830 --> 00:05:24,830
Lo haré rápidamente de la misma manera que antes: importe el estado

65
00:05:24,900 --> 00:05:36,120
de uso de React, luego configure aquí el estado isLoading y establezca isLoading ejecutando el estado de uso y estableciendo esto en falso inicialmente

66
00:05:36,120 --> 00:05:42,540
y luego aquí en el efecto, al final quiero para usar async esperar.

67
00:05:42,550 --> 00:05:50,920
Ahora dije que no puede o no debe agregar asíncrono aquí, por lo que podemos usarlo aquí simplemente o envolverlo en

68
00:05:50,920 --> 00:05:52,150
una función auxiliar.

69
00:05:52,150 --> 00:06:01,320
Ahora solo usaré la llamada a continuación, así que estableceré isLoading en true aquí y luego agregaré aquí y, una vez hecho esto, sé

70
00:06:01,320 --> 00:06:05,880
que tenemos una respuesta, así que aquí estableceré isLoading en false.

71
00:06:05,880 --> 00:06:08,680
Ahora, tenga en cuenta que no estoy teniendo manejo de errores aquí, así que

72
00:06:08,700 --> 00:06:11,050
si esto falla no lo estamos manejando, en su lugar siempre

73
00:06:11,070 --> 00:06:13,530
estaremos en el estado de carga, por lo que, por supuesto, es

74
00:06:13,530 --> 00:06:18,200
posible que desee considerar agregar también el manejo de errores. Simplemente no lo haré aquí porque

75
00:06:18,200 --> 00:06:21,570
mostré cómo funciona, para no hinchar demasiado este módulo, no

76
00:06:21,660 --> 00:06:23,360
lo implementaré, pero puedo pero,

77
00:06:23,370 --> 00:06:28,710
por supuesto, podría manejar los errores aquí si desea usar esto, luego acérquese aquí agregando

78
00:06:28,710 --> 00:06:30,400
también catch, esto

79
00:06:30,420 --> 00:06:32,790
es algo que puede hacer absolutamente aquí.

80
00:06:33,430 --> 00:06:35,340
Sin embargo,

81
00:06:35,350 --> 00:06:43,000
me centraré en la parte de carga. Ahora que tengo todo eso configurado, podemos importar el

82
00:06:43,000 --> 00:06:45,560
indicador de actividad e importar

83
00:06:45,570 --> 00:06:55,340
el componente de vista y, para algunos estilos, también importar la hoja de estilo API de React Native y luego verificar si estamos en

84
00:06:55,370 --> 00:07:04,890
el estado de carga, en cuyo caso quiero devolver mi indicador de actividad centrado aquí con un tamaño grande y un color que debe

85
00:07:04,920 --> 00:07:12,180
ser el color que necesita importar, por lo tanto primario, así que asegúrese de tener esa importación de

86
00:07:12,220 --> 00:07:23,620
colores agregada y con eso agregado, aquí agregaré un estilo igual a los estilos centrado o como quiera nombrarlo y ahora agregue ese objeto de

87
00:07:23,620 --> 00:07:32,190
estilos aquí con la ayuda de Stylesheet. crear y centrado debe tener la

88
00:07:32,840 --> 00:07:44,750
configuración de flex one, justificar el centro de contenido y alinear el centro de elementos,

89
00:07:44,750 --> 00:07:53,980
de esta manera. Con eso, si lo guardamos, miramos las órdenes, vemos la ruleta. Nuevamente, se está cargando muy rápido, pero

90
00:07:54,010 --> 00:07:59,890
puede verlo si observa de cerca, aquí está la rueda giratoria durante una fracción de

91
00:07:59,980 --> 00:08:06,850
segundo y, a continuación, se cargan los pedidos. Así que ahora funciona, almacenar y recuperar órdenes también

92
00:08:07,030 --> 00:08:13,770
funciona y con eso, implementamos solicitudes HTTP y usamos un servidor para almacenar los datos en esta aplicación.