Commençons par changer cette icône d'étoile
selon que c'est actuellement un favori ou non, je veux avoir
cette étoile remplie seulement si c'est un favori et une étoile vide si ce n'est pas le cas.
Donc, à la fin de l'écran de détail du repas, nous devons échanger cette icône que nous rendons ici en
fonction du statut préféré de ce repas que nous avons chargé ici. Encore une fois, le problème ici est que nous
pouvons savoir si ce repas est un favori ou non de manière très simple dans la fonction des composants, mais
pas vraiment dans les options de navigation.
Encore une fois, nous aurons besoin de paramètres pour communiquer entre ces deux mais dans l'ensemble, ce n'est pas trop difficile.
Ce que je veux faire ici, c'est que je veux obtenir mes repas préférés à l'aide du sélecteur d'utilisation dans la fonction du composant de l'écran de détail
des repas à l'aide de l'état puis de l'état. repas. mes plats préférés, donc je
veux obtenir tous mes plats préférés et maintenant je veux simplement vérifier si ce repas
fait partie des plats préférés et en fait nous pouvons donc affiner cela et même nommer ce repas actuel est préféré et dans le sélecteur
ne pas simplement revenir les plats préférés, mais ajoutez un peu plus de logique là-dedans et ajoutez simplement une
vérification où nous appelons certains qui est également une méthode intégrée qui renvoie
vrai si la condition que nous sommes sur le point de spécifier est vraie pour au moins un élément dans ce
tableau et là, je vérifie pour chaque repas qui est là, si l'ID de repas est égal à l'ID de repas que je récupère ici et donc je dois permuter les lignes.
Alors ici, je reçois l'id du repas du repas où nous chargeons sur l'écran de détail et
ensuite je vérifie mes repas préférés, si cette ID de repas en fait partie, ce qui signifierait que ce repas fait partie de nos favoris.
Donc, avec cela, nous avons ce repas actuel comme information préférée, maintenant nous devons le passer aux options de navigation et
encore une fois, nous pouvons le faire avec un effet d'utilisation, peut-être là-bas. Comme précédemment, fournissez une fonction ici dans un tableau
de dépendances, dans la fonction ici, je définirai les paramètres de navigation des accessoires pour fusionner plus de données dans mes paramètres et
c'est peut-être le paramètre is fav, le nom dépend de vous, qui contient le repas actuel est la valeur
préférée, de sorte que la valeur que nous venons de déduire et maintenant une dépendance de cette fonction,
de cet appel d'effet d'utilisation, je veux dire est bien sûr le repas actuel est préféré, quand
cela change, je veux transmettre les nouvelles informations aux params et donc à l'en-tête, sinon cet effet ne devrait pas se réexécuter.
Alors maintenant, de retour dans les options de navigation, nous pouvons récupérer ces informations ici, votre favori
peut être récupéré à partir de navigationData. navigation avec l'aide de get param et là je
nomme ceci est fav, le voici, donc c'est le nom par
lequel nous pouvons le récupérer.
Maintenant, nous avons les informations favorites dans l'en-tête et nous pouvons maintenant les utiliser pour rendre une icône
différente ici.
Donc, au lieu de toujours rendre l'étoile iOS, j'aurai une expression dynamique ici et je vérifierai si son favori est
vrai, si c'est le cas,
alors je veux utiliser l'étoile iOS qui est cette étoile de champ, si ce
n'est pas
le cas, je ' ll rendra le contour de l'étoile iOS et ce
sera une étoile vide.
Avec cela, nous espérons avoir une configuration qui fonctionne comme prévu.
Si je vais aux spaghettis,
maintenant c'est une étoile vide et si je clique
dessus, c'est une étoile pleine et ça fait partie des favoris.
Si je vais ensuite à l'écran de détail ici, vous voyez que cela prend un peu de temps jusqu'à ce
que l'étoile soit également remplie ici, nous devrons résoudre ce problème. Si je clique maintenant ici et que nous retournons aux repas, il est également
mis à jour et c'est la magie de Redux, il met à jour une partie de l'application si quelque chose de connexe change dans une autre
partie, c'est exactement comment cela devrait se comporter ici. Donc, cela fonctionne généralement, la seule
chose qui n'était pas trop belle, c'est que cette étoile ici est initialement vide et ne se remplit qu'après le
chargement, nous pouvons donc résoudre ce problème,
mais à part cela, cela fonctionne comme il se doit. Maintenant, pour corriger cette étoile initialement vide, nous pouvons
à nouveau
utiliser une solution de contournement expliquée précédemment pour ces données d'en-tête initiales.
Nous ne voulons pas attendre la fin
du premier rendu, nous devons plutôt transmettre ces données initiales à ce composant lorsque nous y accédons.
Par conséquent, il est temps pour la liste des repas de nouveau où nous avons cette action
de navigation pour transmettre également cette clé fav déjà, donc cette clé que j'ai essayé d'extraire ici dans l'écran de
détail du repas là-bas, obtenir param est fav. Je veux transmettre la valeur actuelle lorsque nous chargeons ce composant, lorsque
nous chargeons cet écran ici depuis l'intérieur de la liste des repas, qui est le composant qui
déclenche cette navigation
vers les détails du repas et bien sûr là, itemData. l'article est un repas unique, mais qui ne contient pas d'informations sur si cela fait partie de
nos favoris ou
non, mais bien sûr, nous pouvons savoir si c'est le cas ou non. Dans la liste des repas,
nous pouvons également accéder à la boutique Redux, pas seulement à partir des composants de l'écran.
Donc, ici, je peux également utiliser le sélecteur d'utilisation de React Redux comme celui-ci, puis dans mon composant ici, je peux obtenir mes repas
préférés à l'aide du sélecteur d'utilisation où j'obtiens mon état, puis je reviens. les repas parsèment les plats préférés pour obtenir tous mes plats préférés
et maintenant, lorsque nous rendons un
seul repas, nous pouvons l'utiliser pour savoir si ce repas fait partie de
nos favoris. Soit dit en
passant, vous ne pouvez pas utiliser le sélecteur
d'utilisation ici, ce ne serait pas une utilisation valide car vous devez utiliser les crochets React uniquement au
niveau racine de la fonction de votre composant, pas dans les fonctions imbriquées
ou imbriquées si des blocs ou quelque chose
comme ça, Donc, utiliser le sélecteur d'utilisation ici n'est pas autorisé, mais nous pouvons bien sûr y utiliser nos
plats préférés et donc ici, nous pouvons savoir s'il s'agit d'un favori en vérifiant simplement les plats préférés et en recherchant le repas où son ID correspond à itemData.
.
article.
id, donc l'ID du repas que nous rendons actuellement. Par conséquent, le favori contiendra l'élément que nous avons trouvé
là-bas, alternativement nous en utilisons ici qui est une méthode Javascript intégrée qui retournera vrai si un élément dans
les plats préférés correspond à cette condition.
Donc, si le favori est vrai, nous savons que cet article est un favori et que nous pouvons donc utiliser
ce favori comme valeur pour est fav que nous passons comme paramètre initial à l'écran de
détail du repas et maintenant cette étoile vacillante qui est initialement vide devrait être disparu.
Maintenant, si je marque cela comme un favori ici et que je le laisse et que je reviens, c'est
rempli dès
le début, également sur l'écran préféré bien sûr. Voilà, c'est ainsi que nous pouvons travailler avec
les favoris, assurons-nous maintenant d'afficher du texte
factice ici sur l'écran préféré au cas où nous n'aurions aucune donnée à afficher autrement
et par la suite, prenons
soin de nos filtres.