Por lo tanto, almacenar es excelente, buscar también sería bueno y, al final, quiero asegurarme de que, por
ejemplo, cuando visitamos la pantalla de descripción general de los
productos, simplemente lleguemos al servidor y obtengamos todos los productos desde allí, de modo que en
esta pantalla ,
cada vez que lo visitamos, cargamos los últimos productos.
Ahora, para eso, debemos enviar una solicitud HTTP desde allí
y, por lo tanto, al final lo que quiero hacer es enviar una nueva acción de Redux que llegue al servidor,
obtenga mis productos desde allí y luego configure los productos en mi tienda Así que necesito una nueva acción aquí,
establecer productos, que no necesitaba antes porque solo trabajamos con productos ficticios, pero ahora ese ya
no es el caso, así que los productos establecidos ahora deberían enviarse y necesitaré un nuevo creador
de acciones aquí que nombraré para buscar productos. Para esto no tengo un identificador porque nunca enviaré esto como
una acción que debería llegar al reductor, en cambio,
solo será mi creador de acciones con el código asíncrono con la solicitud HTTP.
No necesitará ningún argumento, pero gracias a Redux Thunk, devuelve una función que obtiene esa función de envío como argumento
y, al final, quiero enviar un objeto de acción
donde el tipo es productos establecidos y donde quiero reenviar mi productos pero, por supuesto, eso no debería ser una
matriz vacía, sino los productos que obtengo de mi API. Por lo tanto, podemos hacer una copia de este
código aquí, incluida la parte de despacho asíncrono aquí, hasta llegar a donde obtenemos los datos de respuesta, copiar eso
desde crear producto y reemplazar
esta parte aquí con él y ahora lo que hacemos es Enviamos una solicitud a la misma
URL que antes, lo que tiene sentido porque es donde se
almacenan los productos.
Sin embargo, ahora quiero establecer una solicitud de obtención y ese es realmente el valor predeterminado
cuando usamos fetch, por lo que no necesitamos configurar esto. Para una solicitud de obtención, tampoco necesita establecer ningún encabezado y
no
puede establecer un cuerpo, por lo que en realidad aquí, podemos deshacernos por completo de este segundo
argumento en la búsqueda, simplemente enviamos una solicitud de búsqueda como esta.
Ahora la respuesta recuperará nuestros datos, pero ahora hay una característica importante sobre el formato
de esos datos y es mejor si simplemente vemos eso.
Permítanme que la consola registre los datos de respuesta aquí y comente esto por el momento o podemos dejarlo allí, no hace
ningún daño, tampoco
hace nada útil, no estamos manejando esto en
el reductor todavía, pero registremos esto y ahora vayamos a la pantalla de resumen de productos y
asegurémonos de que allí, despachemos esta acción de recuperación de productos. Ahora, afortunadamente, ya tengo acceso a la función de envío
de Redux allí en la descripción general de los productos, por lo que
ahora solo necesito agregar un efecto de uso para poder disparar esto cada vez que se carga este componente.
Entonces, aquí, puedo agregar el efecto de uso y en mi función aquí, puedo llamar al despacho y ahora comunicarme con
las acciones de mi producto que, por lo
tanto, necesito importar como acciones de productos de acciones de la tienda productos, como este, que deberían ser acciones y ahora usar las acciones de productos aquí para disparar mi acción
de obtención de productos que al final hará esta solicitud HTTP y este efecto debería ejecutarse
cada vez que se cargue mi componente. Entonces, puedo agregar una matriz vacía y, de hecho, agregar mi
única dependencia que tengo, que es
despachar, aquí es la única dependencia que definimos dentro de nuestro componente, para que esto nunca vuelva a ejecutarse.
El único momento en que se ejecutará es cuando se cargue este componente y ese
es exactamente el caso,
cada vez que visite la pantalla, quiero activar este efecto aquí.
Entonces, si ahora guardo esto, guardemos esto y ahora mientras se carga,
ves aquí en el registro, esto es lo que sucedió aquí tanto en Android como en iOS, por eso
lo veo dos veces.
Esto es lo que obtuve
al final, este objeto fue devuelto por Firebase.
Es un objeto con todos mis productos y solo tengo uno, por eso solo veo uno aquí y cada objeto
coincide con su ID única, pero eso
es importante.
No volvemos a la matriz, recuperamos un objeto con ID únicos como claves y los valores para
estas claves son mis datos de objeto y solo necesitamos saber eso para manejarlo correctamente.
Entonces, de vuelta en
nuestra acción, así es como se ven los
datos de respuesta, por supuesto, en mi aplicación, trabajo con una matriz, así que necesito transformar esto.
Entonces, mis productos cargados o como quieran llamarlo aquí deberían ser una matriz
vacía y ahora podemos recorrer ese objeto para asignar los datos del objeto,
los productos en el objeto a los productos en la matriz.
Es relativamente fácil de hacer, podemos agregar un ciclo for / in aquí con nuestra clave donde
revisamos todos los datos de respuesta que obtuvimos aquí al final y luego aquí, agrego cada producto a mis productos cargados con push, para que esto
La matriz crece con el tiempo y lo que agrego aquí
al final es solo un nuevo producto, utilizando el modelo de producto que, por lo tanto, debe importar,
así
que asegúrese de tener esa importación aquí apuntando a la carpeta de modelos y allí
al archivo del producto y
yo crear un nuevo producto aquí donde mi ID es esa clave porque esa es esa ID única aquí que tenemos
en ese objeto para el que estamos en bucle, luego esa cosa del usuario, eso es U1 todavía, datos ficticios
porque no tenemos datos de usuario involucrados de vez en cuando tenemos que buscar el objeto que recuperamos de Firebase para obtener
el título, etc.
Entonces, aquí, nuestro título para este nuevo producto que estamos creando es simplemente resData para la clave dada. título y lo mismo, por supuesto,
aquí para
el imageUrl, entonces. URL de la imagen. Por la
descripción y por supuesto también por el precio, así. Entonces, esto agrega todo a los productos cargados y ahora los productos cargados serán
una matriz poblada que puedo agregar aquí a la acción que se envía, a la acción
de establecer productos.
Entonces, lo único que falta es que ahora vamos al reductor y allí, podemos manejar los productos establecidos, tal vez aquí como
el primer caso, pero por supuesto, la posición no importa. Agregue productos establecidos aquí y para
eso, asegúrese de importarlos desde su archivo de acciones y luego allí, es algo muy
trivial que estamos a punto de hacer. Al final, solo necesito devolver un
nuevo estado donde los productos disponibles sean iguales a la acción. productos, por lo que a los productos que obtuve aquí en mi creador
de acciones que agrego a mi acción enviada. Y para el producto
del usuario, es bastante similar, hay acción. productos, simplemente filtrados para todos los productos que tienen mi ID de usuario, así que
en este momento debido a mi código ficticio aquí donde codifico mi ID de usuario, eso por supuesto
significa que todos los productos cargados se tratan como mis productos.
Esto es algo que cambiaremos más adelante una vez que agreguemos la autenticación. Entonces con eso, ahora si esto se
recarga, verá que comenzamos con los datos ficticios, pero luego esto se reemplaza
inmediatamente con estos datos cargados. Entonces, cargar datos funciona bien,
podemos trabajar con eso como podríamos con nuestros propios datos aquí.
Por supuesto, no estamos almacenando pedidos en el servidor ni nada de eso, pero podemos cargar nuestros
datos que previamente almacenamos en el servidor.