Maintenant, avec les filtres rendus ici, il serait bien sûr d'avoir un bouton de sauvegarde ici en
haut qui nous permet d'enregistrer toutes les modifications apportées aux filtres.
Donc, dans l'écran des filtres, nous avons déjà un bouton d'en-tête sur headerLeft, je veux maintenant
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
ici, donc nous pouvons simplement le copier ici parce que nous voulons avoir des boutons
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,
vous pouvez en choisir un autre, mais ici, je vais par exemple enregistrer et maintenant, lorsque vous appuyez dessus,
ce sera un peu délicat. Bien sûr, nous pouvons déclencher
une fonction et nous pouvons consolider les filtres d'enregistrement de journal ici.
Maintenant, la logique réelle pour enregistrer et appliquer des filtres est quelque chose dont nous nous occuperons dans le module
suivant, mais il y a quand même un problème avec cela.
Si je l'enregistre comme ceci et que nous allons dans les filtres,
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
notre état actuel ici et pour le moment, connectez-le à la console, dans le module suivant, appliquez-le en quelque sorte pour
filtrer les recettes que nous montrons sur les autres écrans. Maintenant, cela peut sembler trivial, mais nous aurons un problème ici,
nos filtres, donc les informations,
quels filtres sont définis, tout est stocké dans ces variables d'état ici, à droite et cela fait partie de notre composant, notre
bouton est cependant dans la navigation
options et oui, là, nous obtenons les données
instantanées qui, par exemple, nous donnent l'accessoire de navigation à la fin, mais ce que nous n'avons pas
ici, c'est l'accès à l'état de notre composant et c'est ce dont j'ai besoin ici et
maintenant, voici vraiment un modèle important qui pourrait ressembler à un hack ou une solution
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
composant à l'intérieur de vos options de navigation. Ainsi, dans les options de
navigation, vous avez besoin d'informations sur les données qui ont changé dans votre composant.
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
chose que nous passons entre les écrans, pour communiquer entre notre composant et les options de navigation et
cela peut sembler étrange, mais c'est exactement ce que nous allons faire maintenant.
Disons que dans notre composant, nous ajoutons une nouvelle fonction et je nommerai cette fonction ici, sauf les filtres, vous pouvez
la nommer comme vous le souhaitez.
C'est une fonction qui ne prend aucun argument mais
qui a un job, elle va créer une constante de filtres appliqués par exemple qui est un objet qui rassemble nos filtres.
Donc, nous pourrions avoir glutenFree comme clé et nous stockons isGlutenFree comme
valeur, nous avons lactoseFree comme clé et nous stockons notre valeur d'état
actuelle isLactoseFree.
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
et par la suite, je consolerai le journal de cette chose sur les filtres appliqués.
Maintenant, je voudrais donner accès à cette fonction qui fait partie de mon composant à mes options de navigation afin que je puisse déclencher
cette fonction depuis l'intérieur des options de navigation et pour cela, nous pouvons utiliser des
paramètres.
Ajoutons un effet d'utilisation afin d'avoir un moyen d'exécuter du code chaque fois que notre état
change, car c'est à ce moment-là que je veux transmettre cette fonction mise à jour qui capture essentiellement mon état actuel dans mes options
de navigation.
Donc ici, je peux ajouter un effet d'utilisation et l'effet d'utilisation prend une fonction qui
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.
Nous n'avons jamais utilisé set
params auparavant, nous n'avons travaillé qu'avec get param.
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,
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
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,
donc nous pouvons définir des paramètres sur
un nouvel objet ici et je veux ajouter une entrée là-bas, mais vous pouvez en ajouter autant
que vous le souhaitez.
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
sauvegarde, donc sur cette fonction. Je n'exécute pas la fonction, je n'ajoute
pas de parenthèses,
je pointe simplement dessus, j'utilise simplement cette variable qui contient un pointeur sur cette fonction à la fin et transmet
cette valeur, alors transférez ce pointeur ou stockez ce pointeur sur cette fonction dans cette clé de sauvegarde, dans
cet objet que je définis maintenant comme paramètres dans cet écran, dans l'écran des filtres.
Cela nous permet d'aller aux options de navigation et là, nous avons accès aux données de
navigation et donc à la navigation à droite et cela signifie qu'ici pour le bouton de sauvegarde, lorsque vous appuyez dessus, nous pouvons réellement
utiliser navData. la navigation. getParam, c'est ainsi
que nous pouvons récupérer un paramètre et cela est également disponible ici dans les options de navigation, enregistrer
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
cela ressemble à un hack vraiment sale mais ce n'est pas le cas.
Il s'agit d'un moyen valide de communication entre votre composant et vos options de navigation dont vous avez généralement
besoin lorsque vous avez des éléments d'action dans vos options de navigation.
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
la valeur de ce paramètre chaque fois que notre état change et nous devons le faire
car dans cette fonction, ceci est recréé chaque fois notre état change et il enregistre les dernières
valeurs d'état et c'est
bien sûr ce que nous voulons lorsque cette fonction sera éventuellement exécutée avec l'aide
de params via ce bouton dans les options de navigation.
Nous utilisons donc les paramètres comme moyen de communication entre notre composant et les options
de navigation, une sorte de solution de contournement, mais en fait, celui que vous trouvez également
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
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.
Je vais donc ajouter le deuxième argument pour utiliser effect qui est ce tableau de dépendances et là, enregistrer les filtres, donc
cette variable ici qui contient une fonction est
une dépendance et pour l'instant, cela sera toujours reconstruit lorsque
vous reconstruisez un composant, donc ce n'est pas vraiment une dépendance qui nous aide, mais nous
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
fois que quelque chose
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
aux accessoires.
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
une toute nouvelle constante du même nom, donc de la même navigation. Il stocke la valeur dans l'accessoire de navigation
dans cette constante de navigation maintenant, c'est ce que
fait la syntaxe et les avantages que nous avons maintenant une constante de navigation ici que nous pouvons utiliser
en effet sans accessoires, car nous l'avons stockée dans une constante distincte maintenant et maintenant, nous pouvons ajouter
cela comme une dépendance, ce qui signifie que lorsque cela change, cela
se reconstruit, mais si quelque chose d'autre dans les accessoires change, cela ne réexécutera pas inutilement l'effet.
Maintenant, pour nous assurer que les filtres de sauvegarde ne sont mis à jour que lorsque notre état change, nous pouvons importer le
hook de rappel d'utilisation de React, un autre hook intégré à React,
ce qui nous permet d'envelopper une fonction afin que cette fonction soit réellement mise en cache par React
et ne soit recréée que si ses dépendances ont changé.
Nous enroulons cela autour de nos fonctions de filtres de sauvegarde, tout comme ceci, donc nous passons cette fonction
comme argument pour utiliser le rappel et
utiliser le rappel prend également un deuxième argument qui est un tableau de dépendances et là,
nous devons spécifier
toutes les dépendances que nous avons ici cela pourrait changer et cela nous amènerait à recréer cette fonction et
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
rappel et cela signifie que cette fonction de composant ici sera recréée si l'un de ces
états change ici, si quoi que
ce soit d'autre provoque le re-rendu de ce composant, nous ne recréerons pas cela fonction et c'est à son
tour important parce que cette fonction de sauvegarde des filtres est une dépendance de l'effet d'utilisation.
Donc, si cela est recréé, utilisez à nouveau les effets qui mettent à jour nos paramètres et nous voulons garder cela au minimum et ne
pas mettre à jour constamment nos paramètres, mais ne le faisons vraiment que si nous devons le faire.
Avec cela en place, nous devrions maintenant être en mesure d'appuyer sur le bouton Enregistrer et de voir les filtres que
nous avons choisis, alors allons aux filtres
ici et maintenant, cela casse.
Avez-vous une idée de la raison de sa rupture?
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
ne veux pas avoir d'accessoires dans son intégralité, etc. Un problème est simplement que lorsque nous appelons set
params,
nous ajoutons de nouveaux paramètres à notre navigateur à la fin et ce que cela fait aussi, c'est que la
navigation change.
Donc à la fin, j'ai une boucle infinie ici.
Si je supprime la navigation ici en tant que dépendance, cela fonctionnera. Si nous enregistrons maintenant cela, maintenant si vous
fermez les deux applications ici avec l'aide des gestionnaires de tâches et que vous redémarrez ensuite cela sur les
deux systèmes d'exploitation, vous verrez que maintenant cela fonctionne en effet et vous pouvez appuyer sur enregistrer ici, maintenant ce que vous ''
ll ne voit pas la sortie dans le journal ici.
Cela a cependant beaucoup de sens car si vous regardez de plus près ces boutons d'enregistrement dans
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?
Il récupère nos paramètres enregistrés dans ou stockés dans la clé de sauvegarde et
qu'est-ce que c'est?
Eh bien, comme mentionné précédemment, un pointeur sur la fonction de sauvegarde des filtres, nous récupérons donc ce pointeur.
Si nous ne faisons alors rien avec ce pointeur, nous ne faisons rien.
C'est un pointeur sur une fonction, nous devons donc bien sûr l'exécuter comme ceci en ajoutant des parenthèses.
Alternativement, nous nous débarrassons simplement de cette fonction de flèche anonyme ici et nous lions simplement onPress au
résultat de la récupération de notre pointeur ici comme ça car alors ce pointeur sur la fonction sera exécuté
pour nous lorsque nous appuierons sur,
c'est l'alternative.
Alors maintenant, si nous enregistrons ceci et que nous laissons donc ce rechargement et
nous retournons aux filtres, si je clique sur Enregistrer ici, nous voyons maintenant une sortie dans le journal, faisons défiler un peu ici,
tout est réglé sur faux.
Si je mets maintenant lactoseFree et vegetarian à true et que je clique sur save, nous voyons un autre
journal et là, en effet, vegetarian and lactoseFree est mis à true, ce qui est exactement ce que j'ai ici.
Alors maintenant, cela fonctionne, confirmons que cela fonctionne également sur Android en allant aux filtres là aussi,
définissons lactoseFree sur true et enregistrons cela et si nous le faisons, c'est
notre sortie Android ici,
lactoseFree est vrai, tout le reste
est faux , maintenant cela fonctionne aussi.
Donc, cette solution de contournement peut être un peu délicate pour envelopper votre tête et éviter cette
boucle infinie ici
est également important, en vous assurant que vous utiliserez le rappel ici pour éviter les reconstructions inutiles de cette fonction ici aussi est
quelque chose que vous devriez faire, de sorte que lorsque vous mettez à jour les paramètres et donc
ce composant reconstruit, vous ne reconstruisez pas également cette fonction et entrez donc également une boucle infinie.
Mais avec cela, nous avons un moyen de communiquer entre le composant et les options de navigation, qui est généralement
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
qui dépend des données gérées dans votre composant à l'aide de ces éléments. boutons.