1
00:00:02,510 --> 00:00:05,000
Commençons par changer cette icône d'étoile

2
00:00:05,020 --> 00:00:08,580
selon que c'est actuellement un favori ou non, je veux avoir

3
00:00:08,600 --> 00:00:14,390
cette étoile remplie seulement si c'est un favori et une étoile vide si ce n'est pas le cas.

4
00:00:14,390 --> 00:00:19,040
Donc, à la fin de l'écran de détail du repas, nous devons échanger cette icône que nous rendons ici en

5
00:00:19,040 --> 00:00:25,270
fonction du statut préféré de ce repas que nous avons chargé ici. Encore une fois, le problème ici est que nous

6
00:00:25,350 --> 00:00:32,040
pouvons savoir si ce repas est un favori ou non de manière très simple dans la fonction des composants, mais

7
00:00:32,040 --> 00:00:34,910
pas vraiment dans les options de navigation.

8
00:00:34,920 --> 00:00:42,010
Encore une fois, nous aurons besoin de paramètres pour communiquer entre ces deux mais dans l'ensemble, ce n'est pas trop difficile.

9
00:00:43,620 --> 00:00:49,830
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

10
00:00:49,830 --> 00:00:56,260
des repas à l'aide de l'état puis de l'état. repas. mes plats préférés, donc je

11
00:00:56,270 --> 00:01:01,380
veux obtenir tous mes plats préférés et maintenant je veux simplement vérifier si ce repas

12
00:01:04,190 --> 00:01:12,410
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

13
00:01:12,410 --> 00:01:18,830
ne pas simplement revenir les plats préférés, mais ajoutez un peu plus de logique là-dedans et ajoutez simplement une

14
00:01:18,950 --> 00:01:23,300
vérification où nous appelons certains qui est également une méthode intégrée qui renvoie

15
00:01:23,300 --> 00:01:30,170
vrai si la condition que nous sommes sur le point de spécifier est vraie pour au moins un élément dans ce

16
00:01:30,320 --> 00:01:41,090
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.

17
00:01:41,260 --> 00:01:46,570
Alors ici, je reçois l'id du repas du repas où nous chargeons sur l'écran de détail et

18
00:01:46,570 --> 00:01:54,290
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.

19
00:01:54,320 --> 00:01:59,600
Donc, avec cela, nous avons ce repas actuel comme information préférée, maintenant nous devons le passer aux options de navigation et

20
00:01:59,630 --> 00:02:07,010
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

21
00:02:07,010 --> 00:02:15,020
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

22
00:02:15,050 --> 00:02:21,620
c'est peut-être le paramètre is fav, le nom dépend de vous, qui contient le repas actuel est la valeur

23
00:02:21,620 --> 00:02:27,740
préférée, de sorte que la valeur que nous venons de déduire et maintenant une dépendance de cette fonction,

24
00:02:27,740 --> 00:02:33,710
de cet appel d'effet d'utilisation, je veux dire est bien sûr le repas actuel est préféré, quand

25
00:02:33,710 --> 00:02:41,170
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.

26
00:02:41,240 --> 00:02:48,740
Alors maintenant, de retour dans les options de navigation, nous pouvons récupérer ces informations ici, votre favori

27
00:02:48,740 --> 00:02:54,960
peut être récupéré à partir de navigationData. navigation avec l'aide de get param et là je

28
00:02:54,980 --> 00:02:58,640
nomme ceci est fav, le voici, donc c'est le nom par

29
00:02:59,460 --> 00:03:01,360
lequel nous pouvons le récupérer.

30
00:03:01,370 --> 00:03:06,080
Maintenant, nous avons les informations favorites dans l'en-tête et nous pouvons maintenant les utiliser pour rendre une icône

31
00:03:06,080 --> 00:03:06,610
différente ici.

32
00:03:06,620 --> 00:03:12,260
Donc, au lieu de toujours rendre l'étoile iOS, j'aurai une expression dynamique ici et je vérifierai si son favori est

33
00:03:12,260 --> 00:03:13,610
vrai, si c'est le cas,

34
00:03:13,610 --> 00:03:17,440
alors je veux utiliser l'étoile iOS qui est cette étoile de champ, si ce

35
00:03:17,810 --> 00:03:18,500
n'est pas

36
00:03:18,620 --> 00:03:22,220
le cas, je ' ll rendra le contour de l'étoile iOS et ce

37
00:03:22,220 --> 00:03:23,570
sera une étoile vide.

38
00:03:24,730 --> 00:03:28,960
Avec cela, nous espérons avoir une configuration qui fonctionne comme prévu.

39
00:03:29,020 --> 00:03:30,400
Si je vais aux spaghettis,

40
00:03:30,400 --> 00:03:32,760
maintenant c'est une étoile vide et si je clique

41
00:03:32,770 --> 00:03:35,640
dessus, c'est une étoile pleine et ça fait partie des favoris.

42
00:03:35,650 --> 00:03:41,020
Si je vais ensuite à l'écran de détail ici, vous voyez que cela prend un peu de temps jusqu'à ce

43
00:03:41,020 --> 00:03:47,590
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

44
00:03:47,590 --> 00:03:53,660
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

45
00:03:53,740 --> 00:03:58,570
partie, c'est exactement comment cela devrait se comporter ici. Donc, cela fonctionne généralement, la seule

46
00:03:58,570 --> 00:04:05,890
chose qui n'était pas trop belle, c'est que cette étoile ici est initialement vide et ne se remplit qu'après le

47
00:04:05,890 --> 00:04:08,640
chargement, nous pouvons donc résoudre ce problème,

48
00:04:08,650 --> 00:04:15,760
mais à part cela, cela fonctionne comme il se doit. Maintenant, pour corriger cette étoile initialement vide, nous pouvons

49
00:04:15,880 --> 00:04:16,950
à nouveau

50
00:04:16,990 --> 00:04:21,400
utiliser une solution de contournement expliquée précédemment pour ces données d'en-tête initiales.

51
00:04:21,550 --> 00:04:24,040
Nous ne voulons pas attendre la fin

52
00:04:24,040 --> 00:04:29,140
du premier rendu, nous devons plutôt transmettre ces données initiales à ce composant lorsque nous y accédons.

53
00:04:30,090 --> 00:04:35,910
Par conséquent, il est temps pour la liste des repas de nouveau où nous avons cette action

54
00:04:35,910 --> 00:04:43,170
de navigation pour transmettre également cette clé fav déjà, donc cette clé que j'ai essayé d'extraire ici dans l'écran de

55
00:04:44,040 --> 00:04:50,580
détail du repas là-bas, obtenir param est fav. Je veux transmettre la valeur actuelle lorsque nous chargeons ce composant, lorsque

56
00:04:50,790 --> 00:04:55,680
nous chargeons cet écran ici depuis l'intérieur de la liste des repas, qui est le composant qui

57
00:04:56,390 --> 00:04:57,540
déclenche cette navigation

58
00:04:57,690 --> 00:05:03,390
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

59
00:05:03,390 --> 00:05:04,070
nos favoris ou

60
00:05:04,180 --> 00:05:08,460
non, mais bien sûr, nous pouvons savoir si c'est le cas ou non. Dans la liste des repas,

61
00:05:08,460 --> 00:05:14,360
nous pouvons également accéder à la boutique Redux, pas seulement à partir des composants de l'écran.

62
00:05:14,370 --> 00:05:22,260
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

63
00:05:22,260 --> 00:05:31,560
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

64
00:05:31,560 --> 00:05:34,150
et maintenant, lorsque nous rendons un

65
00:05:34,260 --> 00:05:39,240
seul repas, nous pouvons l'utiliser pour savoir si ce repas fait partie de

66
00:05:39,240 --> 00:05:41,070
nos favoris. Soit dit en

67
00:05:41,100 --> 00:05:43,710
passant, vous ne pouvez pas utiliser le sélecteur

68
00:05:43,770 --> 00:05:49,680
d'utilisation ici, ce ne serait pas une utilisation valide car vous devez utiliser les crochets React uniquement au

69
00:05:49,680 --> 00:05:53,950
niveau racine de la fonction de votre composant, pas dans les fonctions imbriquées

70
00:05:53,970 --> 00:05:56,370
ou imbriquées si des blocs ou quelque chose

71
00:05:57,430 --> 00:06:03,500
comme ça, Donc, utiliser le sélecteur d'utilisation ici n'est pas autorisé, mais nous pouvons bien sûr y utiliser nos

72
00:06:03,830 --> 00:06:12,890
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.

73
00:06:12,890 --> 00:06:14,840
.

74
00:06:14,840 --> 00:06:14,840
article.

75
00:06:14,870 --> 00:06:20,990
id, donc l'ID du repas que nous rendons actuellement. Par conséquent, le favori contiendra l'élément que nous avons trouvé

76
00:06:20,990 --> 00:06:27,290
là-bas, alternativement nous en utilisons ici qui est une méthode Javascript intégrée qui retournera vrai si un élément dans

77
00:06:27,290 --> 00:06:29,930
les plats préférés correspond à cette condition.

78
00:06:29,930 --> 00:06:35,570
Donc, si le favori est vrai, nous savons que cet article est un favori et que nous pouvons donc utiliser

79
00:06:35,570 --> 00:06:40,300
ce favori comme valeur pour est fav que nous passons comme paramètre initial à l'écran de

80
00:06:40,460 --> 00:06:44,930
détail du repas et maintenant cette étoile vacillante qui est initialement vide devrait être disparu.

81
00:06:44,930 --> 00:06:50,630
Maintenant, si je marque cela comme un favori ici et que je le laisse et que je reviens, c'est

82
00:06:50,630 --> 00:06:51,550
rempli dès

83
00:06:51,590 --> 00:06:56,660
le début, également sur l'écran préféré bien sûr. Voilà, c'est ainsi que nous pouvons travailler avec

84
00:06:56,730 --> 00:06:58,830
les favoris, assurons-nous maintenant d'afficher du texte

85
00:06:58,830 --> 00:07:03,660
factice ici sur l'écran préféré au cas où nous n'aurions aucune donnée à afficher autrement

86
00:07:03,680 --> 00:07:05,400
et par la suite, prenons

87
00:07:05,400 --> 00:07:06,960
soin de nos filtres.