1 00:00:02,510 --> 00:00:05,000 Comencemos cambiando ese icono de estrella 2 00:00:05,020 --> 00:00:08,580 en función de si este es actualmente un favorito o no, 3 00:00:08,600 --> 00:00:14,390 quiero tener esa estrella llena solo si es una favorita y una estrella vacía si no lo es. 4 00:00:14,390 --> 00:00:19,040 Entonces, al final en la pantalla de detalles de la comida, necesitamos intercambiar ese ícono que mostramos aquí 5 00:00:19,040 --> 00:00:25,270 en función del estado favorito de esta comida que cargamos aquí. Una vez más, el problema aquí es que podemos 6 00:00:25,350 --> 00:00:32,040 averiguar si esa comida es una de las favoritas o no de una manera muy fácil en la función del componente, 7 00:00:32,040 --> 00:00:34,910 pero no realmente en las opciones de navegación. 8 00:00:34,920 --> 00:00:42,010 Entonces, nuevamente, necesitaremos parámetros para comunicarnos entre estos dos, pero en general, eso no es demasiado difícil. 9 00:00:43,620 --> 00:00:49,830 Lo que quiero hacer aquí es obtener mis comidas favoritas con la ayuda del selector de uso en la función del componente de la pantalla de detalles de comidas 10 00:00:49,830 --> 00:00:56,260 con la ayuda del estado y luego el estado. comidas comidas favoritas, así que quiero 11 00:00:56,270 --> 00:01:01,380 obtener todas mis comidas favoritas y ahora simplemente quiero verificar si esa comida es parte 12 00:01:04,190 --> 00:01:12,410 de las comidas favoritas y, por lo tanto, podemos refinar esto e incluso nombrar esta comida actual como favorita y en el selector no 13 00:01:12,410 --> 00:01:18,830 solo regresar las comidas favoritas, pero agregue un poco más de lógica y simplemente agregue un cheque donde 14 00:01:18,950 --> 00:01:23,300 llamamos a algunos, que también es un método incorporado que devuelve verdadero 15 00:01:23,300 --> 00:01:30,170 si la condición que estamos a punto de especificar es verdadera para al menos un elemento en ese matriz y 16 00:01:30,320 --> 00:01:41,090 allí, verifico para cada comida que está allí, si la ID de comida es igual a la ID de comida que recupero aquí y, por lo tanto, tengo que intercambiar líneas. 17 00:01:41,260 --> 00:01:46,570 Así que aquí, obtengo el Id. De la comida donde estamos cargando en la pantalla de detalles 18 00:01:46,570 --> 00:01:54,290 y luego verifico mis comidas favoritas, si esa ID de comida es parte de ellas, lo que significa que esta comida es parte de nuestros favoritos. 19 00:01:54,320 --> 00:01:59,600 Entonces, con eso, tenemos esta comida actual es información favorita, ahora tenemos que pasarla a las opciones de navegación 20 00:01:59,630 --> 00:02:07,010 y nuevamente, podemos hacer esto con efecto de uso, tal vez allí abajo. Al igual que antes, proporcione una función aquí en una 21 00:02:07,010 --> 00:02:15,020 matriz de dependencias, en la función aquí estableceré parámetros de conjunto de navegación de accesorios para fusionar más datos en mis parámetros y ese 22 00:02:15,050 --> 00:02:21,620 es quizás el parámetro favorito, el nombre depende de usted, lo que tiene la comida actual es el valor favorito, 23 00:02:21,620 --> 00:02:27,740 por lo que ese valor que acabamos de derivar y ahora una dependencia de esa función, de esa 24 00:02:27,740 --> 00:02:33,710 llamada de efecto de uso, quiero decir, por supuesto, la comida actual es favorita, cuando eso cambia, quiero 25 00:02:33,710 --> 00:02:41,170 enviar la nueva información a los parámetros y por lo tanto al encabezado, de lo contrario este efecto no debería volver a ejecutarse. 26 00:02:41,240 --> 00:02:48,740 Así que ahora de vuelta en las opciones de navegación, podemos recuperar esa información aquí, su 27 00:02:48,740 --> 00:02:54,960 favorito se puede recuperar de navigationData. navegación con la ayuda de get param y allí llamo 28 00:02:54,980 --> 00:02:58,640 a esto es fav, aquí está, así que ese es el nombre 29 00:02:59,460 --> 00:03:01,360 con el que podemos recuperarlo. 30 00:03:01,370 --> 00:03:06,080 Ahora tenemos la información favorita en el encabezado y ahora podemos usarla para representar un icono diferente 31 00:03:06,080 --> 00:03:06,610 aquí. 32 00:03:06,620 --> 00:03:12,260 Entonces, en lugar de representar siempre la estrella de iOS, tendré una expresión dinámica aquí y comprobaré si su favorito 33 00:03:12,260 --> 00:03:13,610 es verdadero, si es así, 34 00:03:13,610 --> 00:03:17,440 entonces quiero usar la estrella de iOS, que es esta estrella de campo, 35 00:03:17,810 --> 00:03:18,500 si no 36 00:03:18,620 --> 00:03:22,220 lo es, yo ' Presentaré el esquema de estrella de iOS y 37 00:03:22,220 --> 00:03:23,570 será una estrella vacía. 38 00:03:24,730 --> 00:03:28,960 Con eso, esperamos tener una configuración que funcione como se esperaba. 39 00:03:29,020 --> 00:03:30,400 Si voy al espagueti, ahora 40 00:03:30,400 --> 00:03:32,760 es una estrella vacía y si hago clic en 41 00:03:32,770 --> 00:03:35,640 esta, es una estrella llena y es parte de los favoritos. 42 00:03:35,650 --> 00:03:41,020 Si luego voy a la pantalla de detalles aquí, verá que también toma un poco hasta que 43 00:03:41,020 --> 00:03:47,590 la estrella se complete aquí, tendremos que arreglar esto. Si ahora hago clic aquí y volvemos a las comidas, allí 44 00:03:47,590 --> 00:03:53,660 también se actualizó y esa es la magia de Redux, actualiza una parte de la aplicación si algo relacionado cambia en otra 45 00:03:53,740 --> 00:03:58,570 parte, así es exactamente como debería comportarse aquí. Entonces, eso generalmente funciona, lo 46 00:03:58,570 --> 00:04:05,890 único que no fue demasiado hermoso es que esta estrella aquí inicialmente está vacía y solo se llena después 47 00:04:05,890 --> 00:04:08,640 de cargarla, por lo que podemos arreglar 48 00:04:08,650 --> 00:04:15,760 eso, pero aparte de eso, esto funciona como debería. Ahora, para arreglar esta estrella inicialmente vacía, nuevamente 49 00:04:15,880 --> 00:04:16,950 podemos usar 50 00:04:16,990 --> 00:04:21,400 una solución que expliqué anteriormente para los datos del encabezado inicial. 51 00:04:21,550 --> 00:04:24,040 No queremos esperar a que termine el 52 00:04:24,040 --> 00:04:29,140 primer renderizado, en su lugar, deberíamos pasar estos datos iniciales a este componente cuando naveguemos hacia él. 53 00:04:30,090 --> 00:04:35,910 Por lo tanto, es hora de que la lista de comidas vuelva a tener esta acción de 54 00:04:35,910 --> 00:04:43,170 navegación para reenviar también esta clave favorita, por lo que esta clave que intenté extraer aquí en la pantalla de detalles 55 00:04:44,040 --> 00:04:50,580 de la comida allí abajo, get param es favorita. Quiero pasar el valor actual cuando cargamos este componente, cuando cargamos esta 56 00:04:50,790 --> 00:04:55,680 pantalla aquí desde dentro de la lista de comidas, que es el componente que dispara esa navegación a 57 00:04:56,390 --> 00:04:57,540 los detalles de 58 00:04:57,690 --> 00:05:03,390 las comidas y, por supuesto, a los datos de elemento. el artículo es una sola comida, pero no contiene información sobre si es parte de nuestros 59 00:05:03,390 --> 00:05:04,070 favoritos o no, 60 00:05:04,180 --> 00:05:08,460 pero por supuesto podemos averiguar si ese es el caso o no. En la lista de comidas, 61 00:05:08,460 --> 00:05:14,360 también podemos acceder a la tienda Redux, no solo desde los componentes de la pantalla. 62 00:05:14,370 --> 00:05:22,260 Entonces, aquí también puedo usar el selector de uso de React Redux de esta manera y luego, en mi componente aquí, puedo obtener mis comidas favoritas con la 63 00:05:22,260 --> 00:05:31,560 ayuda del selector de uso donde obtengo mi estado y luego el estado de retorno. las comidas salpican las comidas favoritas para obtener todas mis comidas favoritas 64 00:05:31,560 --> 00:05:34,150 y ahora, cuando representamos un solo artículo 65 00:05:34,260 --> 00:05:39,240 de comida, podemos usarlo para averiguar si ese artículo de comida es parte de 66 00:05:39,240 --> 00:05:41,070 nuestros favoritos. Por cierto, 67 00:05:41,100 --> 00:05:43,710 no puede usar el selector de uso allí, 68 00:05:43,770 --> 00:05:49,680 ese no sería un uso válido porque debe usar React hooks solo en el nivel raíz de 69 00:05:49,680 --> 00:05:53,950 la función de su componente, no en funciones anidadas o anidadas si 70 00:05:53,970 --> 00:05:56,370 son bloques o algo así, por lo 71 00:05:57,430 --> 00:06:03,500 tanto, no está permitido usar el selector de uso aquí, pero podemos usar nuestras comidas favoritas allí, por 72 00:06:03,830 --> 00:06:12,890 lo tanto, aquí podemos averiguar si es un favorito simplemente al verificar las comidas favoritas y buscar la comida donde su ID coincide con el elemento Datos 73 00:06:12,890 --> 00:06:14,840 . 74 00:06:14,840 --> 00:06:14,840 articulo. 75 00:06:14,870 --> 00:06:20,990 id, por lo que la identificación de la comida que estamos procesando actualmente. Por lo tanto, su favorito mantendrá el elemento que encontramos 76 00:06:20,990 --> 00:06:27,290 allí, alternativamente, usaremos algunos aquí, que es un método de Javascript incorporado que devolverá verdadero si algún elemento en 77 00:06:27,290 --> 00:06:29,930 las comidas favoritas cumple con esta condición. 78 00:06:29,930 --> 00:06:35,570 Entonces, si su favorito es verdadero, sabemos que este elemento es un favorito y, por lo tanto, podemos usar su 79 00:06:35,570 --> 00:06:40,300 favorito como valor para fav, que pasamos como parámetro inicial a la pantalla de detalles de 80 00:06:40,460 --> 00:06:44,930 la comida y ahora esta estrella parpadeante que inicialmente está vacía debería estar ido. 81 00:06:44,930 --> 00:06:50,630 Ahora, si marco esto como favorito aquí y lo dejo y vuelvo, se completa desde el 82 00:06:50,630 --> 00:06:51,550 principio, también 83 00:06:51,590 --> 00:06:56,660 en la pantalla de favoritos, por supuesto. Entonces es así, así es como podemos trabajar con 84 00:06:56,730 --> 00:06:58,830 favoritos, ahora asegurémonos de mostrar texto falso 85 00:06:58,830 --> 00:07:03,660 aquí en la pantalla de favoritos en caso de que no tengamos datos que mostrar de 86 00:07:03,680 --> 00:07:05,400 otra manera y, a partir de 87 00:07:05,400 --> 00:07:06,960 entonces, cuidemos nuestros filtros.