1 00:00:02,060 --> 00:00:07,190 Entonces, en el creador de acciones de creación de productos que actualmente es una función que solo devuelve 2 00:00:07,550 --> 00:00:12,560 una acción, ahora podemos ajustar esto un poco. En lugar de devolver una acción, ahora 3 00:00:12,560 --> 00:00:13,050 podemos 4 00:00:13,070 --> 00:00:18,890 devolver otra función allí gracias a Redux Thunk, gracias a este paquete podemos hacerlo ahora y esta será una 5 00:00:18,890 --> 00:00:29,650 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 6 00:00:29,650 --> 00:00:31,100 no 7 00:00:31,180 --> 00:00:36,310 necesito devolver esto, sino enviar esta acción, esa 8 00:00:36,310 --> 00:00:42,090 es la diferencia importante y me falta una llave aquí. 9 00:00:42,130 --> 00:00:43,110 ¿Entonces qué pasó? 10 00:00:43,360 --> 00:00:50,230 Cambio el producto de creación para que sea una función que aún podemos enviar desde nuestros componentes, pero que ahora 11 00:00:50,740 --> 00:00:53,500 puede funcionar como antes, por lo que 12 00:00:53,530 --> 00:00:58,870 no necesitamos cambiar todos estos creadores de acciones, por lo que puede seguir con la 13 00:00:58,870 --> 00:01:03,770 sintaxis anterior, pero ahora gracias a Redux Thunk, una sintaxis alternativa, por decirlo así, 14 00:01:03,970 --> 00:01:10,180 también es compatible cuando esta función creadora de acciones no devuelve inmediatamente un objeto de acción, sino que 15 00:01:10,180 --> 00:01:15,970 devuelve una función y, si lo hace, Redux Thunk intervendrá y se asegurará de que todo siga 16 00:01:16,510 --> 00:01:22,180 funciona y si devuelve una función, entonces esta es una función que debe recibir un argumento, 17 00:01:22,390 --> 00:01:28,390 la función de despacho que Redux Thunk pasará automáticamente, por lo que Redux Thunk finalmente llamará a 18 00:01:28,390 --> 00:01:28,900 esta 19 00:01:29,620 --> 00:01:35,560 función por usted y luego, por lo tanto, puede luego despache una nueva acción y aquí, despache 20 00:01:35,560 --> 00:01:39,680 el objeto de acción real que previamente queríamos despachar, pero antes 21 00:01:39,850 --> 00:01:47,170 de hacerlo, ahora puede ejecutar cualquier código asíncrono que desee y que se permitirá y no romperá su Redux fluya porque 22 00:01:47,200 --> 00:01:52,240 Redux Thunk se encargará de esto y puede obtener más información sobre esto en 23 00:01:52,240 --> 00:01:56,020 mi Curso React, por ejemplo, o por supuesto, en la 24 00:01:56,110 --> 00:02:00,340 documentación oficial de Redux Thunk, también en los documentos oficiales de Redux. 25 00:02:00,350 --> 00:02:05,900 Así que ahora aquí podemos enviar una solicitud HTTP y en React Native, podemos usar la API 26 00:02:05,900 --> 00:02:08,120 fetch que está incorporada y fetch 27 00:02:08,120 --> 00:02:12,590 aquí funciona básicamente como la API fetch en el navegador donde también está disponible. 28 00:02:12,590 --> 00:02:17,210 Se necesita una URL a la que desea enviar la solicitud y esa es la URL que 29 00:02:17,210 --> 00:02:21,180 obtuvimos aquí, así que simplemente copiaré esa URL de Firebase y la ingresaré aquí. 30 00:02:21,380 --> 00:02:24,440 Ahora buscar suena como si siempre solo obtuviera datos, por 31 00:02:24,440 --> 00:02:30,440 lo que si obtiene datos pero en realidad el nombre es un poco confuso aquí, no solo se usa para obtener 32 00:02:30,440 --> 00:02:33,950 datos, también puede usarlo para enviar una solicitud de publicación o una 33 00:02:34,040 --> 00:02:40,640 solicitud de venta, por lo que cualquier tipo de solicitud HTTP. Ahora, no solo enviamos una solicitud a esta URL, sino que, 34 00:02:40,640 --> 00:02:47,930 como dije, Firebase traduce sus solicitudes a una especie de consulta de base de datos y una estructura de base de datos, para que 35 00:02:47,930 --> 00:02:50,990 pueda agregar cualquier nodo que desee aquí, cualquier segmento 36 00:02:50,990 --> 00:02:57,230 que desee, como por ejemplo, los productos y Firebase crearán una carpeta aquí en la base de datos y almacenarán 37 00:02:57,230 --> 00:02:58,410 sus datos allí. 38 00:02:58,700 --> 00:03:03,800 Importante y eso es solo una cosa específica de Firebase, debe agregar. json aquí 39 00:03:03,830 --> 00:03:11,140 Entonces, eso no es necesario debido a React Native o debido a Javascript o porque es una solicitud HTTP, esto es 40 00:03:11,140 --> 00:03:15,690 solo una cosa específica de Firebase. De forma predeterminada, esto enviaría una solicitud 41 00:03:15,700 --> 00:03:21,280 de obtención, pero para almacenar datos, Firebase quiere una solicitud de publicación y para enviarla, tenemos que pasar un 42 00:03:21,280 --> 00:03:27,610 segundo argumento para obtener, que debería ser un objeto Javascript. En ese segundo argumento, puede configurar la clave 43 00:03:27,610 --> 00:03:34,480 del método y describir el método HTTP de esta solicitud y que se puede obtener, poner y así 44 00:03:34,480 --> 00:03:42,070 sucesivamente, y aquí debe ser la publicación que agrega este producto que estamos a punto de enviar a este nodo 45 00:03:42,070 --> 00:03:44,130 que será creado allí 46 00:03:44,140 --> 00:03:47,760 Ahora también puede configurar algunos encabezados allí y necesitamos establecer un encabezado, 47 00:03:47,920 --> 00:03:53,530 debemos agregar el encabezado de tipo de contenido y simplemente agregar encabezados como un objeto y luego tener pares 48 00:03:53,530 --> 00:03:58,950 clave-valor con sus identificadores de encabezado como claves y los valores como valores y aquí el valor es 49 00:03:59,200 --> 00:04:04,290 application / json para que Firebase sepa que estamos a punto de enviar algunos datos JSON 50 00:04:04,360 --> 00:04:06,530 y luego tenemos que hacer eso. 51 00:04:06,580 --> 00:04:11,680 Necesitamos agregar un cuerpo con los datos que queremos agregar a esta solicitud y los datos deben estar 52 00:04:11,680 --> 00:04:12,730 en formato JSON. 53 00:04:12,730 --> 00:04:19,240 Afortunadamente, React Native es compatible con el objeto JSON, que también es compatible con Javascript en el 54 00:04:19,240 --> 00:04:26,440 navegador, y allí podemos llamar a stringify para convertir una matriz u objeto Javascript en formato JSON, por lo 55 00:04:26,440 --> 00:04:28,040 que en una 56 00:04:28,040 --> 00:04:33,210 cadena al final, quiero agregar mi producto. Por lo tanto, al final, quiero 57 00:04:33,210 --> 00:04:37,420 encadenar un objeto aquí que contenga mi título, mi descripción, mi 58 00:04:39,100 --> 00:04:42,100 imageUrl y mi precio, no el ID 59 00:04:42,100 --> 00:04:47,830 porque en realidad Firebase generará un ID para nosotros aquí, lo cual es realmente conveniente. 60 00:04:49,070 --> 00:04:54,610 Ahora, esto enviará la solicitud, pero, por supuesto, solo quiero crear el producto localmente 61 00:04:54,820 --> 00:05:00,490 si esa solicitud tuvo éxito porque entonces también puedo usar esa ID creada automáticamente que 62 00:05:00,490 --> 00:05:08,410 Firebase me devolverá y buscar convenientemente devuelve una promesa, que es este objeto Javascript que eventualmente se resolverá a un valor 63 00:05:08,410 --> 00:05:12,620 en el futuro o arrojará un error en el futuro. 64 00:05:12,940 --> 00:05:19,290 Entonces, para esperar esta respuesta, podemos agregar luego aquí después de buscar, así que 65 00:05:19,290 --> 00:05:26,170 en esta promesa y obtendremos nuestra respuesta aquí para que podamos hacer cualquier cosa con la respuesta. 66 00:05:26,190 --> 00:05:31,200 También puede escuchar los errores con catch y eso es algo que en realidad ya 67 00:05:31,200 --> 00:05:33,290 debería saber porque las promesas 68 00:05:33,300 --> 00:05:39,900 no son específicas de React Native, eso es Javascript vainilla y React Native también admite la sintaxis de espera 69 00:05:39,900 --> 00:05:46,270 async más moderna en lugar de entonces y catch. Para usar eso, agrega asíncrono aquí delante de su 70 00:05:46,290 --> 00:05:53,700 función, esta palabra clave asíncrona y ahora puede esperar su respuesta aquí y almacenarla en una constante con esta sintaxis, con 71 00:05:53,700 --> 00:05:55,400 la palabra clave aguardar. 72 00:05:55,410 --> 00:05:59,520 Ahora detrás de escena, esto transforma esto a la sintaxis anterior con 73 00:05:59,580 --> 00:06:05,640 entonces, así que es como si agregaste aquí y usaste tu respuesta en una devolución de llamada que recibiste allí. 74 00:06:05,640 --> 00:06:09,480 Pero esto es un poco más fácil de leer y es por eso que usaré esta sintaxis async 75 00:06:09,480 --> 00:06:17,160 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 76 00:06:17,160 --> 00:06:22,770 siempre devolverá automáticamente una promesa, por lo tanto, toda esta función de 77 00:06:22,770 --> 00:06:23,780 crear 78 00:06:23,820 --> 00:06:25,880 producto ahora devuelve una promesa. 79 00:06:26,010 --> 00:06:27,330 No lo hizo antes, ahora 80 00:06:27,330 --> 00:06:28,300 lo hará, 81 00:06:28,350 --> 00:06:33,040 ya ves que aquí, ahora devuelve una promesa. Así que esa es nuestra respuesta, 82 00:06:34,280 --> 00:06:38,960 esta respuesta ahora se puede desempaquetar para obtener los datos allí, por lo que 83 00:06:39,140 --> 00:06:45,430 los datos de respuesta se realizan llamando a la respuesta. json, ese es un método que está disponible en 84 00:06:45,430 --> 00:06:50,730 ese objeto de respuesta que estamos obteniendo. Nuevamente, esta es una tarea asíncrona que 85 00:06:51,050 --> 00:06:56,910 debemos esperar y ahora al final nos dará los datos devueltos por Firebase cuando agreguemos un producto. 86 00:06:56,920 --> 00:07:03,620 Ahora podemos por ahora simplemente registrar esos datos de respuesta para ver qué hay allí y todavía envío mi acción aquí, 87 00:07:03,620 --> 00:07:09,320 pero como hemos esperado aquí y, por lo tanto, esto es como si estuviera en múltiples bloques, 88 00:07:09,320 --> 00:07:13,520 esto solo se enviará una vez que estas operaciones aquí estén hecho. 89 00:07:13,520 --> 00:07:19,190 Así que con eso, guardemos esto y agreguemos un nuevo producto yendo a la sección 90 00:07:19,190 --> 00:07:21,580 de administración aquí y luego agregaré 91 00:07:21,830 --> 00:07:24,820 una camisa blanca, elegí una buena imagen para 92 00:07:24,820 --> 00:07:26,320 eso, aquí está. 93 00:07:26,320 --> 00:07:34,510 Digamos que cuesta 39. 99, esta es una camisa blanca que es bastante elegante. 94 00:07:34,510 --> 00:07:39,110 Si ahora guardo esto, necesito cargar esto primero, ahora esto se agrega, aquí está y ahora 95 00:07:39,110 --> 00:07:40,130 si echa un vistazo 96 00:07:40,130 --> 00:07:41,130 a Firebase, 97 00:07:41,210 --> 00:07:46,310 también vemos que ahora hay un nodo de productos. Ahí, esta es esta identificación única y allí 98 00:07:46,310 --> 00:07:50,430 tenemos los datos que enviamos y si echas un vistazo a tu consola, 99 00:07:50,620 --> 00:07:53,440 ves que esto es lo que obtuvimos, esos son 100 00:07:53,440 --> 00:07:55,100 los datos de respuesta aquí. 101 00:07:55,120 --> 00:08:01,780 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 102 00:08:01,780 --> 00:08:08,670 realidad podemos agregar una clave de identificación aquí y agregar resData. nombre para acceder a esta clave de nombre 103 00:08:08,720 --> 00:08:14,800 en la respuesta devuelta por Firebase para reenviar el ID generado del lado del servidor a 104 00:08:14,800 --> 00:08:21,330 nuestro reductor de producto creado al final o a la lógica que se ejecuta en el reductor. 105 00:08:21,340 --> 00:08:28,960 Entonces, ahora en el reductor de productos, en realidad no podemos usar esta ID ficticia aquí, sino 106 00:08:28,960 --> 00:08:36,530 esperar eso en los datos de nuestros productos. Allí ahora obtenemos un campo de ID que es la ID generada 107 00:08:36,530 --> 00:08:43,430 en el lado del servidor, aunque me quedaré con la ID de usuario ficticia por ahora, pero obtendremos esta ID generada en el lado 108 00:08:43,430 --> 00:08:48,910 del servidor aquí y aquí, y por lo tanto, la usamos el frontend, que será importante para más adelante 109 00:08:48,920 --> 00:08:50,600 cuando también eliminemos cosas, etc. 110 00:08:50,630 --> 00:08:55,460 Entonces esto agrega un producto, pero por supuesto, tan pronto como volvemos a cargar la aplicación, desaparece porque en la aplicación, solo 111 00:08:55,460 --> 00:08:56,810 se almacenaba en la memoria. 112 00:08:56,810 --> 00:09:01,190 Ahora también lo almacenamos en un servidor, pero nunca lo recuperamos de un servidor, 113 00:09:01,220 --> 00:09:03,170 así que asegurémonos de hacerlo también.