Entonces, ahora que agregamos el almacenamiento, la recuperación, la actualización y la eliminación y, por lo tanto, todas las
funcionalidades crud, y pudimos ver cómo mostrar una flecha de carga y errores
de manejo, faltan dos cosas.
Una es que cuando realizamos un pedido, también lo enviamos a un servidor y almacenamos el pedido allí y no solo
localmente, porque ahora, por supuesto, cuando ordenamos
algo, lo vemos aquí, pero tan pronto volvemos a cargar la aplicación ya que no la
estamos almacenando en un servidor, eso se pierde, así que
eso es una cosa.
La otra cosa es, por supuesto, que solo mostramos una rueda de
carga aquí y también manejamos los errores aquí. En la pantalla de administración, si
algo sale mal, no obtenemos ningún error, también aquí, si lo editamos y lo enviamos,
no vemos la flecha de carga mientras esperamos que se envíe.
Entonces eso también es algo que podríamos mejorar
y esa es realmente la parte con la que quiero comenzar.
Entonces, aquí en la pantalla de edición de productos cuando enviamos actualizaciones o creaciones, en ambos casos esto, por
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
utilizando la función Redux Thunk de devolviendo una función de envío asíncrono aquí que, por lo tanto, devuelve una
promesa que, por lo tanto, se devuelve como parte de nuestra función de envío, llame aquí.
Por lo tanto, en realidad obtenemos la información, ya sea que estemos esperando la respuesta, ya sea
que tengamos un error o que
hayamos terminado, solo necesitamos usarla
y, por supuesto, podemos usarla de una manera similar a como lo hicimos antes, con el estado de uso importado de React y
luego administrando la carga y el estado de error aquí. Nota al margen, por supuesto, también podría trabajar con
un reductor donde fusiona ambos estados si lo desea con la ayuda del gancho reductor de uso.
Sin embargo, aquí me atendré a isLoading y estableceré isLoading e inicialmente, por supuesto, esto es falso y también tengo el error y
establezco las variables de error aquí con un estado de uso como este, que inicialmente no está definido y ahora solo tenemos que configurar
esto ya que ' re-despachando acciones o como estamos obteniendo errores.
Entonces, cuando estamos a punto de enviar esto, no importa si estamos
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.
Ahora, una vez que hayamos terminado, quiero hacer otra cosa, pero para eso, primero tenemos que esperar a
que finalice el envío.
Ahora, por lo tanto, podemos convertir esto en una función asincrónica nuevamente, solo para que pueda usar
para
esperar la palabra clave allí, la alternativa sería no convertir esto en una función asincrónica y simplemente agregar luego y capturar
a partir de
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
de los dos se ejecutará porque esa es una condición if, pero podemos esperar a que termine y,
por lo tanto, después de este bloque if, sabemos que
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
manejar los errores, solo necesitamos envolver esto con un bloque try catch y, de hecho, podemos envolver todo el
bloque if aquí con try catch, así que tomemos eso, muévalo aquí y luego capture cualquier potencial errores que podríamos estar
recibiendo aquí y ahora aquí, por supuesto, quiero establecer mi error en el error que estoy
recibiendo
aquí o en el mensaje de error que estoy recibiendo aquí Ahora estamos configurando el error, estamos configurando
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
de React Native, el indicador de actividad de
React Native y mostrar un error, también quiero lanzar una alerta y
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í
antes de devolver mi formulario, comprobaré si isLoading es verdadero y si lo es, devolveré mi vista aquí con el
indicador de actividad allí y allá, yo ' Estableceré el tamaño en grande y estableceré el color en colores y para eso,
debes asegurarte de importar los colores primarios constantes. Así que asegúrese de tener los colores importados constantemente
aquí, eso es necesario y ahora también usaré la hoja de estilos aquí para agregar un nuevo estilo, este
estilo centrado para ser preciso, aquí agregaré centrado y sí, por lo tanto, también podríamos externalizar
esto en un componente de envoltura separado si lo desea.
Allí, estableceré flex en uno, justificaré el contenido al centro y también alinearé los elementos al centro, así.
Ahora podemos aplicar este estilo centrado aquí a la vista que envuelvo alrededor de mi indicador de actividad
estableciendo el estilo aquí en estilos. centrado.
Ahora deberíamos ver esto mientras estamos cargando y en una nota al margen, tampoco debemos navegar hacia atrás antes de
que hayamos terminado.
Entonces, si agrego o si elimino ese signo de exclamación y luego dejo esa entrada para que se envíe y haga clic
en Guardar, verá
el control de carga y solo navegaremos hacia atrás una vez hecho esto.
Ahora Firebase es súper rápido, pero aún así, eso es lo que sucedió.
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é
algo más, ahora almacenaré la respuesta aquí en un constante porque ahora realmente me importa,
quiero asegurarme de que si la respuesta no está bien, así que si
tenemos un código de estado 400 o 500, también arrojo
un nuevo error donde digo que algo salió mal o donde cometes cualquier error manejo que desea hacer, para que
también arrojemos un error en ese caso. Por cierto, haré lo mismo
para eliminar antes de probar este error forzado que implementé.
Entonces, aquí para eliminar, también quiero verificar esto y, por supuesto,
aquí, también necesito obtener mi respuesta esperando la búsqueda aquí. De acuerdo con eso, veamos si ese
error forzado para la actualización debido a descartar s
aquí, si eso tiene un efecto. Si ahora vuelvo aquí al administrador, comienzo a agregar esto, agrego
un signo de exclamación
y hago clic en esto, ahora lo que verá es que la actualización simplemente se descarta, por lo que no vemos el
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.
Ahora, ¿cómo podemos manejar esto?
Como dije, quiero lanzar una alerta
y, por lo tanto, usaré el efecto de uso, por lo que ese efecto de uso que
React ofrece y que encontramos aquí, quiero usar eso y simplemente puedo implementarlo aquí después de
inicializar el reductor, digamos, La posición exacta no importa demasiado. El efecto de uso aquí debería volver a ejecutarse siempre que
el error cambie, por lo que si configuramos esto como
un error para que no sea un error, entonces aquí verifico si el error es verdadero,
entonces si tenemos un error y si lo tenemos, entonces yo puede lanzar
una alerta, se produjo un error.
Quiero mostrar mi error aquí y ese debería ser el mensaje de error porque eso es lo que estoy configurando
aquí,
estoy configurando mi error en el mensaje para que sea una cadena que pueda generar y
luego agregaré un botón donde digo OK, que simplemente descarta esto. Ahora también es importante, si recibimos un error,
no quiero navegar lejos. Entonces, para evitar que esto suceda, quiero asegurarme
de que aquí, estos accesorios, esta navegación aquí en realidad solo se realiza si no terminamos en este bloque de captura.
Básicamente, aquí después del bloque if else pero aún en el bloque try, allí quiero navegar lejos.
Así que ahora intentemos de nuevo, regresemos aquí,
editemos esto, agreguemos un signo
de exclamación, haga clic en otro lugar, haga clic en Guardar y ahora recibo
mi mensaje de error aquí y me quedo en esta página y también se restablece. Puedo agregar esto nuevamente, haga clic aquí
y ya no está.
Por otro lado, si ahora corregimos ese error aquí en las acciones al leer eso aquí y ahora volvemos y
echamos otro vistazo a esto, si edito esto, agrego
mi signo de exclamación, hago clic en otro lugar y hago clic en
guardar, ahora que todo funciona como debería.
Así que ahora esto realmente funciona y ahora se comporta de la forma en que debería comportarse.
Ahora, por supuesto, también puede agregar una flecha de carga y un controlador de errores aquí a la pantalla del producto del usuario
si lo desea.
Entonces, si elimina esto, lo que no haré aquí, pero si elimina esto, actualmente no obtendría
una ruleta, una ruleta
de carga, tampoco recibirá un error si falla. Para ahorrar algo de tiempo, no implementaré esto aquí,
pero podrías implementarlo básicamente de la misma manera que lo hicimos antes si quisieras.
Eso es algo que definitivamente también puedes hacer.