1 00:00:02,370 --> 00:00:08,100 Maintenant, avec les filtres rendus ici, il serait bien sûr d'avoir un bouton de sauvegarde ici en 2 00:00:08,100 --> 00:00:11,840 haut qui nous permet d'enregistrer toutes les modifications apportées aux filtres. 3 00:00:11,940 --> 00:00:16,530 Donc, dans l'écran des filtres, nous avons déjà un bouton d'en-tête sur headerLeft, je veux maintenant 4 00:00:16,530 --> 00:00:23,430 aussi en avoir un sur headerRight, donc à droite de mon en-tête. Donc, headerRight ici est fondamentalement le même que nous l'avons 5 00:00:23,430 --> 00:00:28,050 ici, donc nous pouvons simplement le copier ici parce que nous voulons avoir des boutons 6 00:00:28,050 --> 00:00:35,280 d'en-tête avec un bouton, ce sera le bouton de sauvegarde et l'icône que nous pouvons utiliser est par exemple et de Bien sûr, 7 00:00:35,280 --> 00:00:41,250 vous pouvez en choisir un autre, mais ici, je vais par exemple enregistrer et maintenant, lorsque vous appuyez dessus, 8 00:00:41,400 --> 00:00:44,940 ce sera un peu délicat. Bien sûr, nous pouvons déclencher 9 00:00:44,940 --> 00:00:48,710 une fonction et nous pouvons consolider les filtres d'enregistrement de journal ici. 10 00:00:48,900 --> 00:00:54,000 Maintenant, la logique réelle pour enregistrer et appliquer des filtres est quelque chose dont nous nous occuperons dans le module 11 00:00:54,120 --> 00:00:57,150 suivant, mais il y a quand même un problème avec cela. 12 00:00:57,720 --> 00:01:01,530 Si je l'enregistre comme ceci et que nous allons dans les filtres, 13 00:01:01,530 --> 00:01:12,150 bien sûr, nous pouvons appuyer sur ceci, cela fonctionne, mais ce qui serait bien, c'est que nous rassemblons ensuite vraiment notre état actuel des filtres, donc en gros, obtenez un instantané de 14 00:01:12,150 --> 00:01:19,170 notre état actuel ici et pour le moment, connectez-le à la console, dans le module suivant, appliquez-le en quelque sorte pour 15 00:01:19,320 --> 00:01:26,740 filtrer les recettes que nous montrons sur les autres écrans. Maintenant, cela peut sembler trivial, mais nous aurons un problème ici, 16 00:01:26,740 --> 00:01:28,910 nos filtres, donc les informations, 17 00:01:29,110 --> 00:01:36,360 quels filtres sont définis, tout est stocké dans ces variables d'état ici, à droite et cela fait partie de notre composant, notre 18 00:01:36,370 --> 00:01:38,560 bouton est cependant dans la navigation 19 00:01:38,770 --> 00:01:41,530 options et oui, là, nous obtenons les données 20 00:01:41,530 --> 00:01:47,440 instantanées qui, par exemple, nous donnent l'accessoire de navigation à la fin, mais ce que nous n'avons pas 21 00:01:47,450 --> 00:01:52,990 ici, c'est l'accès à l'état de notre composant et c'est ce dont j'ai besoin ici et 22 00:01:52,990 --> 00:01:57,970 maintenant, voici vraiment un modèle important qui pourrait ressembler à un hack ou une solution 23 00:01:58,540 --> 00:02:08,020 de contournement étrange, mais qui est le moyen de communiquer réellement entre vos options de navigation et votre composant si vous dépendez de la modification des données de votre 24 00:02:08,020 --> 00:02:13,150 composant à l'intérieur de vos options de navigation. Ainsi, dans les options de 25 00:02:13,150 --> 00:02:18,830 navigation, vous avez besoin d'informations sur les données qui ont changé dans votre composant. 26 00:02:18,840 --> 00:02:24,980 C'est d'ailleurs une approche que vous trouverez dans les documents officiels de la navigation d'ailleurs. Nous pouvons utiliser des paramètres, de sorte que cette 27 00:02:25,190 --> 00:02:30,940 chose que nous passons entre les écrans, pour communiquer entre notre composant et les options de navigation et 28 00:02:31,010 --> 00:02:35,070 cela peut sembler étrange, mais c'est exactement ce que nous allons faire maintenant. 29 00:02:36,360 --> 00:02:44,170 Disons que dans notre composant, nous ajoutons une nouvelle fonction et je nommerai cette fonction ici, sauf les filtres, vous pouvez 30 00:02:44,460 --> 00:02:46,950 la nommer comme vous le souhaitez. 31 00:02:47,000 --> 00:02:49,970 C'est une fonction qui ne prend aucun argument mais 32 00:02:51,110 --> 00:02:57,410 qui a un job, elle va créer une constante de filtres appliqués par exemple qui est un objet qui rassemble nos filtres. 33 00:02:57,410 --> 00:03:02,300 Donc, nous pourrions avoir glutenFree comme clé et nous stockons isGlutenFree comme 34 00:03:02,300 --> 00:03:07,250 valeur, nous avons lactoseFree comme clé et nous stockons notre valeur d'état 35 00:03:07,250 --> 00:03:08,480 actuelle isLactoseFree. 36 00:03:08,690 --> 00:03:17,540 Nous faisons la même chose pour les végétaliens avec isVegan et nous faisons la même chose pour isVegetarian et isVegetarian, comme ça 37 00:03:17,540 --> 00:03:23,930 et par la suite, je consolerai le journal de cette chose sur les filtres appliqués. 38 00:03:24,070 --> 00:03:32,770 Maintenant, je voudrais donner accès à cette fonction qui fait partie de mon composant à mes options de navigation afin que je puisse déclencher 39 00:03:32,770 --> 00:03:38,080 cette fonction depuis l'intérieur des options de navigation et pour cela, nous pouvons utiliser des 40 00:03:38,200 --> 00:03:38,890 paramètres. 41 00:03:42,490 --> 00:03:49,300 Ajoutons un effet d'utilisation afin d'avoir un moyen d'exécuter du code chaque fois que notre état 42 00:03:49,300 --> 00:03:58,810 change, car c'est à ce moment-là que je veux transmettre cette fonction mise à jour qui capture essentiellement mon état actuel dans mes options 43 00:03:58,810 --> 00:03:59,830 de navigation. 44 00:03:59,830 --> 00:04:06,280 Donc ici, je peux ajouter un effet d'utilisation et l'effet d'utilisation prend une fonction qui 45 00:04:06,280 --> 00:04:16,460 s'exécute chaque fois que notre état change et quel que soit le composant restitué et là-dedans, nous pouvons maintenant utiliser les paramètres de navigation des accessoires. 46 00:04:16,460 --> 00:04:18,130 Nous n'avons jamais utilisé set 47 00:04:18,130 --> 00:04:20,400 params auparavant, nous n'avons travaillé qu'avec get param. 48 00:04:20,510 --> 00:04:27,170 Nous n'avons pas utilisé set params car avant de ne définir des paramètres que lorsque nous avons navigué vers un nouvel écran, 49 00:04:27,170 --> 00:04:33,530 puis par exemple comme dans l'écran des catégories, nous avons passé nos paramètres comme celui-ci au nouvel écran, mais nous pouvons 50 00:04:33,560 --> 00:04:42,160 utiliser set params pour mettre à jour les paramètres valeurs de l'écran actuellement chargé. Maintenant, ici sur cet écran, nous n'avons aucun paramètre, il est donc vide, 51 00:04:42,160 --> 00:04:44,600 donc nous pouvons définir des paramètres sur 52 00:04:45,690 --> 00:04:51,120 un nouvel objet ici et je veux ajouter une entrée là-bas, mais vous pouvez en ajouter autant 53 00:04:51,120 --> 00:04:52,810 que vous le souhaitez. 54 00:04:53,780 --> 00:05:04,040 Je veux ajouter une clé de sauvegarde et vous pouvez prendre n'importe quel nom pour cette clé que vous voulez et pointer sur les filtres de 55 00:05:04,060 --> 00:05:08,520 sauvegarde, donc sur cette fonction. Je n'exécute pas la fonction, je n'ajoute 56 00:05:08,580 --> 00:05:10,050 pas de parenthèses, 57 00:05:10,080 --> 00:05:16,740 je pointe simplement dessus, j'utilise simplement cette variable qui contient un pointeur sur cette fonction à la fin et transmet 58 00:05:16,740 --> 00:05:23,250 cette valeur, alors transférez ce pointeur ou stockez ce pointeur sur cette fonction dans cette clé de sauvegarde, dans 59 00:05:23,250 --> 00:05:28,230 cet objet que je définis maintenant comme paramètres dans cet écran, dans l'écran des filtres. 60 00:05:28,430 --> 00:05:34,280 Cela nous permet d'aller aux options de navigation et là, nous avons accès aux données de 61 00:05:34,340 --> 00:05:43,310 navigation et donc à la navigation à droite et cela signifie qu'ici pour le bouton de sauvegarde, lorsque vous appuyez dessus, nous pouvons réellement 62 00:05:43,310 --> 00:05:46,790 utiliser navData. la navigation. getParam, c'est ainsi 63 00:05:46,790 --> 00:05:53,060 que nous pouvons récupérer un paramètre et cela est également disponible ici dans les options de navigation, enregistrer 64 00:05:53,060 --> 00:06:03,270 et je peux récupérer ce paramètre de sauvegarde que je mets ici en vigueur et je sais que c'est super étrange la première fois que vous voyez cela et 65 00:06:03,280 --> 00:06:08,120 cela ressemble à un hack vraiment sale mais ce n'est pas le cas. 66 00:06:08,200 --> 00:06:14,230 Il s'agit d'un moyen valide de communication entre votre composant et vos options de navigation dont vous avez généralement 67 00:06:14,230 --> 00:06:18,300 besoin lorsque vous avez des éléments d'action dans vos options de navigation. 68 00:06:18,310 --> 00:06:26,880 Cela nous donnera accès à nos paramètres et là nous accèderons au paramètre save, le paramètre save sera cette fonction et nous mettrons à jour 69 00:06:27,600 --> 00:06:33,180 la valeur de ce paramètre chaque fois que notre état change et nous devons le faire 70 00:06:33,180 --> 00:06:38,880 car dans cette fonction, ceci est recréé chaque fois notre état change et il enregistre les dernières 71 00:06:38,880 --> 00:06:40,530 valeurs d'état et c'est 72 00:06:40,620 --> 00:06:45,420 bien sûr ce que nous voulons lorsque cette fonction sera éventuellement exécutée avec l'aide 73 00:06:45,750 --> 00:06:49,110 de params via ce bouton dans les options de navigation. 74 00:06:49,110 --> 00:06:54,300 Nous utilisons donc les paramètres comme moyen de communication entre notre composant et les options 75 00:06:54,300 --> 00:06:59,730 de navigation, une sorte de solution de contournement, mais en fait, celui que vous trouvez également 76 00:06:59,730 --> 00:07:07,390 dans les documents officiels et la façon dont vous communiquez ici. Maintenant, avant d'enregistrer cela, il y a deux choses que nous devons faire cependant, utiliser 77 00:07:07,390 --> 00:07:14,320 l'effet s'exécute maintenant chaque fois que ce composant est mis à jour. En fin de compte, il ne devrait s'exécuter que lorsque les filtres de sauvegarde contiennent une nouvelle valeur. 78 00:07:14,440 --> 00:07:20,740 Je vais donc ajouter le deuxième argument pour utiliser effect qui est ce tableau de dépendances et là, enregistrer les filtres, donc 79 00:07:20,980 --> 00:07:23,530 cette variable ici qui contient une fonction est 80 00:07:23,530 --> 00:07:26,470 une dépendance et pour l'instant, cela sera toujours reconstruit lorsque 81 00:07:26,470 --> 00:07:30,900 vous reconstruisez un composant, donc ce n'est pas vraiment une dépendance qui nous aide, mais nous 82 00:07:31,090 --> 00:07:37,600 allons bientôt résoudre ce problème et les accessoires sont également une dépendance. Maintenant, en fait, pour éviter des restitutions inutiles chaque 83 00:07:37,600 --> 00:07:39,140 fois que quelque chose 84 00:07:39,370 --> 00:07:48,330 change dans le composant param, j'utiliserai une manière différente d'extraire mon accessoire de navigation, j'utiliserai ici la déstructuration, comme ceci, la navigation est égale 85 00:07:48,870 --> 00:07:49,770 aux accessoires. 86 00:07:49,770 --> 00:07:56,350 Il s'agit d'une syntaxe qui utilise la déstructuration d'objet, ce qui signifie que les accessoires sont un objet, ce qui extrait la clé de navigation et la stocke dans 87 00:07:56,350 --> 00:08:02,460 une toute nouvelle constante du même nom, donc de la même navigation. Il stocke la valeur dans l'accessoire de navigation 88 00:08:02,460 --> 00:08:05,560 dans cette constante de navigation maintenant, c'est ce que 89 00:08:05,560 --> 00:08:11,940 fait la syntaxe et les avantages que nous avons maintenant une constante de navigation ici que nous pouvons utiliser 90 00:08:11,940 --> 00:08:17,780 en effet sans accessoires, car nous l'avons stockée dans une constante distincte maintenant et maintenant, nous pouvons ajouter 91 00:08:17,820 --> 00:08:21,860 cela comme une dépendance, ce qui signifie que lorsque cela change, cela 92 00:08:21,990 --> 00:08:27,500 se reconstruit, mais si quelque chose d'autre dans les accessoires change, cela ne réexécutera pas inutilement l'effet. 93 00:08:27,750 --> 00:08:34,350 Maintenant, pour nous assurer que les filtres de sauvegarde ne sont mis à jour que lorsque notre état change, nous pouvons importer le 94 00:08:34,350 --> 00:08:38,000 hook de rappel d'utilisation de React, un autre hook intégré à React, 95 00:08:38,080 --> 00:08:43,560 ce qui nous permet d'envelopper une fonction afin que cette fonction soit réellement mise en cache par React 96 00:08:43,560 --> 00:08:46,710 et ne soit recréée que si ses dépendances ont changé. 97 00:08:46,710 --> 00:08:53,610 Nous enroulons cela autour de nos fonctions de filtres de sauvegarde, tout comme ceci, donc nous passons cette fonction 98 00:08:53,610 --> 00:08:56,010 comme argument pour utiliser le rappel et 99 00:08:56,010 --> 00:09:01,710 utiliser le rappel prend également un deuxième argument qui est un tableau de dépendances et là, 100 00:09:01,710 --> 00:09:03,300 nous devons spécifier 101 00:09:03,300 --> 00:09:09,930 toutes les dépendances que nous avons ici cela pourrait changer et cela nous amènerait à recréer cette fonction et 102 00:09:09,930 --> 00:09:18,410 c'est essentiellement le cas si l'un des quatre états change ici. Donc isGlutenFree, isLactoseFree, isVegan et isVegetarian sont maintenant toutes des dépendances d'utilisation de 103 00:09:18,420 --> 00:09:23,610 rappel et cela signifie que cette fonction de composant ici sera recréée si l'un de ces 104 00:09:23,730 --> 00:09:26,160 états change ici, si quoi que 105 00:09:26,310 --> 00:09:32,210 ce soit d'autre provoque le re-rendu de ce composant, nous ne recréerons pas cela fonction et c'est à son 106 00:09:32,310 --> 00:09:37,410 tour important parce que cette fonction de sauvegarde des filtres est une dépendance de l'effet d'utilisation. 107 00:09:37,530 --> 00:09:43,620 Donc, si cela est recréé, utilisez à nouveau les effets qui mettent à jour nos paramètres et nous voulons garder cela au minimum et ne 108 00:09:43,620 --> 00:09:48,340 pas mettre à jour constamment nos paramètres, mais ne le faisons vraiment que si nous devons le faire. 109 00:09:49,950 --> 00:09:56,790 Avec cela en place, nous devrions maintenant être en mesure d'appuyer sur le bouton Enregistrer et de voir les filtres que 110 00:09:56,850 --> 00:09:59,250 nous avons choisis, alors allons aux filtres 111 00:10:01,970 --> 00:10:03,770 ici et maintenant, cela casse. 112 00:10:03,770 --> 00:10:06,000 Avez-vous une idée de la raison de sa rupture? 113 00:10:06,980 --> 00:10:14,380 Le problème est que j'ai ici une navigation en tant qu'effet de dépendance d'utilisation et j'ai expliqué pourquoi je l'ai, à droite, que je 114 00:10:14,380 --> 00:10:20,590 ne veux pas avoir d'accessoires dans son intégralité, etc. Un problème est simplement que lorsque nous appelons set 115 00:10:20,590 --> 00:10:21,090 params, 116 00:10:21,100 --> 00:10:27,970 nous ajoutons de nouveaux paramètres à notre navigateur à la fin et ce que cela fait aussi, c'est que la 117 00:10:27,970 --> 00:10:28,770 navigation change. 118 00:10:28,900 --> 00:10:31,150 Donc à la fin, j'ai une boucle infinie ici. 119 00:10:31,300 --> 00:10:36,810 Si je supprime la navigation ici en tant que dépendance, cela fonctionnera. Si nous enregistrons maintenant cela, maintenant si vous 120 00:10:36,820 --> 00:10:42,550 fermez les deux applications ici avec l'aide des gestionnaires de tâches et que vous redémarrez ensuite cela sur les 121 00:10:43,120 --> 00:10:50,230 deux systèmes d'exploitation, vous verrez que maintenant cela fonctionne en effet et vous pouvez appuyer sur enregistrer ici, maintenant ce que vous '' 122 00:10:50,230 --> 00:10:53,220 ll ne voit pas la sortie dans le journal ici. 123 00:10:53,230 --> 00:10:58,960 Cela a cependant beaucoup de sens car si vous regardez de plus près ces boutons d'enregistrement dans 124 00:10:59,780 --> 00:11:06,310 notre en-tête, alors ce que je fais ici dans onPress, c'est que j'exécute finalement cette fonction, mais qu'est-ce que cela fait? 125 00:11:06,370 --> 00:11:11,350 Il récupère nos paramètres enregistrés dans ou stockés dans la clé de sauvegarde et 126 00:11:11,350 --> 00:11:12,570 qu'est-ce que c'est? 127 00:11:12,580 --> 00:11:17,770 Eh bien, comme mentionné précédemment, un pointeur sur la fonction de sauvegarde des filtres, nous récupérons donc ce pointeur. 128 00:11:18,250 --> 00:11:22,630 Si nous ne faisons alors rien avec ce pointeur, nous ne faisons rien. 129 00:11:22,630 --> 00:11:27,940 C'est un pointeur sur une fonction, nous devons donc bien sûr l'exécuter comme ceci en ajoutant des parenthèses. 130 00:11:27,940 --> 00:11:34,120 Alternativement, nous nous débarrassons simplement de cette fonction de flèche anonyme ici et nous lions simplement onPress au 131 00:11:34,120 --> 00:11:40,420 résultat de la récupération de notre pointeur ici comme ça car alors ce pointeur sur la fonction sera exécuté 132 00:11:40,420 --> 00:11:42,270 pour nous lorsque nous appuierons sur, 133 00:11:42,280 --> 00:11:43,210 c'est l'alternative. 134 00:11:43,960 --> 00:11:48,370 Alors maintenant, si nous enregistrons ceci et que nous laissons donc ce rechargement et 135 00:11:48,370 --> 00:11:55,200 nous retournons aux filtres, si je clique sur Enregistrer ici, nous voyons maintenant une sortie dans le journal, faisons défiler un peu ici, 136 00:11:55,300 --> 00:11:56,940 tout est réglé sur faux. 137 00:11:57,040 --> 00:12:02,800 Si je mets maintenant lactoseFree et vegetarian à true et que je clique sur save, nous voyons un autre 138 00:12:03,070 --> 00:12:09,080 journal et là, en effet, vegetarian and lactoseFree est mis à true, ce qui est exactement ce que j'ai ici. 139 00:12:09,100 --> 00:12:14,420 Alors maintenant, cela fonctionne, confirmons que cela fonctionne également sur Android en allant aux filtres là aussi, 140 00:12:14,440 --> 00:12:18,480 définissons lactoseFree sur true et enregistrons cela et si nous le faisons, c'est 141 00:12:18,520 --> 00:12:20,080 notre sortie Android ici, 142 00:12:20,110 --> 00:12:22,290 lactoseFree est vrai, tout le reste 143 00:12:22,330 --> 00:12:24,550 est faux , maintenant cela fonctionne aussi. 144 00:12:24,550 --> 00:12:29,830 Donc, cette solution de contournement peut être un peu délicate pour envelopper votre tête et éviter cette 145 00:12:30,020 --> 00:12:31,270 boucle infinie ici 146 00:12:31,330 --> 00:12:38,230 est également important, en vous assurant que vous utiliserez le rappel ici pour éviter les reconstructions inutiles de cette fonction ici aussi est 147 00:12:38,230 --> 00:12:43,850 quelque chose que vous devriez faire, de sorte que lorsque vous mettez à jour les paramètres et donc 148 00:12:43,850 --> 00:12:48,950 ce composant reconstruit, vous ne reconstruisez pas également cette fonction et entrez donc également une boucle infinie. 149 00:12:48,950 --> 00:12:54,380 Mais avec cela, nous avons un moyen de communiquer entre le composant et les options de navigation, qui est généralement 150 00:12:54,380 --> 00:13:00,470 un modèle dont vous avez besoin lorsque vous avez des éléments d'action dans votre barre d'action et que vous souhaitez déclencher quelque chose 151 00:13:00,470 --> 00:13:04,720 qui dépend des données gérées dans votre composant à l'aide de ces éléments. boutons.