1 00:00:02,110 --> 00:00:07,990 Entonces, ahora que agregamos el almacenamiento, la recuperación, la actualización y la eliminación y, por lo tanto, todas las 2 00:00:07,990 --> 00:00:12,070 funcionalidades crud, y pudimos ver cómo mostrar una flecha de carga y errores 3 00:00:12,070 --> 00:00:14,020 de manejo, faltan dos cosas. 4 00:00:14,020 --> 00:00:20,560 Una es que cuando realizamos un pedido, también lo enviamos a un servidor y almacenamos el pedido allí y no solo 5 00:00:20,560 --> 00:00:22,900 localmente, porque ahora, por supuesto, cuando ordenamos 6 00:00:22,900 --> 00:00:27,760 algo, lo vemos aquí, pero tan pronto volvemos a cargar la aplicación ya que no la 7 00:00:27,760 --> 00:00:30,650 estamos almacenando en un servidor, eso se pierde, así que 8 00:00:30,660 --> 00:00:32,160 eso es una cosa. 9 00:00:32,170 --> 00:00:35,130 La otra cosa es, por supuesto, que solo mostramos una rueda de 10 00:00:35,200 --> 00:00:39,570 carga aquí y también manejamos los errores aquí. En la pantalla de administración, si 11 00:00:39,610 --> 00:00:43,970 algo sale mal, no obtenemos ningún error, también aquí, si lo editamos y lo enviamos, 12 00:00:44,080 --> 00:00:47,320 no vemos la flecha de carga mientras esperamos que se envíe. 13 00:00:47,320 --> 00:00:49,120 Entonces eso también es algo que podríamos mejorar 14 00:00:49,150 --> 00:00:51,310 y esa es realmente la parte con la que quiero comenzar. 15 00:00:52,210 --> 00:00:57,670 Entonces, aquí en la pantalla de edición de productos cuando enviamos actualizaciones o creaciones, en ambos casos esto, por 16 00:00:57,670 --> 00:01:04,210 supuesto, lleva un tiempo y, de hecho, recuperamos una promesa aquí porque, tanto en la actualización como en la acción del producto, estamos 17 00:01:04,600 --> 00:01:10,270 utilizando la función Redux Thunk de devolviendo una función de envío asíncrono aquí que, por lo tanto, devuelve una 18 00:01:10,270 --> 00:01:15,340 promesa que, por lo tanto, se devuelve como parte de nuestra función de envío, llame aquí. 19 00:01:15,520 --> 00:01:20,680 Por lo tanto, en realidad obtenemos la información, ya sea que estemos esperando la respuesta, ya sea 20 00:01:20,710 --> 00:01:22,470 que tengamos un error o que 21 00:01:22,630 --> 00:01:24,380 hayamos terminado, solo necesitamos usarla 22 00:01:24,520 --> 00:01:31,300 y, por supuesto, podemos usarla de una manera similar a como lo hicimos antes, con el estado de uso importado de React y 23 00:01:31,300 --> 00:01:37,650 luego administrando la carga y el estado de error aquí. Nota al margen, por supuesto, también podría trabajar con 24 00:01:37,650 --> 00:01:43,080 un reductor donde fusiona ambos estados si lo desea con la ayuda del gancho reductor de uso. 25 00:01:43,380 --> 00:01:52,750 Sin embargo, aquí me atendré a isLoading y estableceré isLoading e inicialmente, por supuesto, esto es falso y también tengo el error y 26 00:01:52,750 --> 00:02:02,510 establezco las variables de error aquí con un estado de uso como este, que inicialmente no está definido y ahora solo tenemos que configurar 27 00:02:02,880 --> 00:02:07,470 esto ya que ' re-despachando acciones o como estamos obteniendo errores. 28 00:02:07,470 --> 00:02:13,530 Entonces, cuando estamos a punto de enviar esto, no importa si estamos 29 00:02:13,530 --> 00:02:25,000 editando o creando, quiero establecer isLoading en verdadero y también quiero establecer mi error aquí en falso o no en falso, en nulo , reinicialo. 30 00:02:25,190 --> 00:02:30,420 Ahora, una vez que hayamos terminado, quiero hacer otra cosa, pero para eso, primero tenemos que esperar a 31 00:02:30,420 --> 00:02:31,840 que finalice el envío. 32 00:02:31,860 --> 00:02:37,350 Ahora, por lo tanto, podemos convertir esto en una función asincrónica nuevamente, solo para que pueda usar 33 00:02:37,350 --> 00:02:37,770 para 34 00:02:37,770 --> 00:02:44,720 esperar la palabra clave allí, la alternativa sería no convertir esto en una función asincrónica y simplemente agregar luego y capturar 35 00:02:44,770 --> 00:02:45,810 a partir de 36 00:02:45,810 --> 00:02:52,620 entonces, eso funcionaría también, pero Me gusta usar async esperar. Entonces, ahora podemos esperar a que finalicen ambos despachos, por supuesto, solo uno 37 00:02:52,620 --> 00:02:57,230 de los dos se ejecutará porque esa es una condición if, pero podemos esperar a que termine y, 38 00:02:57,330 --> 00:03:00,380 por lo tanto, después de este bloque if, sabemos que 39 00:03:00,370 --> 00:03:08,370 se realizará el despacho, así que aquí vamos puede establecer isLoading de nuevo a falso. Así que ese es el estado de carga, ahora para 40 00:03:08,370 --> 00:03:15,420 manejar los errores, solo necesitamos envolver esto con un bloque try catch y, de hecho, podemos envolver todo el 41 00:03:15,420 --> 00:03:23,250 bloque if aquí con try catch, así que tomemos eso, muévalo aquí y luego capture cualquier potencial errores que podríamos estar 42 00:03:23,250 --> 00:03:29,400 recibiendo aquí y ahora aquí, por supuesto, quiero establecer mi error en el error que estoy 43 00:03:29,400 --> 00:03:30,000 recibiendo 44 00:03:33,030 --> 00:03:39,720 aquí o en el mensaje de error que estoy recibiendo aquí Ahora estamos configurando el error, estamos configurando 45 00:03:39,780 --> 00:03:50,380 la carga estado, por supuesto, esto no tiene ningún efecto aquí en esta pantalla. Entonces, para mostrar un control de carga, debemos importar el indicador de actividad 46 00:03:50,410 --> 00:03:54,120 de React Native, el indicador de actividad de 47 00:03:54,130 --> 00:03:58,930 React Native y mostrar un error, también quiero lanzar una alerta y 48 00:03:58,930 --> 00:04:10,540 para eso, debes asegurarte de que estás importando la alerta que ya estamos haciendo. Ahora, como siguiente paso, para manejar el estado de carga, tal vez allí 49 00:04:10,540 --> 00:04:19,930 antes de devolver mi formulario, comprobaré si isLoading es verdadero y si lo es, devolveré mi vista aquí con el 50 00:04:19,930 --> 00:04:30,010 indicador de actividad allí y allá, yo ' Estableceré el tamaño en grande y estableceré el color en colores y para eso, 51 00:04:30,310 --> 00:04:38,980 debes asegurarte de importar los colores primarios constantes. Así que asegúrese de tener los colores importados constantemente 52 00:04:38,980 --> 00:04:47,480 aquí, eso es necesario y ahora también usaré la hoja de estilos aquí para agregar un nuevo estilo, este 53 00:04:47,500 --> 00:04:55,120 estilo centrado para ser preciso, aquí agregaré centrado y sí, por lo tanto, también podríamos externalizar 54 00:04:55,120 --> 00:04:59,910 esto en un componente de envoltura separado si lo desea. 55 00:05:00,010 --> 00:05:08,300 Allí, estableceré flex en uno, justificaré el contenido al centro y también alinearé los elementos al centro, así. 56 00:05:08,410 --> 00:05:15,250 Ahora podemos aplicar este estilo centrado aquí a la vista que envuelvo alrededor de mi indicador de actividad 57 00:05:15,250 --> 00:05:19,990 estableciendo el estilo aquí en estilos. centrado. 58 00:05:20,040 --> 00:05:26,460 Ahora deberíamos ver esto mientras estamos cargando y en una nota al margen, tampoco debemos navegar hacia atrás antes de 59 00:05:26,460 --> 00:05:27,480 que hayamos terminado. 60 00:05:27,840 --> 00:05:33,700 Entonces, si agrego o si elimino ese signo de exclamación y luego dejo esa entrada para que se envíe y haga clic 61 00:05:33,700 --> 00:05:34,640 en Guardar, verá 62 00:05:34,770 --> 00:05:38,400 el control de carga y solo navegaremos hacia atrás una vez hecho esto. 63 00:05:38,400 --> 00:05:42,180 Ahora Firebase es súper rápido, pero aún así, eso es lo que sucedió. 64 00:05:42,330 --> 00:05:52,970 Ahora para simular un error, iré a las acciones de los productos y allí, en la actualización del producto aquí, eliminaré eso nuevamente para forzar un error y también agregaré 65 00:05:52,970 --> 00:05:58,310 algo más, ahora almacenaré la respuesta aquí en un constante porque ahora realmente me importa, 66 00:05:58,400 --> 00:06:03,130 quiero asegurarme de que si la respuesta no está bien, así que si 67 00:06:03,200 --> 00:06:07,240 tenemos un código de estado 400 o 500, también arrojo 68 00:06:07,250 --> 00:06:14,360 un nuevo error donde digo que algo salió mal o donde cometes cualquier error manejo que desea hacer, para que 69 00:06:14,360 --> 00:06:20,200 también arrojemos un error en ese caso. Por cierto, haré lo mismo 70 00:06:20,210 --> 00:06:25,620 para eliminar antes de probar este error forzado que implementé. 71 00:06:25,670 --> 00:06:29,150 Entonces, aquí para eliminar, también quiero verificar esto y, por supuesto, 72 00:06:29,360 --> 00:06:36,120 aquí, también necesito obtener mi respuesta esperando la búsqueda aquí. De acuerdo con eso, veamos si ese 73 00:06:36,120 --> 00:06:40,400 error forzado para la actualización debido a descartar s 74 00:06:40,470 --> 00:06:46,680 aquí, si eso tiene un efecto. Si ahora vuelvo aquí al administrador, comienzo a agregar esto, agrego 75 00:06:46,680 --> 00:06:48,010 un signo de exclamación 76 00:06:48,030 --> 00:06:54,150 y hago clic en esto, ahora lo que verá es que la actualización simplemente se descarta, por lo que no vemos el 77 00:06:54,240 --> 00:07:00,230 signo de exclamación aquí, pero también no aparece ningún mensaje de error que tiene sentido porque no tengo lógica para hacerlo. 78 00:07:00,310 --> 00:07:01,700 Ahora, ¿cómo podemos manejar esto? 79 00:07:01,720 --> 00:07:04,310 Como dije, quiero lanzar una alerta 80 00:07:04,330 --> 00:07:10,610 y, por lo tanto, usaré el efecto de uso, por lo que ese efecto de uso que 81 00:07:10,690 --> 00:07:16,690 React ofrece y que encontramos aquí, quiero usar eso y simplemente puedo implementarlo aquí después de 82 00:07:16,710 --> 00:07:24,490 inicializar el reductor, digamos, La posición exacta no importa demasiado. El efecto de uso aquí debería volver a ejecutarse siempre que 83 00:07:24,880 --> 00:07:28,670 el error cambie, por lo que si configuramos esto como 84 00:07:28,750 --> 00:07:34,510 un error para que no sea un error, entonces aquí verifico si el error es verdadero, 85 00:07:34,510 --> 00:07:39,010 entonces si tenemos un error y si lo tenemos, entonces yo puede lanzar 86 00:07:39,010 --> 00:07:41,380 una alerta, se produjo un error. 87 00:07:41,380 --> 00:07:48,920 Quiero mostrar mi error aquí y ese debería ser el mensaje de error porque eso es lo que estoy configurando 88 00:07:48,920 --> 00:07:49,350 aquí, 89 00:07:49,370 --> 00:07:55,270 estoy configurando mi error en el mensaje para que sea una cadena que pueda generar y 90 00:07:55,270 --> 00:08:04,610 luego agregaré un botón donde digo OK, que simplemente descarta esto. Ahora también es importante, si recibimos un error, 91 00:08:04,610 --> 00:08:11,180 no quiero navegar lejos. Entonces, para evitar que esto suceda, quiero asegurarme 92 00:08:11,210 --> 00:08:19,670 de que aquí, estos accesorios, esta navegación aquí en realidad solo se realiza si no terminamos en este bloque de captura. 93 00:08:19,700 --> 00:08:27,390 Básicamente, aquí después del bloque if else pero aún en el bloque try, allí quiero navegar lejos. 94 00:08:27,410 --> 00:08:29,300 Así que ahora intentemos de nuevo, regresemos aquí, 95 00:08:29,300 --> 00:08:30,710 editemos esto, agreguemos un signo 96 00:08:30,710 --> 00:08:33,920 de exclamación, haga clic en otro lugar, haga clic en Guardar y ahora recibo 97 00:08:33,920 --> 00:08:40,730 mi mensaje de error aquí y me quedo en esta página y también se restablece. Puedo agregar esto nuevamente, haga clic aquí 98 00:08:40,760 --> 00:08:43,430 y ya no está. 99 00:08:43,700 --> 00:08:50,150 Por otro lado, si ahora corregimos ese error aquí en las acciones al leer eso aquí y ahora volvemos y 100 00:08:50,150 --> 00:08:52,960 echamos otro vistazo a esto, si edito esto, agrego 101 00:08:52,970 --> 00:08:57,170 mi signo de exclamación, hago clic en otro lugar y hago clic en 102 00:08:57,170 --> 00:08:59,880 guardar, ahora que todo funciona como debería. 103 00:08:59,900 --> 00:09:04,200 Así que ahora esto realmente funciona y ahora se comporta de la forma en que debería comportarse. 104 00:09:04,220 --> 00:09:09,890 Ahora, por supuesto, también puede agregar una flecha de carga y un controlador de errores aquí a la pantalla del producto del usuario 105 00:09:09,890 --> 00:09:10,840 si lo desea. 106 00:09:10,850 --> 00:09:15,800 Entonces, si elimina esto, lo que no haré aquí, pero si elimina esto, actualmente no obtendría 107 00:09:15,800 --> 00:09:17,300 una ruleta, una ruleta 108 00:09:17,300 --> 00:09:22,610 de carga, tampoco recibirá un error si falla. Para ahorrar algo de tiempo, no implementaré esto aquí, 109 00:09:22,610 --> 00:09:26,590 pero podrías implementarlo básicamente de la misma manera que lo hicimos antes si quisieras. 110 00:09:26,600 --> 00:09:28,670 Eso es algo que definitivamente también puedes hacer.