1
00:00:02,630 --> 00:00:05,410
Commençons par les favoris.

2
00:00:05,420 --> 00:00:13,270
Je veux m'assurer que lorsque je suis dans une recette, je peux cliquer sur cette étoile et qui l'ajoute en tant que favori et l'affiche ici dans

3
00:00:13,660 --> 00:00:18,490
l'écran des favoris où je ne vois actuellement rien parce que j'ai supprimé ces favoris factices.

4
00:00:19,880 --> 00:00:20,200
Pour cela

5
00:00:20,210 --> 00:00:25,830
je vais commencer dans le dossier store, dans le dossier actions et ajouter un nouveau dossier que je nommerai également repas. js, vous pouvez le nommer différemment si cela vous porte

6
00:00:25,840 --> 00:00:30,570
à confusion mais oui, ces deux fichiers repas. js ici en actions et

7
00:00:30,560 --> 00:00:34,970
en repas. js en réducteurs et en actions repas. fichier js, je

8
00:00:34,960 --> 00:00:41,900
vais mettre en place des actions Redux qui commencent généralement par la mise en place de

9
00:00:41,930 --> 00:00:48,760
certains identifiants uniques que je stocke dans les constantes et qui seront basculer favoris.

10
00:00:49,070 --> 00:00:50,710
Vous pouvez utiliser ce que vous

11
00:00:50,780 --> 00:00:53,860
voulez ici, la valeur que vous stockez ici est généralement le même

12
00:00:54,350 --> 00:00:59,570
identifiant, c'est donc la valeur de l'identifiant et qui est simplement stockée dans une constante afin que nous n'ayons pas à la

13
00:00:59,570 --> 00:01:02,870
taper manuellement plus tard, mais nous pouvons toujours importer cette constante et éviter les

14
00:01:02,870 --> 00:01:03,690
fautes de frappe.

15
00:01:03,860 --> 00:01:05,440
Encore une fois, si

16
00:01:05,440 --> 00:01:09,730
c'est nouveau pour vous, consultez d'abord une ressource React Redux dédiée.

17
00:01:09,950 --> 00:01:12,680
Maintenant, j'utiliserai également le modèle de créateur d'action ici, ce

18
00:01:12,680 --> 00:01:19,190
qui signifie que j'ai cet identifiant ici, mais maintenant j'exporterai également une fonction qui me crée une action car une action n'est pas

19
00:01:19,280 --> 00:01:24,050
souvent un identifiant souvent et dans ce cas, c'est le cas, c'est aussi le cas a

20
00:01:24,050 --> 00:01:29,630
besoin d'une charge utile supplémentaire et donc nous avons en fait une action qui est un objet avec identifiant et

21
00:01:29,780 --> 00:01:35,930
charge utile et donc ici, j'ajouterai une fonction qui me crée un tel objet d'action et je nommerai cette bascule préférée comme

22
00:01:35,930 --> 00:01:37,430
ceci, sélectionnez l'identifiant mais dans

23
00:01:37,490 --> 00:01:42,950
le cas du chameau et c'est une fonction qui peut recevoir des données parce que je serai celui qui

24
00:01:42,950 --> 00:01:48,500
l'appelle et qui devrait retourner un objet Javascript qui décrit cette action, donc qui a disons un type, c'est

25
00:01:48,500 --> 00:01:50,300
généralement comme ça que vous appelez

26
00:01:50,330 --> 00:01:55,010
ce champ identifiant mais vous êtes généralement libre d'utiliser tout ce que vous voulez là-bas et

27
00:01:55,010 --> 00:01:55,590
dans

28
00:01:55,670 --> 00:01:57,490
mon cas, ce sera le favori,

29
00:01:57,500 --> 00:02:03,700
donc je pointe cet identifiant, j'utilise cette chaîne comme identifiant et ensuite toutes les données supplémentaires que vous voulez, par exemple ici

30
00:02:03,740 --> 00:02:09,500
je ' ll faudra faire de la pub d l'ID de repas du repas qui doit être basculé et cela

31
00:02:09,500 --> 00:02:14,540
signifie que cette fonction doit également obtenir cet ID et une entrée car sinon je ne peux pas

32
00:02:14,540 --> 00:02:16,700
le stocker dans l'action que j'ai créée.

33
00:02:16,710 --> 00:02:21,120
Donc, c'est mon créateur d'action pour l'action préférée à bascule, maintenant dans le réducteur,

34
00:02:21,120 --> 00:02:27,810
je veux agir quand j'obtiens une telle action préférée à bascule et pour cela, je vais utiliser un modèle que vous avez

35
00:02:27,810 --> 00:02:28,370
probablement

36
00:02:28,380 --> 00:02:34,020
vu si vous avez travaillé avec Redux auparavant , Je vais utiliser une instruction switch ici et activer

37
00:02:34,020 --> 00:02:40,890
mon type d'action car gardez à l'esprit que l'action sera un objet avec une propriété type qui identifie l'action qui s'est produite.

38
00:02:40,890 --> 00:02:45,330
J'active donc ce type d'action, puis je gère différents cas pour les différentes actions

39
00:02:45,330 --> 00:02:46,650
que je pourrais avoir.

40
00:02:46,650 --> 00:02:53,040
Donc, ici, j'ai l'action de bascule préférée et pour cela, vous devez importer le bascule favori des repas d'actions et c'est pourquoi je

41
00:02:53,390 --> 00:02:58,590
le stocke dans la constante séparée parce que maintenant je n'ai plus à taper manuellement les bascules favorites où

42
00:02:58,590 --> 00:03:00,820
je pourrais avoir un typo là-dedans, à

43
00:03:00,840 --> 00:03:07,410
la place j'utilise juste cette constante dans laquelle la chaîne est stockée. Et maintenant ici, je lance la logique que je veux exécuter pour

44
00:03:07,410 --> 00:03:13,310
ensuite travailler avec cette action et changer mon état de telle sorte que le repas avec l'ID de repas qui fait partie de

45
00:03:13,350 --> 00:03:19,470
mon action soit ajouté aux repas préférés ou retiré de là s'il faisait déjà partie parce que c'est une action de bascule ici,

46
00:03:19,470 --> 00:03:20,790
je veux ajouter des

47
00:03:20,820 --> 00:03:28,770
éléments qui ne sont pas encore favoris, je veux supprimer des éléments qui le sont. Note latérale, dans l'instruction switch, j'ajouterai également un

48
00:03:28,770 --> 00:03:33,150
cas par défaut où je renvoie simplement l'état inchangé.

49
00:03:33,150 --> 00:03:36,900
Nous ne devrions pas vraiment atteindre cela, mais au cas où nous le ferions, eh bien c'est ce

50
00:03:37,380 --> 00:03:40,800
que nous faisons, mais revenons à l'affaire préférée. Là-bas, je veux maintenant savoir

51
00:03:42,770 --> 00:03:48,740
si mon repas avec l'ID qui fait partie de l'action parce que j'ajoute l'ID de repas à

52
00:03:48,740 --> 00:03:50,450
l'action, si ce repas fait

53
00:03:50,450 --> 00:03:52,550
déjà partie des repas préférés, si

54
00:03:52,550 --> 00:03:53,660
oui je

55
00:03:53,690 --> 00:04:00,960
veux supprimez-le, si ce n'est pas le cas, je veux l'ajouter. Donc pour cela, je vais commencer par trouver l'index du repas dans le tableau

56
00:04:00,960 --> 00:04:07,380
des repas préférés car si c'est alors -1, je sais que je n'ai pas trouvé d'index donc il ne faisait pas partie, s'il est supérieur

57
00:04:07,390 --> 00:04:07,820
ou

58
00:04:07,840 --> 00:04:13,540
égal à zéro, je sais que l'article en faisait partie. Je vais donc avoir mon index existant ici

59
00:04:13,540 --> 00:04:21,960
et je l'obtiens en utilisant les plats préférés de l'État et là, j'ai entré un signe égal et l'état est simplement mon instantané d'état actuel que

60
00:04:22,010 --> 00:04:27,510
j'obtiens et là, nous aurons une propriété de repas préférés et je peux utiliser la méthode find

61
00:04:27,510 --> 00:04:33,780
index, une méthode Javascript normale que je peux utiliser sur des tableaux pour obtenir l'index d'un élément qui correspond

62
00:04:33,840 --> 00:04:39,810
à certains critères que j'ai mis en place ici dans une fonction que je passe pour trouver index,

63
00:04:40,230 --> 00:04:47,040
cette fonction s'exécute à chaque repas dans le tableau et s'il retourne vrai, alors il me donne l'index de l'élément pour

64
00:04:47,040 --> 00:04:48,610
lequel il a traversé.

65
00:04:48,660 --> 00:04:56,900
Alors là, je veux revenir vrai si le repas. id est égal à l'action. repasId. Cela signifie simplement que le repas que

66
00:04:56,930 --> 00:05:02,090
je regarde dans mes plats préférés a la même idée que le repas pour lequel cette action

67
00:05:02,090 --> 00:05:08,450
se produit et cela signifie que si cela est vrai pour n'importe quel élément des plats préférés, que le repas que

68
00:05:08,540 --> 00:05:13,490
nous essayons de basculer fait déjà partie des favoris, nous devrons donc le supprimer car cela

69
00:05:13,490 --> 00:05:13,990
va

70
00:05:13,990 --> 00:05:20,090
maintenant nous renvoyer l'index de l'élément, donc l'index existant sera supérieur à -1 et donc, nous pouvons ensuite utiliser cet index

71
00:05:20,090 --> 00:05:21,120
pour le supprimer.

72
00:05:21,170 --> 00:05:23,660
Si cela retourne vrai pour aucun article, donc si cela revient à

73
00:05:23,720 --> 00:05:29,870
la fin -1, je sais que l'article ne fait pas encore partie des plats préférés. L'index existant contient donc des informations très importantes et

74
00:05:29,870 --> 00:05:34,520
je vais donc l'utiliser ici dans une instruction if et vérifier si l'index existant

75
00:05:34,520 --> 00:05:40,760
est supérieur ou égal à 0, ce qui signifie que nous avons déjà ce repas dans le cadre des

76
00:05:41,390 --> 00:05:43,040
repas préférés ou non.

77
00:05:43,040 --> 00:05:48,290
Maintenant, dans le cas où, si l'article fait déjà partie des plats préférés, je veux le supprimer.

78
00:05:48,290 --> 00:05:53,210
Donc ici, je vais finalement retourner un nouvel état parce que dans votre réducteur, à la fin,

79
00:05:53,210 --> 00:06:00,740
vous devez retourner un nouvel état qui est un nouvel objet où je copie d'abord l'état existant avec l'opérateur de propagation ici pour le retirer toutes

80
00:06:00,740 --> 00:06:01,110
les

81
00:06:01,110 --> 00:06:05,810
paires clé-valeur de l'état existant, afin que je ne perde aucun état et que je

82
00:06:05,870 --> 00:06:06,980
ne remplace aucun

83
00:06:06,980 --> 00:06:12,200
état que je ne veux pas remplacer et que je ne remplace que les plats préférés, donc je

84
00:06:12,200 --> 00:06:17,870
vais ajouter ceci à nouveau pour remplacer les plats préférés existants par mes nouveaux plats préférés qui devraient en fin

85
00:06:17,930 --> 00:06:21,520
de compte être les anciens repas préférés sans l'élément de cet index.

86
00:06:24,250 --> 00:06:30,360
Et maintenant, ici pour obtenir mes plats préférés mis à jour, je vais créer une nouvelle constante,

87
00:06:30,360 --> 00:06:39,470
mise à jourFavMeals, là je vais d'abord créer un nouveau tableau et le remplir avec mes repas existants, alors déplacez mes plats préférés existants comme ça et

88
00:06:39,470 --> 00:06:46,240
je le fais pour créer une copie de ce tableau afin que je ne manipule pas le tableau d'origine si

89
00:06:46,250 --> 00:06:53,000
je commence maintenant à travailler dessus parce que maintenant je veux prendre mes mises à jourFavMeals, appeler l'épissure ici,

90
00:06:53,660 --> 00:06:57,470
puis supprimer l'élément à l'index existant et uniquement cet élément.

91
00:06:57,470 --> 00:07:03,950
Donc, cela va finalement prendre cet index UpdatedFavMeals, le modifier et supprimer l'élément de cet index et modifier ce tableau,

92
00:07:04,250 --> 00:07:06,200
c'est pourquoi je l'ai copié

93
00:07:06,200 --> 00:07:12,110
afin de ne pas modifier le tableau d'origine et maintenant nous pouvons utiliser ce tableau UpdatedFavMeals ici et stockez-le

94
00:07:12,110 --> 00:07:17,330
en tant que repas préféré dans notre magasin, car ce sera la gamme de repas préférée

95
00:07:17,390 --> 00:07:19,880
sans le repas que nous venons de retirer.

96
00:07:23,360 --> 00:07:29,680
Dans le cas contraire, ce qui est bien sûr pertinent si nous ne trouvons pas de

97
00:07:29,690 --> 00:07:36,380
produit, nous voulons donc l'ajouter, ici, je veux également retourner un nouvel état où je copie d'abord l'ancien

98
00:07:36,380 --> 00:07:42,230
état, puis je remplacerai les plats préférés par être essentiellement mes anciens plats préférés et

99
00:07:42,230 --> 00:07:48,380
maintenant je peux appeler concat, une méthode Javascript intégrée à Javascript qui renvoie un nouveau tableau

100
00:07:48,410 --> 00:07:55,520
qui prend l'ancien tableau et ajoute un nouvel élément et là, je veux ajouter le repas pour cet ID

101
00:07:55,700 --> 00:08:05,130
ici et bien sûr Je peux trouver ce repas sur mon état, là sur les repas, c'est cette propriété, l'état ici se réfère toujours juste

102
00:08:05,130 --> 00:08:08,940
à cette structure d'état ici en passant et maintenant

103
00:08:08,940 --> 00:08:14,240
ici, je peux trouver le repas que je veux ajouter et puisque cela devient

104
00:08:14,380 --> 00:08:18,210
très longtemps, je vais en fait externaliser cela dans une

105
00:08:18,490 --> 00:08:27,770
nouvelle ligne, donc mon repas que je veux ajouter peut être trouvé avec la méthode find qui fonctionne sur tous les repas et là,

106
00:08:27,800 --> 00:08:33,560
si repasId est égal à l'action. mealId, alors j'ai le repas que je veux ajouter et c'est ce repas

107
00:08:33,560 --> 00:08:40,180
que je concatène à mes repas préférés, de sorte que j'ajoute ceci à ce tableau. Cela devrait être une

108
00:08:40,180 --> 00:08:45,690
logique qui fonctionne et qui gère nos favoris.

109
00:08:45,700 --> 00:08:52,120
Maintenant, nous devons nous assurer que nous envoyons réellement cette action chaque fois que nous cliquons sur cette icône en forme d'étoile dans notre

110
00:08:52,120 --> 00:08:52,540
en-tête.

111
00:08:55,360 --> 00:08:56,570
Pour envoyer l'action,

112
00:08:56,570 --> 00:09:00,550
allons à l'écran de détail du repas car c'est là que nous avons

113
00:09:00,550 --> 00:09:05,590
notre icône étoile ici et quand j'appuie sur ce bouton, je veux finalement envoyer une action.

114
00:09:05,710 --> 00:09:08,520
La bonne nouvelle est que la répartition des actions est

115
00:09:08,530 --> 00:09:09,800
très facile, nous avons

116
00:09:09,850 --> 00:09:16,190
obtenu le sélecteur d'utilisation, nous avons également obtenu la répartition de l'utilisation qui, au final, nous permet de lancer facilement une fonction.

117
00:09:16,200 --> 00:09:24,110
La mauvaise nouvelle est que cela ne peut bien sûr être utilisé que dans le corps du composant ici, dans notre composant fonctionnel et non

118
00:09:24,260 --> 00:09:26,150
dans les options de navigation.

119
00:09:26,210 --> 00:09:32,690
Nous devrons donc à nouveau travailler avec des paramètres définis pour communiquer entre les options de navigation et le composant, mais c'est

120
00:09:32,720 --> 00:09:37,970
quelque chose que nous pouvons bien sûr faire. Donc, ici, dans l'écran des détails du repas,

121
00:09:38,040 --> 00:09:45,470
je vais simplement commencer par appeler use dispatch et ce que cela fait, c'est qu'il nous donne une fonction de répartition, une fonction que nous pouvons

122
00:09:45,470 --> 00:09:53,650
appeler pour distribuer de nouvelles actions et je stocke dans une constante nommée répartition. Ensuite, je veux créer un gestionnaire de

123
00:09:53,650 --> 00:10:01,210
bascule préféré qui est une fonction qui, à la fin, devrait envoyer cette action.

124
00:10:01,210 --> 00:10:06,390
Alors ici, je veux appeler la répartition dont je dispose grâce à ce crochet et maintenant

125
00:10:06,610 --> 00:10:10,600
pour répartir, je dois transmettre l'action que je veux répartir et pour

126
00:10:10,600 --> 00:10:14,410
cela, je vais utiliser cette action créateur bascule préférée ici.

127
00:10:14,620 --> 00:10:18,340
Il nous suffit donc d'importer cela, d'importer depuis le dossier du magasin,

128
00:10:20,780 --> 00:10:27,410
là depuis les actions et là depuis les repas. fichier js, à partir de là, je veux importer la

129
00:10:27,410 --> 00:10:35,740
bascule préférée, pas l'identifiant dans toutes les majuscules mais cette fonction de créateur d'action. Avec cela importé ici, en expédition, nous pouvons appeler

130
00:10:35,740 --> 00:10:40,940
toggle favorite comme ceci et maintenant ici, nous devons transmettre l'ID

131
00:10:40,940 --> 00:10:45,440
et c'est bien sûr le repasId que nous extrayons

132
00:10:48,480 --> 00:10:53,310
déjà là-haut ou selectedMeal. Ça marcherait aussi, quoi que

133
00:10:55,350 --> 00:10:58,910
vous vouliez, j'irai simplement pour le repas comme ça.

134
00:10:59,010 --> 00:11:07,110
Maintenant, nous pouvons réactiver l'utilisation de l'effet pour communiquer avec notre en-tête, non pas avec cette ligne mais avec les paramètres

135
00:11:07,110 --> 00:11:14,130
de navigation des accessoires et maintenant ici, je vais nommer cette bascule fav, le nom dépend de vous

136
00:11:14,130 --> 00:11:16,890
et pointe mon bascule gestionnaire préféré.

137
00:11:16,890 --> 00:11:22,980
Maintenant, basculer le gestionnaire favori devrait donc être ajouté comme dépendance ici et pour éviter les

138
00:11:23,580 --> 00:11:30,180
boucles infinies, je vais à nouveau utiliser le rappel d'utilisation que j'importe de React pour encapsuler cette fonction ici.

139
00:11:30,180 --> 00:11:37,060
Donc, ici, l'utilisation du rappel est enroulée autour de cette fonction et nous devons spécifier les dépendances ici et la dépendance numéro

140
00:11:37,200 --> 00:11:40,020
un est la répartition, React Redux s'assurera que cela

141
00:11:40,020 --> 00:11:44,640
ne change jamais, donc c'est une dépendance qui ne changera jamais, la dépendance deux est

142
00:11:45,210 --> 00:11:46,730
repasId, cela aussi ne

143
00:11:46,740 --> 00:11:49,270
devrait pas changer pendant que nous sommes

144
00:11:49,340 --> 00:11:54,900
sur cette page, elle aura toujours la même valeur. Donc, avec cela, cette fonction ne devrait pas vraiment être

145
00:11:54,900 --> 00:12:00,360
recréée, ce qui signifie que cet effet ne se reproduira jamais à moins qu'il ne soit recréé, ce qui n'est

146
00:12:00,360 --> 00:12:07,820
le cas que si nous avions un nouvel ID, auquel cas il serait bon que cela soit recréé mais sinon, cela a gagné 't changer et donc nous

147
00:12:07,820 --> 00:12:10,340
devrions avoir un canal de communication sécurisé ici.

148
00:12:10,550 --> 00:12:16,490
Maintenant, dans l'en-tête, nous pouvons maintenant extraire ce gestionnaire, en passant, nous n'avons plus

149
00:12:16,510 --> 00:12:19,040
besoin du repas ici, nous

150
00:12:19,150 --> 00:12:28,420
pouvons maintenant simplement extraire la fonction préférée de notre navigation de données de navigation get param puis je nomme cette bascule fav

151
00:12:28,420 --> 00:12:35,080
, c'est donc le nom du paramètre que nous pouvons extraire et cela devrait nous donner

152
00:12:35,080 --> 00:12:41,050
accès à cette fonction que nous transmettons. Maintenant, basculer entre les favoris est ce qui devrait être exécuté lorsque nous

153
00:12:41,050 --> 00:12:42,130
appuierons sur ce bouton.

154
00:12:42,550 --> 00:12:49,570
Donc, ici, je pointerai vers le favori parce que cela contient un pointeur sur cette fonction et donc cette fonction

155
00:12:49,600 --> 00:12:56,740
sera exécutée lorsque nous appuierons maintenant sur cette étoile. Eh bien, nous verrons si cela fonctionne.

156
00:12:56,750 --> 00:13:04,760
Gardons cela et revenons aux spaghettis ici et cliquez sur cette étoile et cliquez sur les favoris et ça a l'air

157
00:13:04,760 --> 00:13:05,450
bien,

158
00:13:05,450 --> 00:13:07,600
les spaghettis font partie des favoris.

159
00:13:07,670 --> 00:13:11,440
Cliquons à nouveau sur l'étoile ici et allons dans les favoris et c'est parti, cela

160
00:13:11,480 --> 00:13:12,730
a beaucoup de sens.

161
00:13:12,740 --> 00:13:18,290
Cliquez dessus à nouveau, c'est de retour, allez à la page de détail ici dans l'onglet Favoris et cliquez sur

162
00:13:18,290 --> 00:13:20,550
l'étoile et revenez, eh bien c'est parti.

163
00:13:20,750 --> 00:13:27,410
Vérifions-le également sur Android, pour le schnitzel peut-être, les favoris sont vides en ce moment. Revenons en arrière et cliquez sur l'étoile,

164
00:13:27,410 --> 00:13:30,560
allez dans les favoris, la voici,

165
00:13:30,560 --> 00:13:39,250
revenez en arrière, cliquez sur l'étoile et c'est parti. Donc, cette logique fonctionne généralement.

166
00:13:39,250 --> 00:13:43,150
Il y a quelques choses sur lesquelles je veux encore travailler, par exemple je veux changer

167
00:13:43,150 --> 00:13:44,250
l'icône en fonction du

168
00:13:44,260 --> 00:13:49,600
statut favori, je veux aussi montrer du texte dans l'écran favori quand il est vide mais généralement, la répartition et l'utilisation

169
00:13:49,600 --> 00:13:52,840
des données fonctionnent même si nous en avons besoin dans un en-tête.