1
00:00:02,200 --> 00:00:06,570
Antes de continuar actualizando o editando los datos o eliminándolos, también asegurémonos, sin embargo,

2
00:00:06,680 --> 00:00:10,810
de que no vemos los datos ficticios aquí inicialmente, sino que realmente vemos un

3
00:00:10,810 --> 00:00:16,660
control de carga y tal vez también un mensaje si no hay datos para cargar o un mensaje de

4
00:00:16,840 --> 00:00:19,810
error si tenemos un error y para eso, comencemos

5
00:00:19,810 --> 00:00:23,400
con la rueda de carga. En la pantalla de descripción general de los

6
00:00:23,470 --> 00:00:28,270
productos, quiero mostrar un control de carga mientras esperamos que lleguen los datos. Para eso, antes que nada, necesitamos saber

7
00:00:28,270 --> 00:00:32,430
si estamos cargando o no y podemos controlar eso con el estado de uso,

8
00:00:32,440 --> 00:00:34,850
así que con un estado interno en este componente.

9
00:00:35,140 --> 00:00:42,910
Entonces, allí podemos agregar isLoading y establecer isLoading y luego simplemente usar el estado aquí de esta manera e inicialmente no estamos cargando, así

10
00:00:42,910 --> 00:00:45,890
que configuré el estado inicial en falso y

11
00:00:46,630 --> 00:00:51,610
ahora aquí cuando enviamos esto, así que aquí en efecto, configuré Está cargando a verdadero,

12
00:00:51,610 --> 00:00:56,130
por supuesto, pero una vez que hayamos terminado, quiero volver a establecerlo en falso.

13
00:00:56,170 --> 00:01:03,610
Ahora, lo bueno es despachar aquí, despacha nuestra acción de obtención de productos y, por lo tanto, esto nos da una promesa en realidad, así que

14
00:01:03,610 --> 00:01:04,780
aquí puedo agregar

15
00:01:04,840 --> 00:01:10,690
luego y también capturar más tarde para que el manejo de errores haga algo una vez que esto se hace.

16
00:01:10,870 --> 00:01:15,670
También puede usar async wait, pero no está permitido usarlo de esta manera

17
00:01:15,670 --> 00:01:20,910
aquí en efecto de uso, no es simplemente cómo se debe usar el efecto de uso.

18
00:01:20,910 --> 00:01:25,910
Entonces, si desea utilizar el uso asíncrono aquí, tendría que incluir esto en una

19
00:01:25,910 --> 00:01:32,720
función separada que debe crear en su efecto, como cargar productos, que es solo una función de envoltura ficticia

20
00:01:32,720 --> 00:01:37,350
que se ve así, tal vez con set isLoading in ahí también.

21
00:01:37,350 --> 00:01:43,530
Ahora aquí puede agregar asíncrono y ahora puede llamar a cargar productos como ese inmediatamente después, simplemente un contenedor que

22
00:01:43,530 --> 00:01:46,530
se requiere debido a la forma en que funciona el

23
00:01:46,530 --> 00:01:48,260
efecto de uso, no debe

24
00:01:48,300 --> 00:01:54,030
devolver una promesa, lo haría si usa asíncrono aquí y por lo tanto, el uso de async no está

25
00:01:54,030 --> 00:01:55,940
permitido, por otro lado, está permitido.

26
00:01:55,950 --> 00:01:57,520
Así que ahora aquí,

27
00:01:57,540 --> 00:02:03,060
podemos usar esperar aquí para esperar a que se realice este envío, lo que significa que esto esperará

28
00:02:03,060 --> 00:02:08,670
automáticamente la promesa que está allí, por lo que para la solicitud HTTP y luego establecemos isLoading en falso

29
00:02:08,670 --> 00:02:10,300
una vez que se hace esto.

30
00:02:10,710 --> 00:02:16,380
Ahora, para mostrar una ruleta, afortunadamente React Native tiene uno para nosotros, el indicador de actividad que automáticamente

31
00:02:16,380 --> 00:02:18,810
se verá bien para iOS y

32
00:02:18,840 --> 00:02:21,950
Android, por lo que obtendrá automáticamente el estilo de plataforma

33
00:02:22,320 --> 00:02:27,630
predeterminado y ahora podemos renderizarlo si estamos cargando. Entonces, allí en lugar de

34
00:02:27,630 --> 00:02:34,740
devolver la lista plana, si isLoading es verdadero, devolveré una pieza diferente de jsx, devolveré una

35
00:02:34,740 --> 00:02:42,040
nueva vista aquí con mi indicador de actividad allí. Para eso, por supuesto, también debes tener vista importada, así que asegúrate de que también esté disponible.

36
00:02:44,480 --> 00:02:49,370
Ahora con eso devolvimos esta vista con el indicador de actividad, allí puede configurar el

37
00:02:49,380 --> 00:02:58,310
tamaño para que sea grande y el color para que sea Colores. primario, por ejemplo, y esto, por supuesto, requiere que se importen los colores constantes,

38
00:02:58,310 --> 00:03:05,830
así que asegúrese de que esté disponible y, por último, pero no menos importante, ahora quiero centrar este indicador, por lo que aquí podemos agregar

39
00:03:05,830 --> 00:03:10,960
un estilo que, por supuesto, podríamos establecer con una hoja de estilo o aquí rápido y sucio,

40
00:03:11,020 --> 00:03:18,880
flexione uno justifique el centro de contenido, alinee el centro de elementos. Sin embargo, en realidad usaré una hoja de estilo

41
00:03:18,880 --> 00:03:23,010
aquí porque también la necesitaremos en un lugar diferente más adelante.

42
00:03:23,110 --> 00:03:33,450
Así que aquí me referiré a los estilos, digamos centrado e importé la hoja de estilo de React Native

43
00:03:33,450 --> 00:03:41,640
y con eso, luego baje, agregue mi objeto de estilos después de configurar las opciones

44
00:03:41,640 --> 00:03:50,890
de navegación, tal vez, estilos con Stylesheet. crear, agregar la propiedad centrada allí que tiene este estilo con flex

45
00:03:50,890 --> 00:03:57,450
justificar el contenido, alinear elementos y ahora con eso, deberíamos ver un indicador de actividad centrada mientras cargamos.

46
00:03:57,570 --> 00:04:03,790
Entonces, si guardo esto y esto se vuelve a cargar, Firebase es muy rápido, por lo que no lo ves tanto tiempo, pero durante

47
00:04:03,790 --> 00:04:09,580
un corto período de tiempo, ves ese spinner de carga aquí, con el aspecto diferente en iOS y Android, por supuesto.

48
00:04:12,900 --> 00:04:19,110
Ahora, por supuesto, cargar es una cosa, a veces tampoco tienes datos que puedan cargarse. Digamos que en un

49
00:04:19,110 --> 00:04:25,740
reductor, estamos llegando al producto. json, que es una fuente donde no se pueden obtener datos

50
00:04:25,740 --> 00:04:28,750
y, por lo tanto, terminamos con una pantalla vacía.

51
00:04:29,150 --> 00:04:32,920
Bueno, eso es algo que podemos hacer, pero no es la mejor

52
00:04:33,060 --> 00:04:39,540
experiencia de usuario posible, por lo que quiero agregar otro si compruebo donde verifico si la carga es falsa, por lo que

53
00:04:41,530 --> 00:04:48,190
si ya no estamos cargando y mis productos aquí, la longitud allí es igual a cero, lo que significa que no tenemos productos.

54
00:04:48,190 --> 00:04:54,340
En ese caso, también devolveré mi contenido centrado aquí, pero allí simplemente quiero generar un texto

55
00:04:54,340 --> 00:04:58,230
donde digo que no se encontraron productos, tal vez comience

56
00:04:58,240 --> 00:05:08,530
a agregar algunos y, por supuesto, debe asegurarse de importar el componente de texto y usted también puede asignar sus estilos de fuente allí o crear un

57
00:05:08,530 --> 00:05:15,880
componente de envoltura de texto predeterminado que usamos en módulos anteriores, por ahora solo tendré mi texto como este

58
00:05:15,880 --> 00:05:17,140
y esto

59
00:05:17,140 --> 00:05:22,900
es lo que vemos allí por ahora. Por supuesto, tan pronto como cambie

60
00:05:22,900 --> 00:05:31,360
esto a la URL correcta donde realmente encontramos datos, funciona. Ahora, por último, pero no menos importante, también podría tener

61
00:05:31,360 --> 00:05:33,680
un error. Digamos aquí, no

62
00:05:33,700 --> 00:05:35,850
tengo. json allí,

63
00:05:35,860 --> 00:05:41,610
por supuesto, es un error que normalmente evitaríamos porque es solo un error tipográfico de nuestra

64
00:05:41,620 --> 00:05:48,010
parte, pero desafortunadamente los servidores Firebase son relativamente robustos. Entonces, para fingir que, por ejemplo, fallaron o algo salió mal,

65
00:05:48,010 --> 00:05:48,520
simplemente

66
00:05:48,550 --> 00:05:54,850
romperé la URL de esta manera, que es una URL no válida y ahora lo que vemos es un spinner infinito.

67
00:05:55,120 --> 00:06:04,340
La razón de esto es que en realidad ahora no tenemos una respuesta válida. Entonces, si echamos un vistazo a nuestra acción aquí y la consola registra

68
00:06:04,340 --> 00:06:10,490
los datos de esta respuesta aquí, vemos que a medida que se vuelve a cargar, la recuperación debe

69
00:06:14,420 --> 00:06:16,220
ocurrir de inmediato, pero no

70
00:06:19,170 --> 00:06:20,950
obtenemos ningún resultado

71
00:06:21,060 --> 00:06:23,130
allí, no vemos que se registre

72
00:06:23,160 --> 00:06:29,760
nada esto, solo recibimos una advertencia de rechazo de promesa en algún momento, por lo que parece que simplemente

73
00:06:29,970 --> 00:06:32,470
estamos recibiendo un error y en este

74
00:06:32,820 --> 00:06:34,870
momento, no estamos manejando un error.

75
00:06:34,890 --> 00:06:39,990
Ahora, si usaría promesas sin esperar asíncrono, simplemente agregaría la declaración catch.

76
00:06:39,990 --> 00:06:41,720
Aquí estamos usando async

77
00:06:41,720 --> 00:06:48,660
wait, así que lo que hacemos es envolver esto en un bloque de prueba, todo ese código que finalmente queremos

78
00:06:48,660 --> 00:06:52,960
ejecutar si todo tiene éxito y detectar algún error aquí, así que

79
00:06:52,960 --> 00:06:57,340
un bloque de prueba de captura. Ahí es donde obtenemos un error potencial y

80
00:06:57,340 --> 00:07:00,820
ahora con ese error obtenido aquí, podemos manejarlo, por ejemplo, enviarlo a

81
00:07:00,820 --> 00:07:06,460
nuestro propio servidor analítico o hacer lo que queramos y luego tal vez también volver a arrojarlo, por supuesto, si

82
00:07:06,670 --> 00:07:11,740
todo lo que haces es volviéndolo a lanzar, no habría necesitado agregar este bloque de captura de prueba,

83
00:07:11,740 --> 00:07:17,080
pero por lo general, es posible que desee hacer más aquí: enviar a un servidor de análisis personalizado o

84
00:07:17,080 --> 00:07:18,930
algo así como lo mencioné.

85
00:07:19,150 --> 00:07:23,800
Entonces, ahora volvemos a lanzar el error, aún no es mejor,

86
00:07:23,860 --> 00:07:29,890
todavía nos hace tener un error y, además de tratar de solucionarlo, también deberíamos agregar

87
00:07:29,890 --> 00:07:32,890
otra verificación aquí antes de desempaquetar el

88
00:07:32,890 --> 00:07:38,770
cuerpo de respuesta, también deberíamos verificar si la respuesta está bien, si eso es falso.

89
00:07:38,770 --> 00:07:44,670
OK es un campo que tiene disponible en este objeto de respuesta y esto simplemente es cierto si la respuesta

90
00:07:44,680 --> 00:07:50,800
está en el rango de 200 códigos de estado. Si está en un rango diferente, por ejemplo, porque no

91
00:07:50,800 --> 00:07:55,360
está autenticado o algo así, entonces la API de búsqueda por defecto no arrojaría un error.

92
00:07:55,360 --> 00:08:01,000
Sin embargo, quiero arrojar un error en ese caso para que siempre terminemos en el bloque catch si tenemos un

93
00:08:01,450 --> 00:08:07,780
código de estado 400 o 500 o si tenemos un problema de solicitud de red, por ejemplo, si la solicitud ni siquiera puede

94
00:08:07,780 --> 00:08:08,790
abandonar el dispositivo.

95
00:08:08,980 --> 00:08:15,250
Así que aquí y eso es buscar API específica para manejar códigos de estado 400 y 500 que normalmente no

96
00:08:15,250 --> 00:08:16,590
causarían un error,

97
00:08:16,600 --> 00:08:21,350
también arrojaré un nuevo error aquí en ese caso donde digo que algo salió

98
00:08:21,370 --> 00:08:27,850
mal, por supuesto que podría sumergirse en el el cuerpo de respuesta aquí en ese caso también y descubra qué está

99
00:08:28,150 --> 00:08:32,910
mal allí, pero simplemente arrojaré este error genérico y ahora definitivamente tendremos un error si

100
00:08:32,920 --> 00:08:38,750
algo sale mal si no recuperamos nuestros datos, pero aún así, simplemente vuelva a lanzar el error aquí.

101
00:08:38,770 --> 00:08:43,020
Pero el lugar donde finalmente quiero manejarlo es mi componente aquí, mi componente

102
00:08:43,030 --> 00:08:50,640
de pantalla porque allí, luego quiero mostrar un mensaje de error. Entonces, tenemos nuestro efecto y de la misma manera

103
00:08:50,830 --> 00:08:58,330
que podríamos usar catch o el controlador de catch si lo usa y catch o async aguardan con try

104
00:08:58,330 --> 00:08:59,860
catch en la

105
00:08:59,920 --> 00:09:01,800
acción, también podemos hacerlo aquí.

106
00:09:01,840 --> 00:09:09,380
Entonces, aquí, quiero intentar despachar esto, pero quiero detectar cualquier error potencial que podamos obtener.

107
00:09:09,400 --> 00:09:10,830
Así que aquí capto cualquier

108
00:09:10,840 --> 00:09:16,810
error que esto pueda producir y, dado que vuelvo a arrojar mi error allí, eso es lo que acabo de hacer aquí,

109
00:09:16,840 --> 00:09:19,370
correcto, en última instancia, el error nos llegará aquí.

110
00:09:19,400 --> 00:09:22,750
Entonces, finalmente terminaremos en este bloque de captura y

111
00:09:23,080 --> 00:09:29,740
ahora para mostrar nuestros datos de error, podemos agregar otro estado: error y establecer error, puede nombrarlo como

112
00:09:29,740 --> 00:09:30,250
desee.

113
00:09:30,340 --> 00:09:38,690
Inicialmente eso no está definido porque inicialmente no tengo ningún error, pero luego aquí, llamaré a establecer error y estableceré

114
00:09:38,690 --> 00:09:41,540
esto como error. mensaje por ejemplo, así que

115
00:09:41,540 --> 00:09:43,670
al mensaje de este error que estoy recibiendo.

116
00:09:46,500 --> 00:09:51,330
Aún así, por supuesto, quiero establecer la carga en falso a partir de entonces, eso no

117
00:09:51,330 --> 00:09:52,330
cambia porque definitivamente

118
00:09:52,350 --> 00:09:58,920
ya no estamos cargando incluso si tenemos un error, pero ahora también tenemos este estado de error que podemos usar, podemos usar

119
00:09:58,920 --> 00:10:01,490
eso para verificar aquí. Si tenemos un

120
00:10:01,500 --> 00:10:08,820
error, entonces si eso es cierto, ni siquiera necesito continuar, en cambio quiero devolver mi contenido centrado jsx aquí pero allá, solo

121
00:10:08,820 --> 00:10:10,130
quiero generar un texto

122
00:10:10,140 --> 00:10:18,620
donde digo que ocurrió un error, por ejemplo , Me gusta esto. Si ahora hacemos eso, verá que vemos una rueda

123
00:10:18,650 --> 00:10:20,290
giratoria, pero luego

124
00:10:20,320 --> 00:10:21,370
vemos

125
00:10:21,380 --> 00:10:24,990
este texto de error. Ahora, por supuesto, esto no permite que

126
00:10:24,990 --> 00:10:27,800
el usuario haga mucho, ahora podemos navegar y regresar, pero es posible

127
00:10:29,820 --> 00:10:36,820
que queramos darle al usuario una forma de intentarlo nuevamente, quizás agregando un botón aquí. Así que ahora aquí con el botón importado, podemos

128
00:10:36,820 --> 00:10:45,860
ir allí y luego agregar este componente de botón con un título de prueba nuevamente y, por supuesto, depende totalmente de usted cómo desea

129
00:10:45,870 --> 00:10:49,810
permitir que el usuario maneje esto y allí puede agregar un

130
00:10:49,920 --> 00:10:55,260
controlador onPress y ahora para poder cargar de nuevo, en realidad tomaré esta función

131
00:10:55,350 --> 00:10:58,770
de productos de carga aquí, la sacaré del efecto

132
00:10:58,770 --> 00:11:04,290
y la convertiré en una función regular de este componente para poder llamarlo desde el

133
00:11:04,290 --> 00:11:06,030
efecto de uso interno.

134
00:11:06,090 --> 00:11:10,740
Ahora, sin embargo, también debe ser una dependencia y, por lo tanto, para evitar un

135
00:11:10,800 --> 00:11:19,350
bucle infinito, debe envolverse en la devolución de llamada de uso, así que importemos la devolución de llamada de uso aquí y envuelva esto alrededor de esta función aquí

136
00:11:19,350 --> 00:11:20,920
donde la dependencia es

137
00:11:20,980 --> 00:11:21,870
mi función

138
00:11:21,870 --> 00:11:23,760
de envío, también puede agregar set

139
00:11:23,800 --> 00:11:27,600
isLoading y establecer error, pero todas estas funciones nunca cambiarán, por lo tanto,

140
00:11:27,640 --> 00:11:32,440
también puede omitirlas y, por lo tanto, esto nunca se volverá a crear, lo cual es

141
00:11:32,440 --> 00:11:34,480
bueno, pero ahora podemos usar productos de

142
00:11:34,630 --> 00:11:37,930
carga como una dependencia aquí en efecto y ahora ya que

143
00:11:37,960 --> 00:11:43,120
no está dentro de la función de efecto de uso, podemos usar productos de carga en cualquier

144
00:11:43,120 --> 00:11:45,750
otro lugar de este componente y la parte en

145
00:11:45,750 --> 00:11:51,700
cualquier otro lugar está aquí este botón, si presionamos esto, también quiero activar los productos de carga nuevamente y, por

146
00:11:52,000 --> 00:12:02,260
último, pero no menos importante, dar el botón color de colores. primario. Con eso, parece que tengo un error aquí con mis importaciones,

147
00:12:02,260 --> 00:12:07,590
sí, ya tenía un botón importado, así que eliminemos la segunda importación, solo importela una vez y

148
00:12:07,780 --> 00:12:09,480
ahora lo que obtendrá

149
00:12:09,520 --> 00:12:16,450
es que esto realmente se volverá a cargar, eventualmente arroja un error y puede presionar intentar nuevamente para volver a cargarlo, sin

150
00:12:16,460 --> 00:12:20,810
embargo, siempre vemos el mensaje de error simplemente porque nunca borramos el error y

151
00:12:20,840 --> 00:12:22,850
si tenemos un error, siempre lo

152
00:12:22,850 --> 00:12:25,220
devolvemos, ni siquiera llegamos a la carga hilandero.

153
00:12:25,220 --> 00:12:31,010
Por lo tanto, debemos asegurarnos de que cada vez que cargamos nuestros productos aquí, volvemos a establecer el error

154
00:12:31,010 --> 00:12:36,780
en nulo, por lo que restablecemos el error. Por cierto, React agrupará varias llamadas de estado establecido una al lado de

155
00:12:36,800 --> 00:12:39,550
la otra, por lo que esto no conducirá a ciclos de renderizado

156
00:12:39,560 --> 00:12:41,730
de componentes múltiples, está bien usarlo de esta manera.

157
00:12:41,750 --> 00:12:46,490
Así que ahora con eso, si hago clic en intentar nuevamente, podemos intentarlo nuevamente. Obviamente, nunca tendrá éxito porque nuestra URL

158
00:12:46,490 --> 00:12:53,540
está rota, pero aún así, así es como podríamos manejar este error. Con eso, sin embargo, volveré a mis acciones y

159
00:12:53,540 --> 00:12:57,610
corregiré ese error corrigiendo esta URL nuevamente y ahora esto también

160
00:12:57,740 --> 00:13:00,560
debería cargar nuestros datos correctamente y mostrarlos.