Para asegurarnos de que se cargan, nuevamente
necesitamos volver al creador de la acción y agregar una nueva acción en el creador de la acción de órdenes, disculpe.
Un identificador que necesito es establecer órdenes, del mismo modo que teníamos una para establecer productos para establecer las órdenes cargadas
y luego aquí tengo mi creador
de acción para buscar órdenes que no toma argumentos, pero que luego devuelve mi función de envío asíncrono, gracias a
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
mis órdenes cargadas y, por supuesto, eso no debería ser una matriz vacía.
En cambio, podemos tomar prestada la lógica del creador de acciones de productos, de buscar productos allí. Podemos tomar toda esa lógica,
copiar todo eso aquí y pasarlo al creador de la acción de órdenes
y
ejecutarlo antes de enviarlo, aquí. Ahora, por supuesto, tenemos que ajustar esto, por ejemplo, la solicitud debe enviarse
a pedidos / U1 y nuevamente se reemplazará más tarde con un valor dinámico,
por ahora está codificado para buscar pedidos para este usuario. Debería ser una solicitud de obtención, quiero comprobar esto,
está bien.
Aquí obtuve mis
datos de respuesta, ahora recibí mis pedidos cargados, ese
parece ser un nombre más
apropiado, todavía reviso todos los datos que obtuve y quiero establecer mis pedidos cargados allí, pero
ahora hay una diferencia importante, No creo nuevos
productos aquí que agrego a los pedidos cargados, en lugar de eso
necesito crear nuevos pedidos aquí y para eso, debe importar
el pedido desde el modelo de pedido. Ahora también veo que falta una llave,
ahora antes de proceder con eso, necesito asegurarme de que también atrape cualquier error
que pueda estar obteniendo y allí quiero lanzar el error, básicamente volver a tirarlo, asegurarme llega a mi componente y necesito una
llave de cierre
más, pero ahora volviendo a nuestra lógica aquí donde creo nuevos pedidos, allí la
ID es la clave, al igual que para los productos, los
artículos se pueden encontrar en mis datos de respuesta porque básicamente, recupere esto aquí, así que los datos de
respuesta contendrán una clave de elementos de tarjeta, por ejemplo, que contiene los elementos
de mi tarjeta que necesito. Entonces los datos de respuesta para la clave dada y allí,. cardItems, ahí es donde
encuentro mis artículos porque eso es lo que enviamos aquí al final para almacenar los artículos de la tarjeta, entonces
mi pedido que creo aquí, por supuesto, también necesita la cantidad
total, lo obtengo de la clave resData y luego allí si tenemos un vistazo a
Firebase, es ese campo de cantidad total aquí y la fecha.
Bueno, para eso, creo un nuevo objeto de fecha pero lo inicializo con la clave resData. fecha.
Ahora necesitamos crear un nuevo objeto de datos porque resData key. la fecha es solo esa cadena de fecha aquí y
necesito un objeto de fecha, no una cadena de
fecha, por lo tanto, la envolvemos, esta cadena la envolvemos con la creación del objeto de fecha aquí y, por lo tanto,
obtenemos
un objeto de datos y ese es el orden que agrego
aquí para pedidos cargados, hacemos eso para todos los pedidos que estamos obteniendo y con eso, podemos enviar esto y ahora
solo tenemos que manejarlo en el reductor de pedidos.
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
de estado donde las órdenes son iguales a la acción. órdenes y eso es todo lo
que tenemos que hacer,
muy simple.
Ahora, ¿por qué es tan simple?
Porque en el creador de la acción, hacemos todo el trabajo. Allí mapeamos nuestros pedidos y luego aquí, solo tengo
la clave de órdenes en mi acción que contiene todos
los pedidos mapeados, así que eso es justo lo que necesito almacenar aquí.
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
para hacer eso y para despachar, también necesitamos importar el despacho de uso de React Redux
y luego aquí podemos obtener acceso a esa función
de despacho ejecutando el despacho de uso y luego aquí el efecto de
uso, agregamos despacho como una dependencia porque en esta función de efecto aquí, despacho y ahora necesito mis acciones
de pedido, así que permítanme importar
todo como acciones de pedidos desde la carpeta de la tienda, desde la carpeta de acciones, desde el archivo
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
lo tanto, ahora si guardamos esto y vamos a la pantalla de pedidos,
inicialmente está vacío pero muy muy rápido y carga todos los pedidos que almacenamos y esos son estos tres órdenes que tengo
aquí y, por supuesto, podemos ampliar esto como antes. Ahora, un spinner de carga también sería bueno y, por supuesto,
también puedes pausar
el video aquí y probarlo por tu cuenta.
Lo haré rápidamente de la misma manera que antes: importe el estado
de uso de React, luego configure aquí el estado isLoading y establezca isLoading ejecutando el estado de uso y estableciendo esto en falso inicialmente
y luego aquí en el efecto, al final quiero para usar async esperar.
Ahora dije que no puede o no debe agregar asíncrono aquí, por lo que podemos usarlo aquí simplemente o envolverlo en
una función auxiliar.
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é
que tenemos una respuesta, así que aquí estableceré isLoading en false.
Ahora, tenga en cuenta que no estoy teniendo manejo de errores aquí, así que
si esto falla no lo estamos manejando, en su lugar siempre
estaremos en el estado de carga, por lo que, por supuesto, es
posible que desee considerar agregar también el manejo de errores. Simplemente no lo haré aquí porque
mostré cómo funciona, para no hinchar demasiado este módulo, no
lo implementaré, pero puedo pero,
por supuesto, podría manejar los errores aquí si desea usar esto, luego acérquese aquí agregando
también catch, esto
es algo que puede hacer absolutamente aquí.
Sin embargo,
me centraré en la parte de carga. Ahora que tengo todo eso configurado, podemos importar el
indicador de actividad e importar
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
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
ser el color que necesita importar, por lo tanto primario, así que asegúrese de tener esa importación de
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
estilos aquí con la ayuda de Stylesheet. crear y centrado debe tener la
configuración de flex one, justificar el centro de contenido y alinear el centro de elementos,
de esta manera. Con eso, si lo guardamos, miramos las órdenes, vemos la ruleta. Nuevamente, se está cargando muy rápido, pero
puede verlo si observa de cerca, aquí está la rueda giratoria durante una fracción de
segundo y, a continuación, se cargan los pedidos. Así que ahora funciona, almacenar y recuperar órdenes también
funciona y con eso, implementamos solicitudes HTTP y usamos un servidor para almacenar los datos en esta aplicación.