1
00:00:02,220 --> 00:00:06,440
Pour la fonctionnalité d'ajout au panier, nous devrons travailler sur deux choses - l'une est

2
00:00:06,450 --> 00:00:09,850
bien sûr que nous pouvons avoir un écran de panier, que nous

3
00:00:09,880 --> 00:00:17,250
avons une icône ici dans notre en-tête qui nous amène à l'écran du panier où nous pouvons voir comme la somme totale et les articles du

4
00:00:17,250 --> 00:00:20,640
panier et où nous avons ce bouton de commande maintenant, mais je

5
00:00:20,640 --> 00:00:26,580
dirais que c'est la deuxième étape parce que la première étape la plus importante est que nous ajoutons la logique pour

6
00:00:26,910 --> 00:00:33,030
gérer les articles du panier et cela implique Redux. Pour cela, je vais ajouter un tout

7
00:00:33,040 --> 00:00:40,620
nouveau réducteur, un deuxième réducteur que je nommerai cart, cart. js et aussi un fichier d'actions et c'est maintenant en fait

8
00:00:40,750 --> 00:00:43,280
un fichier d'action que nous allons remplir.

9
00:00:43,330 --> 00:00:45,270
Nous le ferons aussi avec le fichier produits plus tard une

10
00:00:45,280 --> 00:00:52,250
fois que nous nous lancerons dans l'ajout de produits et ainsi de suite, mais pour l'instant, commençons par la fonction de panier. Voici donc dans le

11
00:00:52,250 --> 00:00:55,010
panier. fichier js dans le

12
00:00:55,250 --> 00:01:00,350
dossier des réducteurs, je vais configurer mon état initial pour cette tranche de panier et encore une fois, ce

13
00:01:00,350 --> 00:01:05,390
sont tous ces réducteurs séparés et les états qu'ils parviennent à constituer ce magasin Redux total parce qu'au final,

14
00:01:05,390 --> 00:01:11,420
c'est ce que vous combinez ensuite ici avec combiné réduit en un seul réducteur de racine et un grand état à la fin.

15
00:01:11,520 --> 00:01:16,150
Nous avons juste ces sous-états individuels pour faciliter la gestion des données.

16
00:01:16,230 --> 00:01:22,100
Donc, ici, dans le réducteur de chariot, à quoi devrait ressembler l'état de notre chariot?

17
00:01:22,500 --> 00:01:31,000
Eh bien, notre panier aura un tas d'articles, pourrait être un tableau et une somme initialement nulle, donc un montant total que vous pourriez dire, vous

18
00:01:31,360 --> 00:01:35,680
pouvez bien sûr également nommer ce montant total peut-être pour que ce soit

19
00:01:35,680 --> 00:01:36,720
vraiment clair.

20
00:01:36,730 --> 00:01:39,160
Ce sont donc les deux choses qui composent mon panier ici et comme toujours,

21
00:01:39,160 --> 00:01:45,460
je ne peux pas insister assez sur ce point, il y a plus d'une façon de mettre cela en œuvre. Donc, si vous souhaitez également gérer d'autres données ici,

22
00:01:45,460 --> 00:01:47,350
faites-le, il n'y a pas

23
00:01:47,380 --> 00:01:48,480
d'approche unique,

24
00:01:48,490 --> 00:01:50,920
bonne ou mauvaise, c'est juste mon approche

25
00:01:50,920 --> 00:01:53,330
de la construction de cette application.

26
00:01:53,410 --> 00:01:58,480
Maintenant, il est important que pour ce panier ici, je veux m'assurer que si nous avons déjà un

27
00:01:58,590 --> 00:02:02,120
article dans le panier, disons la chemise rouge et que je clique sur

28
00:02:02,440 --> 00:02:09,340
le panier une deuxième fois, je n'ajoute pas deux articles à ce tableau mais Je n'ai toujours qu'un seul article là-dedans et à la place,

29
00:02:09,340 --> 00:02:15,850
chaque article de ce tableau d'articles devrait être un objet où je gère comme l'ID du produit peut-être, où j'ai le titre et

30
00:02:15,850 --> 00:02:18,940
la quantité de l'article dans le panier, de sorte que

31
00:02:18,970 --> 00:02:22,630
ce serait alors changer à 2 si je clique dessus une deuxième fois.

32
00:02:22,720 --> 00:02:31,960
Par conséquent, vous pourriez également affirmer que les articles ne devraient peut-être pas être un tableau, mais peut-être un objet Javascript, car cela nous permet

33
00:02:32,170 --> 00:02:37,930
de stocker l'ID du produit sous forme de clé et la valeur pourrait être un objet

34
00:02:38,220 --> 00:02:42,420
avec le titre, la quantité, avec le prix et c'est juste

35
00:02:42,470 --> 00:02:43,840
une alternative, vous

36
00:02:43,840 --> 00:02:48,830
pouvez aussi tout faire avec un tableau mais c'est en fait l'approche que j'utiliserai.

37
00:02:49,180 --> 00:02:54,190
Maintenant, le réducteur que j'exporte est donc un réducteur qui obtient bien sûr un état qui

38
00:02:54,190 --> 00:03:00,700
a notre état initial comme valeur par défaut et une action comme argument qui à la fin doit renvoyer des données.

39
00:03:01,150 --> 00:03:04,890
Donc, à la fin, il doit retourner un nouvel état qui est ensuite utilisé par Redux.

40
00:03:04,900 --> 00:03:07,210
Il nous faut maintenant une action pour continuer.

41
00:03:07,660 --> 00:03:15,610
Alors ici, j'exporterai une constante, un identifiant d'action et je nommerai cet ajout au panier, c'est à vous de

42
00:03:15,610 --> 00:03:22,790
choisir, j'irai avec ajouter au panier comme ça et dans le fichier d'actions, je créerai un tel

43
00:03:22,780 --> 00:03:24,490
fonction de créateur d'action.

44
00:03:24,610 --> 00:03:26,620
Voici donc une autre

45
00:03:26,650 --> 00:03:34,800
constante que je nommerai ajouter au panier qui reçoit disons l'objet produit complet que je veux ajouter, afin que je puisse extraire

46
00:03:34,800 --> 00:03:40,260
les informations dont j'ai besoin, puis ici, nous devons retourner un tel objet d'action

47
00:03:40,260 --> 00:03:44,730
qui a un type qui est ajouté au panier, puis notre produit.

48
00:03:44,730 --> 00:03:50,010
C'est juste un moyen de créer ces actions qui nous permet de le faire très simplement à l'intérieur

49
00:03:50,010 --> 00:03:51,240
de nos composants.

50
00:03:51,240 --> 00:03:56,970
Donc, à la fin, dans le réducteur de panier, dans tous les réducteurs en fait, mais dans l'endroit où nous nous

51
00:03:57,310 --> 00:03:58,010
soucions des

52
00:03:58,020 --> 00:04:06,180
réducteurs de panier, nous obtiendrons cette action d'ajout au panier, nous devons donc ici changer de type d'action et gérer le cas où il est ajouté au panier et vous devez

53
00:04:06,360 --> 00:04:07,950
donc importer ajouter au panier à

54
00:04:07,950 --> 00:04:14,050
partir de ce dossier d'actions et à partir du fichier panier. Maintenant et d'ailleurs, cette action lorsqu'elle est envoyée est

55
00:04:14,070 --> 00:04:19,200
reçue sur tous les réducteurs, mais si vous ne la gérez pas avec un cas distinct,

56
00:04:19,200 --> 00:04:26,460
votre cas par défaut démarrera, ce qui devrait normalement renvoyer simplement votre tranche d'état actuelle pour ce réducteur, qui signifie que la tranche

57
00:04:26,460 --> 00:04:31,100
d'état de ce réducteur est inchangée. Ici, cependant, dans le réducteur de

58
00:04:31,140 --> 00:04:34,550
panier, je veux bien sûr changer mon état, donc

59
00:04:34,710 --> 00:04:36,750
je gère pour ajouter au boîtier

60
00:04:36,750 --> 00:04:39,660
ici et maintenant dans le panier, que devrait-il

61
00:04:39,660 --> 00:04:41,240
se passer là-bas?

62
00:04:42,280 --> 00:04:50,720
Eh bien, nous obtenons notre produit ajouté, nous pouvons le retirer de l'action parce que là dans l'action, nous aurons une clé de produit, c'est ce que

63
00:04:50,720 --> 00:04:51,750
nous venons

64
00:04:51,770 --> 00:04:56,040
de configurer ici dans le panier d'action. fichier js, alors je vais obtenir notre

65
00:04:56,060 --> 00:05:00,710
produit et je le stocke dans un produit constant et ajouté ici avec lequel nous pouvons travailler maintenant

66
00:05:01,920 --> 00:05:08,910
et nous aurons notre prix de produit ici qui est bien sûr ajoutéProduct. prix et nous aurons notre titre de

67
00:05:08,940 --> 00:05:16,170
produit qui est ajoutéProduit. Titre. Avant de continuer, définissons comment l'article du

68
00:05:16,170 --> 00:05:21,460
panier, de sorte que ce que nous stockons ici devrait ressembler, la valeur que nous avons là-dedans.

69
00:05:21,650 --> 00:05:30,550
Je vais donc aller dans mon dossier de modèles et ajouter un élément de panier. js fichier ici, puis ajoutez une classe d'article de panier qui

70
00:05:30,580 --> 00:05:32,650
reçoit un constructeur et avant

71
00:05:32,890 --> 00:05:39,370
de l'oublier à nouveau, qui doit être exportée ici et maintenant dans ce constructeur, je

72
00:05:39,370 --> 00:05:46,750
m'attends à obtenir la quantité du produit que nous sommes sur le point d'ajouter, le prix du

73
00:05:47,020 --> 00:05:56,950
produit, le titre du produit et la somme pour cet article, si nous avons trois fois la chemise rouge, notre somme serait trois fois

74
00:05:56,950 --> 00:05:58,980
29. 99,

75
00:05:59,110 --> 00:06:01,690
donc environ 90 $.

76
00:06:01,690 --> 00:06:10,220
Maintenant, ce que je n'obtiens pas ici, c'est l'ID du produit, car je vais l'utiliser comme clé à l'intérieur de mon objet ici, quels éléments contiennent, puis

77
00:06:10,220 --> 00:06:13,440
deviendra plus clair une fois que nous l'aurons implémenté.

78
00:06:14,150 --> 00:06:17,690
Donc ici dans l'article du panier, je stocke

79
00:06:17,840 --> 00:06:22,890
juste toutes les données que je reçois, la quantité, le prix du

80
00:06:22,900 --> 00:06:34,200
produit et j'ai ces données là que je dois sortir plus tard, donc le titre du produit et la somme, comme ça et maintenant de retour dans le

81
00:06:34,260 --> 00:06:41,520
réducteur, nous pouvons bien sûr importer cette classe d'articles de panier à partir du dossier des modèles et

82
00:06:41,520 --> 00:06:47,880
de l'article de panier ici et maintenant dans cet étui à ajouter là-bas, nous devons

83
00:06:47,980 --> 00:06:52,680
d'abord savoir si ce produit fait déjà partie de nos articles.

84
00:06:52,680 --> 00:06:59,370
Maintenant, comme je l'ai mentionné, j'ajouterai chaque nouveau produit en ajoutant une nouvelle clé aux articles qui est l'ID de ce produit, car

85
00:06:59,370 --> 00:07:01,020
c'est unique, nous n'avons toujours

86
00:07:01,020 --> 00:07:06,870
chaque clé qu'une seule fois, puis la valeur sera un article du panier comme nous venons de le faire

87
00:07:07,110 --> 00:07:12,990
défini dans les modèles et donc je sais que si l'ID du produit que je reçois est déjà une clé

88
00:07:13,170 --> 00:07:17,050
d'articles, alors cela a déjà notre article en tant qu'article de panier.

89
00:07:17,070 --> 00:07:26,190
Donc, ici, nous pouvons simplement vérifier si des articles sont ajoutés pour un produit ajouté. L'ID existe, donc si cela retourne quelque chose de

90
00:07:26,200 --> 00:07:36,290
vrai, donc pas indéfini, alors nous avons déjà l'article dans le panier, ce qui est correct, mais nous devons juste

91
00:07:36,290 --> 00:07:38,800
changer la quantité, sinon

92
00:07:38,860 --> 00:07:41,600
nous devrons ajouter un nouvel article.

93
00:07:41,600 --> 00:07:45,920
Commençons donc par le cas else, car c'est le cas que nous rencontrerons pour la

94
00:07:45,920 --> 00:07:47,170
première fois lorsque

95
00:07:47,330 --> 00:07:51,910
nous ajouterons quelque chose, là nous avons besoin d'un nouvel élément de panier, je le crée

96
00:07:51,920 --> 00:07:58,460
avec le nouveau mot clé et la classe d'élément de panier que j'ai définie et là-bas , nous devons fournir la quantité

97
00:07:58,520 --> 00:08:00,530
qui bien sûr en est une si

98
00:08:00,920 --> 00:08:08,840
nous ajoutons simplement un nouvel article, nous devons fournir le prix du produit, le titre du produit ici et la somme et la somme bien sûr au

99
00:08:09,050 --> 00:08:11,580
départ est juste notre prix du produit, non?

100
00:08:11,600 --> 00:08:17,810
Parce que si nous ajoutons un article de ce prix, la somme pour cet article de panier est le prix de notre produit et maintenant ce

101
00:08:17,810 --> 00:08:21,200
nouvel article de panier doit être ajouté à nos articles de panier ici.

102
00:08:24,100 --> 00:08:29,050
Donc ici, nous renvoyons une copie de notre état et nous

103
00:08:29,220 --> 00:08:38,290
définissons des éléments égaux à un nouvel objet dans lequel je copie tous mes éléments d'état existants, afin que je

104
00:08:38,290 --> 00:08:39,630
copie mon

105
00:08:39,640 --> 00:08:47,200
objet d'éléments existant ici, puis j'ajoute une nouvelle clé avec cette syntaxe dynamique avec les crochets

106
00:08:47,200 --> 00:08:55,280
où le nom de la clé est ajoutéProduct. ID, c'est ce que je voulais dire avec l'ID du produit étant la clé

107
00:08:55,340 --> 00:08:59,190
de notre objet articles et la valeur est notre nouvel article de panier.

108
00:08:59,390 --> 00:09:04,730
C'est juste une syntaxe que vous devez connaître, c'est du Javascript vanille, c'est ainsi que vous pouvez ajouter ou accéder ici comme

109
00:09:04,730 --> 00:09:11,570
une propriété dynamique au lieu de la coder en dur ici comme une chaîne. Soit dit en passant, cela ici devrait bien

110
00:09:11,600 --> 00:09:20,170
sûr également être un état. articles, mon erreur. Donc, avec cela, nous devons ajouter un nouvel élément de panier ici.

111
00:09:20,230 --> 00:09:24,790
Maintenant, si vous avez déjà un article dans le panier, alors bien sûr, nous ne créons pas un

112
00:09:24,790 --> 00:09:31,480
nouvel article dans le panier, nous voulons plutôt mettre à jour celui existant. Je vais donc avoir mon article de panier mis

113
00:09:31,480 --> 00:09:35,470
à jour ici et pour cela, je crée toujours un nouvel article

114
00:09:35,800 --> 00:09:46,960
de panier mais je vais le préremplir avec certaines données existantes, par exemple la quantité ici. Nous obtenons cela des articles d'État pour l'ID du produit ajouté, car cela devrait déjà faire partie des articles

115
00:09:46,960 --> 00:09:52,150
d'État, nous vérifions cela ici et cela aura une clé de quantité bien sûr parce qu'un tel

116
00:09:52,150 --> 00:09:57,730
article ici dans mes articles est juste de tapez les éléments du panier, donc il y aura une propriété

117
00:09:57,730 --> 00:09:58,480
de quantité

118
00:09:58,600 --> 00:10:02,020
et nous en ajouterons simplement un parce que nous ajoutons un

119
00:10:02,080 --> 00:10:09,560
nouvel élément de panier, nous devons donc l'incrémenter. Maintenant, l'article du panier comme deuxième argument prend le prix du produit. Ensuite, bien sûr, puisque nous allons construire l'application

120
00:10:09,570 --> 00:10:14,540
de telle sorte que le prix ne change jamais, ce qui ajouterait beaucoup de complexité ici,

121
00:10:14,550 --> 00:10:19,860
nous devions gérer le panier d'une manière totalement différente dans ce cas, nous devions stocker chaque article du

122
00:10:19,890 --> 00:10:25,350
panier en tant que liste des transactions pour cet article du panier qui est trop pour cela ici.

123
00:10:25,350 --> 00:10:30,760
Donc, comme cela ne change jamais, puisque le prix ne change jamais, nous pouvons à la fin simplement prendre

124
00:10:30,760 --> 00:10:36,930
le prix de production que nous obtenons ou prendre le prix existant que nous avons stocké auparavant, car cela ne changera jamais.

125
00:10:36,930 --> 00:10:42,150
Le titre peut changer et je veux stocker le titre le plus récent ici, donc je vais certainement

126
00:10:42,150 --> 00:10:46,620
prendre celui du produit que nous obtenons ici au lieu de mon ancien instantané et

127
00:10:46,710 --> 00:10:51,480
enfin et surtout, la dernière valeur ici, ma somme totale pour cet article du panier, c'est bien

128
00:10:51,480 --> 00:10:59,520
sûr la somme actuelle, donc j'accède aux articles d'état pour l'ID ici, la somme plus le prix du produit parce que nous ajoutons un nouvel article ici, nous

129
00:10:59,520 --> 00:11:06,660
devons ajouter le prix multiplié par 1 à la somme actuelle. C'est l'article du panier mis

130
00:11:06,660 --> 00:11:08,570
à jour.

131
00:11:08,580 --> 00:11:16,750
Maintenant, avec cela, nous pouvons retourner notre nouvelle tranche d'état ici en copiant les anciens états et en définissant des éléments égaux et maintenant

132
00:11:16,930 --> 00:11:26,460
importants, à un objet où nous copions l'état. articles, mais où nous définissons maintenant à nouveau ajoutéProduit. ID et oui, cela existe déjà mais avec cela

133
00:11:26,460 --> 00:11:33,310
nous le remplaçons simplement avec notre article de panier mis à jour, donc nous faisons la même mise à

134
00:11:33,310 --> 00:11:37,070
jour que nous faisons là-bas. Maintenant que ce n'est

135
00:11:37,100 --> 00:11:40,150
pas tout ce que nous devons faire, nous devons

136
00:11:40,250 --> 00:11:43,750
également modifier le montant total, car cela change bien sûr.

137
00:11:43,940 --> 00:11:52,420
Donc, lorsque nous ajoutons un article pour la première fois, le montant total doit être fondamentalement notre ancien montant total, alors indiquez le montant

138
00:11:52,430 --> 00:11:57,530
total plus le prix du produit et c'est la même chose si nous ajoutons

139
00:11:57,530 --> 00:12:04,910
un article à un panier existant ou lorsqu'il existe déjà dedans parce qu'au final, notre total est toujours juste l'ancien total

140
00:12:04,910 --> 00:12:10,130
plus le prix, parce que nous ajoutons toujours un article de ce produit, c'est

141
00:12:10,130 --> 00:12:12,190
ainsi que cette application fonctionnera.

142
00:12:12,200 --> 00:12:14,480
Donc, notre déclaration de mise à jour ici

143
00:12:14,480 --> 00:12:18,920
est presque la même, la seule chose qui diffère ici est la façon dont nous créons cet article

144
00:12:18,920 --> 00:12:24,110
de panier, donc nous pouvons bien sûr également réutiliser ce code, le déplacer hors du bloc if else et au

145
00:12:24,110 --> 00:12:27,590
lieu d'avoir deux constantes différentes ici , nous pouvons créer une variable avant

146
00:12:30,670 --> 00:12:33,150
d'entrer l'instruction if, mise à jour ou un nouvel

147
00:12:33,190 --> 00:12:36,990
élément de panier peut-être, cela pourrait être un nom parce que nous ne savons pas

148
00:12:37,090 --> 00:12:44,590
ce que ce sera à l'avance, puis ici dans la branche if ici, nous définissons mis à jour ou un nouvel article de panier à cet article de panier mis

149
00:12:44,590 --> 00:12:49,900
à jour, ici, d'autre part, nous le définissons sur ce nouvel article de panier et ici, nous utilisons toujours toujours l'article

150
00:12:49,930 --> 00:12:54,270
de panier mis à jour ou nouveau et avec cela, nous avons une certaine réutilisation de code

151
00:12:54,400 --> 00:13:00,610
ici et ne le faisons pas répéter ce qui est toujours bon. Autre remarque, la copie de l'état ici est bien

152
00:13:00,610 --> 00:13:04,420
sûr toujours redondante car vous définissez toujours les articles et le montant total.

153
00:13:04,420 --> 00:13:09,520
Donc, si vous n'avez toujours que ces deux champs ici et que vous changez toujours les deux, vous

154
00:13:09,520 --> 00:13:15,940
n'avez pas besoin de copier l'état existant, si vous introduisez un autre élément de données dans votre tranche d'état ici que vous ne

155
00:13:15,940 --> 00:13:20,680
modifiez pas ici cependant, vous devez copier votre ancien état afin de ne pas perdre ces données

156
00:13:20,680 --> 00:13:21,150
supplémentaires.

157
00:13:21,190 --> 00:13:26,470
Par conséquent, ici, je laisserai cette fonctionnalité de copie même si nous n'en avons pas besoin techniquement

158
00:13:26,470 --> 00:13:30,750
ici, mais si jamais nous devions changer notre état d'enregistrement et nous n'oublions pas

159
00:13:31,030 --> 00:13:34,310
de le copier et nous perdons donc des données.

160
00:13:34,330 --> 00:13:36,190
Eh bien, il y avait beaucoup de

161
00:13:36,190 --> 00:13:38,300
travail, avec lequel nous pouvons commencer à distribuer cette

162
00:13:38,320 --> 00:13:42,130
action et bien sûr, je veux la répartir à partir de l'aperçu du produit et des

163
00:13:42,190 --> 00:13:45,650
détails du produit car dans les deux écrans, j'ai ajouté des boutons au panier.

164
00:13:45,710 --> 00:13:50,890
Commençons donc sur l'écran de présentation des produits, là pour répartir les actions Redux,

165
00:13:50,890 --> 00:13:52,380
nous devons inclure

166
00:13:52,600 --> 00:14:00,880
le crochet de répartition d'utilisation ici, avec cela ici, nous pouvons simplement accéder à cette fonction de répartition en appelant use dispatch comme

167
00:14:00,880 --> 00:14:08,410
ceci et maintenant lorsque nous cliquons sur ajouter à panier là-bas, nous pouvons envoyer notre action ici et bien sûr

168
00:14:08,410 --> 00:14:13,330
au fait au lieu d'utiliser des fonctions en ligne ici, vous pouvez avoir

169
00:14:13,480 --> 00:14:15,930
des fonctions stockées dans des constantes

170
00:14:16,090 --> 00:14:24,700
distinctes à l'intérieur de votre composant fonctionnel ici, comme alternative, je m'en tiendrai aux fonctions en ligne pour maintenant et j'importerai toutes mes actions

171
00:14:24,790 --> 00:14:32,080
ici en tant qu'actions de panier depuis le dossier du magasin et là, le dossier d'actions, le fichier de panier.

172
00:14:32,080 --> 00:14:37,060
Maintenant, c'est une syntaxe d'importation qui fusionne toutes les exportations du fichier en un seul

173
00:14:37,060 --> 00:14:40,020
objet, nous n'avons qu'une seule exportation ici, donc vous

174
00:14:40,030 --> 00:14:42,610
pouvez également cibler cette exportation spécifique,

175
00:14:42,610 --> 00:14:46,630
plus tard nous aurons plusieurs exportations et donc j'utiliserai cette approche.

176
00:14:46,630 --> 00:14:49,750
Alors ici, nous expédions ensuite l'action du panier.

177
00:14:49,930 --> 00:14:55,400
ajouter au panier et c'est une fonction que nous devons exécuter, c'est notre fonction de créateur d'action

178
00:14:55,400 --> 00:14:57,050
et ceci comme argument prend

179
00:14:57,430 --> 00:15:05,270
notre produit, donc à la fin ici, nous devons passer dans itemData. article qui est juste notre produit ici dans l'écran de détail

180
00:15:05,270 --> 00:15:06,330
du produit.

181
00:15:06,410 --> 00:15:12,850
Par conséquent, nous faisons exactement la même chose, nous importons use dispatch de React Redux, donc ici nous

182
00:15:12,890 --> 00:15:17,560
pouvons accéder à la fonction de répartition en appelant use dispatch et ensuite

183
00:15:18,050 --> 00:15:23,990
pour ce bouton ici dans la fonction en ligne ou dans une fonction nommée distincte si vous

184
00:15:24,440 --> 00:15:26,330
le souhaitez , vous

185
00:15:26,360 --> 00:15:31,490
pouvez appeler dispatch, maintenant nous devons importer nos actions et j'utiliserai la même syntaxe

186
00:15:31,490 --> 00:15:42,190
qu'auparavant où j'importe tout en tant qu'actions de panier depuis le dossier du magasin, le dossier d'actions, le fichier de panier et maintenant les actions de panier, appelez ajouter à

187
00:15:42,190 --> 00:15:48,630
panier ici et transmettre le produit sélectionné qui est notre produit que nous voulons ajouter au panier ici.

188
00:15:48,820 --> 00:15:54,190
J'espère que cela envoie des actions telles que l'article est ajouté au panier, mais bien sûr, nous ne pouvons

189
00:15:54,190 --> 00:15:56,040
pas le confirmer pour le moment.

190
00:15:56,110 --> 00:16:04,390
Eh bien, en fait, nous le pouvons. Vous pouvez faire tourner le débogueur React Native et je ne l'ai

191
00:16:04,990 --> 00:16:12,010
pas utilisé auparavant, mais là, vous pouvez maintenant appuyer sur la commande ou contrôler t pour ouvrir un nouvel onglet,

192
00:16:15,030 --> 00:16:15,660
puis

193
00:16:19,500 --> 00:16:20,520
confirmer cette importation

194
00:16:23,560 --> 00:16:30,790
ici, puis aller dans vos applications et là-bas, ouvrir le menu de débogage sur iOS avec la commande D, sur Android

195
00:16:35,000 --> 00:16:43,990
avec le contrôle ou la commande M et cliquez sur debug remote Javascript. Maintenant, le mien est ouvert sur le port 19003, alors j'ai ouvert le

196
00:16:43,990 --> 00:16:45,290
débogueur React Native

197
00:16:45,300 --> 00:16:52,120
sur le mauvais port, sélectionnez-moi à nouveau, appuyez sur la commande T ou contrôlez T dans le débogueur et choisissez

198
00:16:52,120 --> 00:17:00,460
19003, utilisez le port ouvert pour vous dans Chrome, cliquez sur confirmer et maintenant, se connecte à votre application React en cours d'exécution ici dans

199
00:17:01,210 --> 00:17:05,550
le débogueur, assurez-vous de fermer votre débogueur Chrome, puis de recharger votre application,

200
00:17:05,590 --> 00:17:09,630
maintenant cela devrait se connecter ici et maintenant non seulement vous pouvez

201
00:17:09,640 --> 00:17:11,310
inspecter votre application ici comme

202
00:17:11,410 --> 00:17:11,940
je

203
00:17:11,980 --> 00:17:17,950
l'ai expliqué plus tôt, non, vous pouvez également jetez un œil à la partie là-haut et c'est votre

204
00:17:17,950 --> 00:17:22,200
débogueur Redux, là vous pouvez voir ce que Redux fait pour vous.

205
00:17:22,280 --> 00:17:28,620
La seule chose que vous devez faire pour que cela fonctionne est d'installer un nouveau

206
00:17:28,660 --> 00:17:34,160
package avec npm install --save dev car c'est une dépendance de développement dont

207
00:17:34,160 --> 00:17:40,520
nous n'avons besoin que pendant le développement et là, installez l'extension Redux dev tools, allez

208
00:17:40,650 --> 00:17:44,870
dans votre application . fichier js par la

209
00:17:47,350 --> 00:17:50,010
suite, puis importez à partir de

210
00:17:50,010 --> 00:17:56,280
cette extension des outils de développement Redux. Vous pouvez importer de la composition avec des outils de développement à partir de

211
00:17:56,300 --> 00:18:00,050
là et c'est une fonction que vous transmettez pour créer un magasin en tant que deuxième argument,

212
00:18:00,090 --> 00:18:03,260
vous pouvez simplement l'exécuter comme ceci. À propos, il s'agit du

213
00:18:03,260 --> 00:18:04,530
code, de cette importation

214
00:18:04,560 --> 00:18:10,020
et de cette utilisation que vous devez supprimer avant de déployer votre application, car il s'agit uniquement de quelque chose

215
00:18:10,020 --> 00:18:14,160
qui doit être exécuté pendant le développement, pas dans votre application de production, vous devez le

216
00:18:14,160 --> 00:18:20,580
supprimer avant de déployer votre application mais pendant le développement, c'est bien. Et avec cela ajouté, si vous enregistrez maintenant cela, vous

217
00:18:20,580 --> 00:18:26,940
verrez en fait qu'ici dans cet inspecteur Redux, vous voyez une action init envoyée, vous ne l'avez pas vu auparavant.

218
00:18:26,940 --> 00:18:30,560
C'est une action qui est automatiquement envoyée au démarrage de votre application.

219
00:18:30,570 --> 00:18:35,670
Si je clique maintenant sur le panier ici, vous verrez également l'action ajouter au panier

220
00:18:35,670 --> 00:18:41,990
et maintenant ici, vous pouvez voir les détails de cette action comme les données qui y étaient attachées

221
00:18:41,990 --> 00:18:48,120
et votre état ici et là vous voyez par exemple ceci l'état de mon produit et où

222
00:18:48,590 --> 00:18:50,380
se trouve mon panier?

223
00:18:50,670 --> 00:18:54,840
Eh bien, cela manque bien sûr, car pendant que nous avons le réducteur dans l'action configurée, dans l'application. fichier js, dans les

224
00:18:54,840 --> 00:18:58,660
réducteurs combinés, nous n'incluons pas l'état du panier.

225
00:18:58,740 --> 00:19:07,110
Alors là, importons le réducteur de chariot. / StoreReducers / cart et maintenant avec celui importé, nous pouvons l'ajouter à notre

226
00:19:07,440 --> 00:19:13,890
objet de réducteurs combinés et maintenant là, nous ajoutons une tranche de panier par exemple, pointez sur le réducteur de panier

227
00:19:13,890 --> 00:19:20,560
et donc maintenant cela est inclus dans notre magasin Redux. Avec cela, si vous attendez maintenant que cela se recharge et que

228
00:19:20,560 --> 00:19:25,830
vous cliquez à nouveau sur le panier, maintenant dans cette action Ajouter au panier, sous l'état, vous verrez que

229
00:19:25,830 --> 00:19:30,960
maintenant il y a une tranche de panier et maintenant vous voyez qu'il y a un montant total, vous

230
00:19:30,990 --> 00:19:35,700
voyez qu'il y a un article avec la clé P1 qui est notre produit avec une quantité

231
00:19:35,710 --> 00:19:43,900
de 1, ce prix, la somme de cela et si je clique maintenant sur le panier une deuxième fois ici, il y a une autre action expédiée et si

232
00:19:43,900 --> 00:19:48,790
nous avons un regardez l'état après cette action, nous voyons maintenant, refroidissez seulement un article mais maintenant

233
00:19:48,790 --> 00:19:52,620
avec la quantité deux, le prix du produit par article est ceci mais

234
00:19:52,630 --> 00:19:54,030
la somme est ceci.

235
00:19:54,190 --> 00:19:55,120
Ceci est

236
00:19:55,120 --> 00:19:57,760
la chemise, si j'expédie maintenant le tapis bleu aussi, nous

237
00:19:57,760 --> 00:20:02,590
devons ajouter au panier une fois de plus et là en l'état, nous voyons maintenant en effet

238
00:20:02,590 --> 00:20:04,190
qu'il y a deux articles là-dedans,

239
00:20:04,270 --> 00:20:09,930
P1 et P2, P1 est inchangé mais P2 a maintenant été ajouté et le montant total me semble également bon.

240
00:20:09,940 --> 00:20:16,150
Cela semble donc fonctionner et c'est ainsi que vous pouvez examiner votre état Redux pendant que votre application est en cours d'exécution sans

241
00:20:16,240 --> 00:20:17,140
le produire ici.

242
00:20:17,140 --> 00:20:21,610
Maintenant, bien sûr, nous voulons également le produire visuellement, mais c'est une belle façon de regarder

243
00:20:21,610 --> 00:20:25,120
votre état dans les coulisses à l'aide du débogueur React Native.

244
00:20:25,120 --> 00:20:30,010
Maintenant, nous allons le fermer ici car cela ralentit un peu l'application et donc ici

245
00:20:30,010 --> 00:20:35,230
dans le menu de débogage, je vais également arrêter mon débogage à distance et fermer complètement l'inspecteur ici.

246
00:20:35,260 --> 00:20:40,660
De retour également dans l'application. fichier js, je vais me débarrasser de la composition avec des

247
00:20:40,660 --> 00:20:42,000
outils de développement ici pour

248
00:20:42,070 --> 00:20:47,020
que je ne l'oublie pas plus tard, mais vous pouvez toujours l'ajouter ici ou le laisser ici pendant que vous développez

249
00:20:47,020 --> 00:20:48,380
afin de pouvoir consulter votre magasin.

250
00:20:48,460 --> 00:20:51,010
Le principal point à retenir pour nous ici est

251
00:20:51,010 --> 00:20:57,280
que cela semble fonctionner et avec cela, bien sûr, nous pouvons maintenant travailler sur l'ajout d'un bouton d'action ici à l'en-tête et nous assurer

252
00:20:57,280 --> 00:21:03,430
que nous pouvons aller à la page du panier à partir de cela ou avec l'aide de cela. bouton d'action afin que sur la

253
00:21:03,430 --> 00:21:06,220
page du panier, nous puissions sortir nos informations de panier.