Entonces, en el creador de acciones de creación de productos que actualmente es una función que solo devuelve
una acción, ahora podemos ajustar esto un poco. En lugar de devolver una acción, ahora
podemos
devolver otra función allí gracias a Redux Thunk, gracias a este paquete podemos hacerlo ahora y esta será una
función que recibe la función de envío como argumento y, a su vez, necesita enviar un acción. Entonces, aquí, en esta función de retorno, ahora simplemente
no
necesito devolver esto, sino enviar esta acción, esa
es la diferencia importante y me falta una llave aquí.
¿Entonces qué pasó?
Cambio el producto de creación para que sea una función que aún podemos enviar desde nuestros componentes, pero que ahora
puede funcionar como antes, por lo que
no necesitamos cambiar todos estos creadores de acciones, por lo que puede seguir con la
sintaxis anterior, pero ahora gracias a Redux Thunk, una sintaxis alternativa, por decirlo así,
también es compatible cuando esta función creadora de acciones no devuelve inmediatamente un objeto de acción, sino que
devuelve una función y, si lo hace, Redux Thunk intervendrá y se asegurará de que todo siga
funciona y si devuelve una función, entonces esta es una función que debe recibir un argumento,
la función de despacho que Redux Thunk pasará automáticamente, por lo que Redux Thunk finalmente llamará a
esta
función por usted y luego, por lo tanto, puede luego despache una nueva acción y aquí, despache
el objeto de acción real que previamente queríamos despachar, pero antes
de hacerlo, ahora puede ejecutar cualquier código asíncrono que desee y que se permitirá y no romperá su Redux fluya porque
Redux Thunk se encargará de esto y puede obtener más información sobre esto en
mi Curso React, por ejemplo, o por supuesto, en la
documentación oficial de Redux Thunk, también en los documentos oficiales de Redux.
Así que ahora aquí podemos enviar una solicitud HTTP y en React Native, podemos usar la API
fetch que está incorporada y fetch
aquí funciona básicamente como la API fetch en el navegador donde también está disponible.
Se necesita una URL a la que desea enviar la solicitud y esa es la URL que
obtuvimos aquí, así que simplemente copiaré esa URL de Firebase y la ingresaré aquí.
Ahora buscar suena como si siempre solo obtuviera datos, por
lo que si obtiene datos pero en realidad el nombre es un poco confuso aquí, no solo se usa para obtener
datos, también puede usarlo para enviar una solicitud de publicación o una
solicitud de venta, por lo que cualquier tipo de solicitud HTTP. Ahora, no solo enviamos una solicitud a esta URL, sino que,
como dije, Firebase traduce sus solicitudes a una especie de consulta de base de datos y una estructura de base de datos, para que
pueda agregar cualquier nodo que desee aquí, cualquier segmento
que desee, como por ejemplo, los productos y Firebase crearán una carpeta aquí en la base de datos y almacenarán
sus datos allí.
Importante y eso es solo una cosa específica de Firebase, debe agregar. json aquí
Entonces, eso no es necesario debido a React Native o debido a Javascript o porque es una solicitud HTTP, esto es
solo una cosa específica de Firebase. De forma predeterminada, esto enviaría una solicitud
de obtención, pero para almacenar datos, Firebase quiere una solicitud de publicación y para enviarla, tenemos que pasar un
segundo argumento para obtener, que debería ser un objeto Javascript. En ese segundo argumento, puede configurar la clave
del método y describir el método HTTP de esta solicitud y que se puede obtener, poner y así
sucesivamente, y aquí debe ser la publicación que agrega este producto que estamos a punto de enviar a este nodo
que será creado allí
Ahora también puede configurar algunos encabezados allí y necesitamos establecer un encabezado,
debemos agregar el encabezado de tipo de contenido y simplemente agregar encabezados como un objeto y luego tener pares
clave-valor con sus identificadores de encabezado como claves y los valores como valores y aquí el valor es
application / json para que Firebase sepa que estamos a punto de enviar algunos datos JSON
y luego tenemos que hacer eso.
Necesitamos agregar un cuerpo con los datos que queremos agregar a esta solicitud y los datos deben estar
en formato JSON.
Afortunadamente, React Native es compatible con el objeto JSON, que también es compatible con Javascript en el
navegador, y allí podemos llamar a stringify para convertir una matriz u objeto Javascript en formato JSON, por lo
que en una
cadena al final, quiero agregar mi producto. Por lo tanto, al final, quiero
encadenar un objeto aquí que contenga mi título, mi descripción, mi
imageUrl y mi precio, no el ID
porque en realidad Firebase generará un ID para nosotros aquí, lo cual es realmente conveniente.
Ahora, esto enviará la solicitud, pero, por supuesto, solo quiero crear el producto localmente
si esa solicitud tuvo éxito porque entonces también puedo usar esa ID creada automáticamente que
Firebase me devolverá y buscar convenientemente devuelve una promesa, que es este objeto Javascript que eventualmente se resolverá a un valor
en el futuro o arrojará un error en el futuro.
Entonces, para esperar esta respuesta, podemos agregar luego aquí después de buscar, así que
en esta promesa y obtendremos nuestra respuesta aquí para que podamos hacer cualquier cosa con la respuesta.
También puede escuchar los errores con catch y eso es algo que en realidad ya
debería saber porque las promesas
no son específicas de React Native, eso es Javascript vainilla y React Native también admite la sintaxis de espera
async más moderna en lugar de entonces y catch. Para usar eso, agrega asíncrono aquí delante de su
función, esta palabra clave asíncrona y ahora puede esperar su respuesta aquí y almacenarla en una constante con esta sintaxis, con
la palabra clave aguardar.
Ahora detrás de escena, esto transforma esto a la sintaxis anterior con
entonces, así que es como si agregaste aquí y usaste tu respuesta en una devolución de llamada que recibiste allí.
Pero esto es un poco más fácil de leer y es por eso que usaré esta sintaxis async
en espera, solo tenga en cuenta el hecho de que esto es como agregar, simplemente más legible. Por cierto, cuando use async wait, esta función
siempre devolverá automáticamente una promesa, por lo tanto, toda esta función de
crear
producto ahora devuelve una promesa.
No lo hizo antes, ahora
lo hará,
ya ves que aquí, ahora devuelve una promesa. Así que esa es nuestra respuesta,
esta respuesta ahora se puede desempaquetar para obtener los datos allí, por lo que
los datos de respuesta se realizan llamando a la respuesta. json, ese es un método que está disponible en
ese objeto de respuesta que estamos obteniendo. Nuevamente, esta es una tarea asíncrona que
debemos esperar y ahora al final nos dará los datos devueltos por Firebase cuando agreguemos un producto.
Ahora podemos por ahora simplemente registrar esos datos de respuesta para ver qué hay allí y todavía envío mi acción aquí,
pero como hemos esperado aquí y, por lo tanto, esto es como si estuviera en múltiples bloques,
esto solo se enviará una vez que estas operaciones aquí estén hecho.
Así que con eso, guardemos esto y agreguemos un nuevo producto yendo a la sección
de administración aquí y luego agregaré
una camisa blanca, elegí una buena imagen para
eso, aquí está.
Digamos que cuesta 39. 99, esta es una camisa blanca que es bastante elegante.
Si ahora guardo esto, necesito cargar esto primero, ahora esto se agrega, aquí está y ahora
si echa un vistazo
a Firebase,
también vemos que ahora hay un nodo de productos. Ahí, esta es esta identificación única y allí
tenemos los datos que enviamos y si echas un vistazo a tu consola,
ves que esto es lo que obtuvimos, esos son
los datos de respuesta aquí.
Esto contiene una clave de nombre y luego también contiene esta ID que Firebase generó, esto significa que cuando enviamos nuestros datos aquí, en
realidad podemos agregar una clave de identificación aquí y agregar resData. nombre para acceder a esta clave de nombre
en la respuesta devuelta por Firebase para reenviar el ID generado del lado del servidor a
nuestro reductor de producto creado al final o a la lógica que se ejecuta en el reductor.
Entonces, ahora en el reductor de productos, en realidad no podemos usar esta ID ficticia aquí, sino
esperar eso en los datos de nuestros productos. Allí ahora obtenemos un campo de ID que es la ID generada
en el lado del servidor, aunque me quedaré con la ID de usuario ficticia por ahora, pero obtendremos esta ID generada en el lado
del servidor aquí y aquí, y por lo tanto, la usamos el frontend, que será importante para más adelante
cuando también eliminemos cosas, etc.
Entonces esto agrega un producto, pero por supuesto, tan pronto como volvemos a cargar la aplicación, desaparece porque en la aplicación, solo
se almacenaba en la memoria.
Ahora también lo almacenamos en un servidor, pero nunca lo recuperamos de un servidor,
así que asegurémonos de hacerlo también.