1 00:00:02,370 --> 00:00:08,100 Ahora con los filtros renderizados aquí, por supuesto, sería bueno tener un botón de guardar aquí en la parte 2 00:00:08,100 --> 00:00:11,840 superior que nos permita guardar cualquier cambio en los filtros que hicimos. 3 00:00:11,940 --> 00:00:16,530 Entonces, en la pantalla de filtros, ya tenemos un botón de encabezado en headerLeft, ahora también 4 00:00:16,530 --> 00:00:23,430 quiero tener uno en headerRight, a la derecha de mi encabezado. Entonces headerRight aquí es básicamente el mismo que tenemos aquí, 5 00:00:23,430 --> 00:00:28,050 así que podemos copiar esto aquí porque queremos tener botones de encabezado allí con 6 00:00:28,050 --> 00:00:35,280 un botón, ese será el botón guardar y el icono que podemos usar allí es, por ejemplo, y de Por supuesto, puede 7 00:00:35,280 --> 00:00:41,250 elegir uno diferente, pero aquí, iré con, por ejemplo, guardar y ahora, cuando se presiona, sin embargo, 8 00:00:41,400 --> 00:00:44,940 será un poco complicado. Por supuesto, podemos activar 9 00:00:44,940 --> 00:00:48,710 una función y podríamos consolar los filtros para guardar registros aquí. 10 00:00:48,900 --> 00:00:54,000 Ahora, la lógica real para guardar y aplicar filtros es algo de lo que nos ocuparemos en el 11 00:00:54,120 --> 00:00:57,150 próximo módulo, pero aún así, hay algún problema con eso. 12 00:00:57,720 --> 00:01:01,530 Si lo guardo así y vamos a los filtros, por supuesto, 13 00:01:01,530 --> 00:01:12,150 podemos presionar esto, esto funciona, pero lo que sería bueno es que realmente reunimos nuestro estado actual de filtros, así que básicamente obtenga una instantánea de nuestro estado actual aquí 14 00:01:12,150 --> 00:01:19,170 y por el momento, registre esto en la consola, en el siguiente módulo aplique esto de alguna manera para 15 00:01:19,320 --> 00:01:26,740 filtrar las recetas que mostramos en las otras pantallas. Ahora esto puede sonar trivial, pero tendremos un problema aquí, nuestros 16 00:01:26,740 --> 00:01:28,910 filtros, por lo que la 17 00:01:29,110 --> 00:01:36,360 información, qué filtros están configurados, todo está almacenado en estas variables de estado aquí, correcto y eso es parte de nuestro componente, 18 00:01:36,370 --> 00:01:38,560 nuestro botón, sin embargo, está en 19 00:01:38,770 --> 00:01:41,530 la navegación opciones y sí, allí obtenemos los 20 00:01:41,530 --> 00:01:47,440 datos de ajuste que, por ejemplo, nos dan el apoyo de navegación al final, pero lo que no 21 00:01:47,450 --> 00:01:52,990 tenemos aquí es el acceso al estado de nuestro componente y eso es lo que necesito 22 00:01:52,990 --> 00:01:57,970 aquí, y ahora esto es realmente es un patrón importante que podría parecer un truco 23 00:01:58,540 --> 00:02:08,020 extraño o solución alternativa, pero que es la forma de comunicarse realmente entre sus opciones de navegación y su componente si depende de cambiar los datos en su 24 00:02:08,020 --> 00:02:13,150 componente dentro de sus opciones de navegación. Entonces, en las opciones 25 00:02:13,150 --> 00:02:18,830 de navegación, necesita información sobre los datos que cambiaron en su componente. 26 00:02:18,840 --> 00:02:24,980 Por cierto, este es un enfoque que se encuentra en los documentos oficiales de navegación. Podemos usar parámetros, para que pasemos entre 27 00:02:25,190 --> 00:02:30,940 pantallas, para comunicarnos entre nuestro componente y las opciones de navegación y esto puede 28 00:02:31,010 --> 00:02:35,070 sonar extraño, pero esto es exactamente lo que haremos ahora. 29 00:02:36,360 --> 00:02:44,170 Digamos aquí en nuestro componente, agregamos una nueva función y nombraré esta función aquí para guardar 30 00:02:44,460 --> 00:02:46,950 filtros, puede nombrarla como desee. 31 00:02:47,000 --> 00:02:49,970 Es una función que no toma argumentos, pero 32 00:02:51,110 --> 00:02:57,410 que tiene un trabajo, creará una constante de filtros aplicados, por ejemplo, que es un objeto que reúne nuestros filtros. 33 00:02:57,410 --> 00:03:02,300 Entonces, podríamos tener glutenFree como clave y almacenar isGlutenFree como 34 00:03:02,300 --> 00:03:07,250 valor, tenemos lactosaFree como clave y almacenar nuestro valor de estado 35 00:03:07,250 --> 00:03:08,480 actual isLactoseFree. 36 00:03:08,690 --> 00:03:17,540 Hacemos lo mismo para vegan con isVegan y hacemos lo mismo para isVegetarian y isVegetarian, de esa manera y, 37 00:03:17,540 --> 00:03:23,930 a partir de entonces, voy a consolar el registro de este filtro aplicado. 38 00:03:24,070 --> 00:03:32,770 Ahora la cuestión es que me gustaría dar acceso a esta función que es parte de mi componente a mis opciones de navegación para poder 39 00:03:32,770 --> 00:03:38,080 activar esta función desde dentro de las opciones de navegación y para esto, podemos usar 40 00:03:38,200 --> 00:03:38,890 parámetros. 41 00:03:42,490 --> 00:03:49,300 Agreguemos el efecto de uso para que tengamos una forma de ejecutar código cada vez 42 00:03:49,300 --> 00:03:58,810 que nuestro estado cambie porque es cuando quiero reenviar esta función actualizada que básicamente captura mi estado actual en mis opciones 43 00:03:58,810 --> 00:03:59,830 de navegación. 44 00:03:59,830 --> 00:04:06,280 Entonces, aquí, puedo agregar el efecto de uso y el efecto de uso toma una función que se 45 00:04:06,280 --> 00:04:16,460 ejecuta cada vez que cambia nuestro estado y cualquiera que sea el componente que se vuelve a generar y, allí, ahora podemos usar parámetros de conjunto de navegación de accesorios. 46 00:04:16,460 --> 00:04:18,130 No hemos usado set 47 00:04:18,130 --> 00:04:20,400 params antes, solo trabajamos con get param. 48 00:04:20,510 --> 00:04:27,170 No utilizamos parámetros establecidos porque antes solo establecimos parámetros cuando navegamos a una nueva pantalla, luego, por ejemplo, como 49 00:04:27,170 --> 00:04:33,530 en la pantalla de categorías, pasamos nuestros parámetros de esta manera a la nueva pantalla, pero podemos usar 50 00:04:33,560 --> 00:04:42,160 parámetros para actualizar los parámetros valores para la pantalla cargada actualmente. Ahora aquí en esta pantalla, no tenemos parámetros, por lo que 51 00:04:42,160 --> 00:04:44,600 está vacío, por lo tanto, podemos 52 00:04:45,690 --> 00:04:51,120 establecer parámetros para un objeto nuevo aquí y quiero agregar una entrada allí, pero puede 53 00:04:51,120 --> 00:04:52,810 agregar tantos como desee. 54 00:04:53,780 --> 00:05:04,040 Quiero agregar una tecla de guardar y puede tomar cualquier nombre para esa tecla que desee y apuntar a guardar filtros, así 55 00:05:04,060 --> 00:05:08,520 que en esta función. No ejecuto la función, no agrego 56 00:05:08,580 --> 00:05:10,050 paréntesis, solo lo 57 00:05:10,080 --> 00:05:16,740 señalo, solo uso esta variable que contiene un puntero en esta función al final y reenvío este valor, así 58 00:05:16,740 --> 00:05:23,250 que reenvíe este puntero o almacene este puntero en esa función en esa tecla de guardar, en ese 59 00:05:23,250 --> 00:05:28,230 objeto que ahora configuro como parámetros en esta pantalla, en la pantalla de filtros. 60 00:05:28,430 --> 00:05:34,280 Esto nos permite ir a las opciones de navegación y allí tenemos acceso a los datos 61 00:05:34,340 --> 00:05:43,310 de navegación y, por lo tanto, a la navegación hacia la derecha, y eso significa que aquí para el botón Guardar, al presionar esto, en realidad 62 00:05:43,310 --> 00:05:46,790 podemos usar navData. navegación. getParam, así 63 00:05:46,790 --> 00:05:53,060 es como podemos recuperar un parámetro y también está disponible aquí en las opciones de navegación, 64 00:05:53,060 --> 00:06:03,270 guardar y puedo recuperar ese parámetro de guardar que estoy configurando aquí en efecto y sé que esto es súper extraño la primera vez que 65 00:06:03,280 --> 00:06:08,120 ves esto y parece un truco realmente sucio pero no lo es. 66 00:06:08,200 --> 00:06:14,230 Esta es una forma válida de comunicación entre su componente y sus opciones de navegación que normalmente 67 00:06:14,230 --> 00:06:18,300 necesita cuando tiene elementos de acción en sus opciones de navegación. 68 00:06:18,310 --> 00:06:26,880 Esto nos dará acceso a nuestros parámetros y allí accederemos al parámetro de guardar, el parámetro de guardado será esta función y actualizaremos el valor en 69 00:06:27,600 --> 00:06:33,180 ese parámetro cada vez que cambie nuestro estado y tenemos que hacer esto porque en esta 70 00:06:33,180 --> 00:06:38,880 función, esto se recrea cada vez nuestro estado cambia y registra los últimos valores de estado y, 71 00:06:38,880 --> 00:06:40,530 por supuesto, eso es 72 00:06:40,620 --> 00:06:45,420 lo que queremos cuando esta función se ejecute eventualmente con la ayuda de parámetros 73 00:06:45,750 --> 00:06:49,110 a través de ese botón en las opciones de navegación. 74 00:06:49,110 --> 00:06:54,300 Por lo tanto, utilizamos los parámetros como una forma de comunicarnos entre nuestro componente y 75 00:06:54,300 --> 00:06:59,730 las opciones de navegación, como una solución alternativa, pero de hecho, la que también se encuentra en 76 00:06:59,730 --> 00:07:07,390 los documentos oficiales y la forma en que se comunica aquí. Ahora, antes de guardar esto, hay dos cosas que debemos hacer, usar efecto 77 00:07:07,390 --> 00:07:14,320 ahora se ejecuta cada vez que este componente se actualiza. Al final, solo debería ejecutarse cuando los filtros guardados tengan un nuevo valor. 78 00:07:14,440 --> 00:07:20,740 Así que agregaré el segundo argumento para usar el efecto, que es esta matriz de dependencias y allí, guardar filtros, por lo que 79 00:07:20,980 --> 00:07:23,530 esta variable aquí que tiene una función es 80 00:07:23,530 --> 00:07:26,470 una dependencia y en este momento, esto siempre se reconstruirá 81 00:07:26,470 --> 00:07:30,900 cuando se reconstruya el componente, por lo que no es Realmente es una dependencia que nos 82 00:07:31,090 --> 00:07:37,600 ayuda, pero pronto lo arreglaremos y los accesorios también son una dependencia. Ahora, en realidad, para evitar representaciones innecesarias cada vez 83 00:07:37,600 --> 00:07:39,140 que cambie algo en 84 00:07:39,370 --> 00:07:48,330 el componente param, usaré una forma diferente de extraer mi accesorio de navegación, usaré la desestructuración aquí, así, la navegación es igual a los 85 00:07:48,870 --> 00:07:49,770 accesorios. 86 00:07:49,770 --> 00:07:56,350 Esta es una sintaxis que usa la desestructuración de objetos, lo que significa que los accesorios son un objeto y esto saca la tecla de navegación y la almacena en 87 00:07:56,350 --> 00:08:02,460 una constante nueva del mismo nombre, por lo tanto, de la misma navegación. Almacena el valor en el accesorio de navegación 88 00:08:02,460 --> 00:08:05,560 en esa constante de navegación ahora, eso es lo 89 00:08:05,560 --> 00:08:11,940 que hace la sintaxis y las ventajas de que ahora tenemos una constante de navegación aquí que podemos usar 90 00:08:11,940 --> 00:08:17,780 en efecto sin accesorios porque tenemos esto almacenado en una constante separada ahora y ahora podemos agregar esto 91 00:08:17,820 --> 00:08:21,860 como una dependencia, lo que significa que cuando esto cambie, esto se 92 00:08:21,990 --> 00:08:27,500 reconstruirá, pero si algo más en los accesorios cambia, esto no volverá a ejecutar el efecto innecesariamente. 93 00:08:27,750 --> 00:08:34,350 Ahora, para asegurarnos de que los filtros guardados solo se actualicen cuando nuestro estado cambie, podemos importar el uso del 94 00:08:34,350 --> 00:08:38,000 enganche de devolución de llamada de React, otro enganche incorporado en 95 00:08:38,080 --> 00:08:43,560 React y esto nos permite ajustar una función para que React realmente almacene esta función y solo 96 00:08:43,560 --> 00:08:46,710 se vuelva a crear si sus dependencias cambiaron 97 00:08:46,710 --> 00:08:53,610 Envolvemos esto alrededor de nuestras funciones de guardar filtros, así, así que pasamos esta función como un argumento para usar 98 00:08:53,610 --> 00:08:56,010 la devolución de llamada y usar la 99 00:08:56,010 --> 00:09:01,710 devolución de llamada también toma un segundo argumento que es una matriz de dependencias y, allí, 100 00:09:01,710 --> 00:09:03,300 necesitamos especificar todas 101 00:09:03,300 --> 00:09:09,930 las dependencias que tenemos aquí eso podría cambiar y eso nos llevaría a recrear esa función y ese es 102 00:09:09,930 --> 00:09:18,410 esencialmente el caso si uno de los cuatro estados aquí cambia. Entonces isGlutenFree, isLactoseFree, isVegan e isVegetarian ahora son todas dependencias de la devolución 103 00:09:18,420 --> 00:09:23,610 de llamada de uso y eso significa que esta función de componente aquí se volverá a crear 104 00:09:23,730 --> 00:09:26,160 si alguno de estos estados aquí cambia, 105 00:09:26,310 --> 00:09:32,210 si cualquier otra cosa hace que este componente se vuelva a renderizar, no recrearemos esto función y eso a 106 00:09:32,310 --> 00:09:37,410 su vez es importante porque esa función de guardar filtros es una dependencia del efecto de uso. 107 00:09:37,530 --> 00:09:43,620 Entonces, si eso se recrea, use el efecto nuevamente, que actualiza nuestros parámetros y queremos mantener esto al mínimo 108 00:09:43,620 --> 00:09:48,340 y no actualizar constantemente nuestros parámetros, pero realmente solo lo hacemos si necesitamos hacerlo. 109 00:09:49,950 --> 00:09:56,790 Con esto en su lugar, ahora deberíamos poder presionar el botón Guardar y ver los filtros que elegimos, así 110 00:09:56,850 --> 00:09:59,250 que vamos a los filtros aquí y 111 00:10:01,970 --> 00:10:03,770 ahora esto se rompe. 112 00:10:03,770 --> 00:10:06,000 ¿Tienes alguna idea de por qué se rompería? 113 00:10:06,980 --> 00:10:14,380 El problema es que tengo una navegación aquí como efecto de dependencia en uso y le expliqué por qué lo tengo, correcto, 114 00:10:14,380 --> 00:10:20,590 que no quiero tener accesorios en su totalidad, etc. Un problema es que, cuando llamamos a los 115 00:10:20,590 --> 00:10:21,090 parámetros 116 00:10:21,100 --> 00:10:27,970 establecidos, agregamos nuevos parámetros a nuestro navegador al final y lo que esto también hace es que cambie 117 00:10:27,970 --> 00:10:28,770 la navegación. 118 00:10:28,900 --> 00:10:31,150 Entonces, al final, tengo un bucle infinito aquí. 119 00:10:31,300 --> 00:10:36,810 Si elimino la navegación aquí como una dependencia, entonces esto funcionará. Si ahora guardamos esto, ahora si 120 00:10:36,820 --> 00:10:42,550 cierra ambas aplicaciones aquí con la ayuda de los administradores de tareas y luego 121 00:10:43,120 --> 00:10:50,230 reinicia eso en ambos sistemas operativos, verá que ahora sí funciona y puede presionar guardar aquí, ahora qué 122 00:10:50,230 --> 00:10:53,220 No veré la salida en el registro aquí. 123 00:10:53,230 --> 00:10:58,960 Sin embargo, eso tiene mucho sentido porque si observa de cerca este botón de guardar en nuestro 124 00:10:59,780 --> 00:11:06,310 encabezado, entonces lo que estoy haciendo aquí en onPress es que finalmente estoy ejecutando esta función, pero ¿qué hace esto? 125 00:11:06,370 --> 00:11:11,350 Recupera nuestros parámetros guardados en o almacenados en la clave de guardar y 126 00:11:11,350 --> 00:11:12,570 ¿qué es esto? 127 00:11:12,580 --> 00:11:17,770 Bueno, eso es como se mencionó anteriormente, un puntero en la función de guardar filtros, por lo que recuperamos ese puntero. 128 00:11:18,250 --> 00:11:22,630 Si no hacemos nada con ese puntero, no estamos haciendo nada. 129 00:11:22,630 --> 00:11:27,940 Ese es un puntero en una función, por lo que, por supuesto, debemos ejecutarlo de esta manera agregando paréntesis. 130 00:11:27,940 --> 00:11:34,120 Alternativamente, simplemente nos deshacemos de esta función de flecha anónima aquí y simplemente vinculamos onPress al resultado 131 00:11:34,120 --> 00:11:40,420 de recuperar nuestro puntero aquí de esa manera porque entonces este puntero en la función se ejecutará 132 00:11:40,420 --> 00:11:42,270 cuando presionamos esto, esa es 133 00:11:42,280 --> 00:11:43,210 la alternativa. 134 00:11:43,960 --> 00:11:48,370 Entonces, si guardamos esto y, por lo tanto, dejamos que se vuelva a cargar 135 00:11:48,370 --> 00:11:55,200 y volvemos a los filtros, si presiono guardar aquí, ahora vemos una salida en el registro, avancemos un poco aquí, todo 136 00:11:55,300 --> 00:11:56,940 está configurado como falso. 137 00:11:57,040 --> 00:12:02,800 Si ahora configuro lactosa y vegetariana en verdadero y presiono guardar, vemos otro registro y, 138 00:12:03,070 --> 00:12:09,080 de hecho, vegetariano y sin lactosa se establece en verdadero, que es exactamente lo que tengo aquí. 139 00:12:09,100 --> 00:12:14,420 Entonces, ahora que está funcionando, confirmemos que también funciona en Android yendo a los filtros allí también, 140 00:12:14,440 --> 00:12:18,480 configuremos lactoseFree en verdadero y guarde esto y si lo hacemos, esa es 141 00:12:18,520 --> 00:12:20,080 nuestra salida de Android 142 00:12:20,110 --> 00:12:22,290 aquí, lactoseFree es verdadero, todo lo demás 143 00:12:22,330 --> 00:12:24,550 es falso , ahora esto también funciona. 144 00:12:24,550 --> 00:12:29,830 Por lo tanto, esta solución puede ser un poco difícil de entender y evitar este bucle 145 00:12:30,020 --> 00:12:31,270 infinito aquí también 146 00:12:31,330 --> 00:12:38,230 es importante, asegurándose de que usará la devolución de llamada aquí para evitar reconstrucciones innecesarias de esta función aquí también es 147 00:12:38,230 --> 00:12:43,850 algo que debe hacer, de modo que cuando actualice los parámetros y, por lo tanto, este componente 148 00:12:43,850 --> 00:12:48,950 se reconstruye, no también reconstruye esa función y, por lo tanto, también ingresa un bucle infinito. 149 00:12:48,950 --> 00:12:54,380 Pero con eso, tenemos una forma de comunicarnos entre las opciones de componentes y navegación, que generalmente es 150 00:12:54,380 --> 00:13:00,470 un patrón que necesita cuando tiene elementos de acción en su barra de acciones y desea activar algo que depende 151 00:13:00,470 --> 00:13:04,720 de los datos administrados en su componente con la ayuda de estos botones.