1 00:00:02,170 --> 00:00:10,150 ¿Cómo podemos resolver el problema que aquí necesitamos para encontrar una comida específica y realmente no podemos usar nuestro 2 00:00:10,600 --> 00:00:13,600 selector aquí en las opciones de navegación? 3 00:00:13,600 --> 00:00:19,960 Ahora hay dos soluciones posibles: la solución número uno es que volvemos a usar los viejos y buenos parámetros 4 00:00:19,990 --> 00:00:22,190 para comunicarnos entre las opciones de 5 00:00:22,210 --> 00:00:29,470 componentes y navegación como lo mostré en el módulo de navegación. Aquí en el componente, estamos cargando nuestra comida, así que, por 6 00:00:29,470 --> 00:00:37,310 supuesto, aquí podemos usar los parámetros de configuración de navegación de accesorios y ahora establecer los parámetros a un nuevo valor aquí y ahora podemos usar los 7 00:00:37,310 --> 00:00:43,300 parámetros establecidos para reenviar la comida seleccionada o su título al encabezado y lo que establezca aquí es params, por 8 00:00:43,300 --> 00:00:48,340 cierto, se fusionará con los params existentes, por lo que esto no los anulará, por lo que 9 00:00:48,340 --> 00:00:52,630 no anulará su comidaId que está recuperando aquí, que todavía estará allí, solo está agregando 10 00:00:52,870 --> 00:00:56,840 algo nuevo, solo está anulando un parámetro si ya existe en los parámetros. 11 00:00:56,920 --> 00:01:04,030 Entonces, aquí, podríamos agregar la clave del título de la comida y establecerla en la comida seleccionada. título. 12 00:01:04,050 --> 00:01:13,120 Ahora, esto significa que envié estos parámetros a mi encabezado cuando este componente se procesa al final. 13 00:01:15,800 --> 00:01:20,270 Ahora, dado que esto cambiará los accesorios, generalmente terminaríamos en un bucle infinito, por 14 00:01:20,270 --> 00:01:24,710 lo que para romper esto, usaremos el efecto de uso aquí como 15 00:01:24,800 --> 00:01:29,780 lo mostré en el módulo de navegación y lo haremos dentro del efecto de uso. 16 00:01:29,780 --> 00:01:32,690 Entonces, aquí podemos usar el efecto de uso y, 17 00:01:35,230 --> 00:01:41,430 como dependencia, especificaré una matriz vacía por ahora y luego estableceré parámetros aquí dentro de la función de efecto de 18 00:01:41,440 --> 00:01:42,320 uso y 19 00:01:42,520 --> 00:01:47,290 no tendré una matriz vacía aquí, en cambio, mi dependencia aquí es mi seleccionada comida. 20 00:01:47,290 --> 00:01:55,150 Cuando eso cambie, quiero reenviar la nueva información al encabezado. Ahora veremos si eso funciona, vamos al encabezado y 21 00:01:55,150 --> 00:01:56,250 allí podemos 22 00:01:56,350 --> 00:01:59,050 recuperar eso de los parámetros. 23 00:01:59,050 --> 00:02:01,720 Así que aquí tengo el título de mi 24 00:02:02,080 --> 00:02:09,240 comida, puedo obtener esto con navigationData. navegación. título de la comida getParam, ese 25 00:02:09,240 --> 00:02:12,660 fue el nombre que elegí al configurar los parámetros aquí. 26 00:02:19,700 --> 00:02:21,590 Ahora, con el título de 27 00:02:21,590 --> 00:02:28,190 la comida seleccionado aquí, podemos establecer el título del encabezado para ese título de comida y comentar esta línea porque no funcionará 28 00:02:28,200 --> 00:02:30,140 de todos modos y vamos a intentarlo. 29 00:02:30,140 --> 00:02:35,660 Guardemos esto y vayamos a la página de detalles y mientras esto 30 00:02:35,660 --> 00:02:40,410 funciona, verán un problema. Cuando esto se carga, inicialmente no hay título y esto 31 00:02:40,430 --> 00:02:42,140 solo aparece después de un tiempo. 32 00:02:42,140 --> 00:02:47,350 Entonces, solo después de que esto esté completamente cargado, vemos que el título emergente no es 33 00:02:47,360 --> 00:02:49,530 demasiado hermoso y la razón de 34 00:02:49,790 --> 00:02:55,340 esto simplemente es que nuestra lógica aquí funciona, pero dado que el efecto de uso se ejecuta después 35 00:02:55,340 --> 00:03:00,770 de que el componente se haya procesado por primera vez, esperamos para que el componente se procese 36 00:03:00,770 --> 00:03:06,980 por primera vez hasta que enviemos los parámetros al título y eso significa que cuando esta transición todavía se está 37 00:03:06,980 --> 00:03:12,400 reproduciendo y la representación no se ha completado por completo, en realidad no estamos mostrando ese título. 38 00:03:12,680 --> 00:03:15,630 Es por eso que esta podría no ser 39 00:03:15,650 --> 00:03:20,960 la solución óptima aquí y comentaré esto. Una mejor solución aquí, tan barata como puede 40 00:03:21,060 --> 00:03:26,310 parecer, pero que también es una solución que a menudo puede usar, es que simplemente reenvíe el título 41 00:03:26,310 --> 00:03:31,800 que necesitaremos aquí desde el componente del que proviene, para que lo cargue cuando está en el componente que 42 00:03:31,800 --> 00:03:36,510 irá a este componente y lo envía a este componente antes de que se cargue. 43 00:03:36,510 --> 00:03:42,090 Entonces, enviemos los datos por adelantado y venimos de la pantalla de favoritos 44 00:03:42,090 --> 00:03:49,880 o de la pantalla de categoría de comida. Allí, al final tocamos un elemento en la lista de comidas y en ambos elementos, 45 00:03:49,890 --> 00:03:54,240 en ambos componentes, pantalla de favoritos y pantalla de comidas de categoría, estamos usando la lista de comidas, 46 00:03:54,240 --> 00:04:00,420 lo cual es bueno porque eso significa que podemos ir a la lista de comidas aquí y allí, tenemos esta acción de navegación y ahora simplemente, 47 00:04:00,420 --> 00:04:06,330 además de pasar la identificación de la comida, sería bueno si ya pasamos el título de la comida porque aquí la tenemos disponible, ¿verdad? 48 00:04:06,540 --> 00:04:13,350 itemData. articulo. título, ese es nuestro título de la comida. Simplemente suministrándolo aquí, resolvemos todos los 49 00:04:13,350 --> 00:04:17,950 problemas que tenemos en la otra pantalla, así que ese es definitivamente el enfoque que queremos usar aquí. 50 00:04:18,090 --> 00:04:24,060 Entonces, al establecer ese parámetro aquí en el componente donde activamos esa acción de navegación a la página de detalles de 51 00:04:24,060 --> 00:04:30,270 la comida, solucionamos este problema porque ahora ves que el título está allí desde el principio y no tenemos ningún problema, 52 00:04:30,270 --> 00:04:36,180 por supuesto. también en Android si lo probamos allí. Mi emulador es un poco 53 00:04:36,180 --> 00:04:43,380 lento, pero generalmente también puedes verlo allí. Así es como podemos trabajar con datos en 54 00:04:43,380 --> 00:04:50,850 el encabezado cuando lo necesitamos de Redux y con eso, tenemos un primer estado sólido, podemos usar 55 00:04:50,850 --> 00:04:54,830 nuestros datos de Redux. Lo que realmente no podemos hacer es 56 00:04:54,900 --> 00:04:59,790 cambiarlo, así que ese es el siguiente paso, queremos agregar algo de lógica para que podamos cambiar los datos, que 57 00:04:59,880 --> 00:05:01,890 podamos marcar favoritos y que podamos filtrar nuestros datos.