1
00:00:02,370 --> 00:00:07,800
Maintenant que nous sommes vraiment près de la fin de ce module, nous devons nous assurer que nous envoyons maintenant

2
00:00:07,800 --> 00:00:11,370
des actions pour créer un nouveau produit ou pour mettre à jour

3
00:00:11,410 --> 00:00:16,080
un produit et donc tout d'abord nous devons ajouter ces actions ici dans notre dossier d'actions .

4
00:00:16,210 --> 00:00:28,830
Je vais donc exporter une constante ici, créer un produit comme celui-ci ici, créer un produit et puis ici aussi, un autre identifiant pour la mise à jour dans

5
00:00:28,860 --> 00:00:38,500
le produit avec la mise à jour du produit et la mise à jour du produit comme celui-ci et créer des créateurs

6
00:00:38,500 --> 00:00:47,670
d'action adaptés ou créer un produit et maintenant c'est à vous comment vous voulez structurer cela, quelles données vous attendez

7
00:00:47,670 --> 00:00:50,270
lorsque vous créez un produit.

8
00:00:50,340 --> 00:00:56,370
Je suis un fan de la création du produit vraiment ici dans l'action ou

9
00:00:56,490 --> 00:01:04,590
dans le réducteur, donc je m'attends vraiment à obtenir un titre ici, une description, une imageUrl et un prix disons,

10
00:01:04,590 --> 00:01:14,070
puis je retourne un objet d'action où le type est créer un produit et les données du produit sont tout simplement toutes ces

11
00:01:14,070 --> 00:01:15,220
données fusionnées.

12
00:01:15,450 --> 00:01:22,710
Donc, ici, j'ai mon titre qui est mappé sur le titre que nous obtenons comme argument, la description mappée sur la description et

13
00:01:23,340 --> 00:01:28,230
donc nous pouvons également utiliser un raccourci Javascript moderne où si le nom de la

14
00:01:28,230 --> 00:01:31,490
propriété et le nom de la variable de valeur sont

15
00:01:31,530 --> 00:01:36,810
les mêmes, vous pouvez simplement écrire c'est comme ça, donc si c'est la même chose que

16
00:01:36,810 --> 00:01:38,610
price: price, nous pouvons simplement

17
00:01:38,610 --> 00:01:45,880
l'écrire ici, bien sûr, c'est aussi possible pour le titre et la description afin que nous mappions tous ces arguments en propriétés du

18
00:01:45,880 --> 00:01:54,460
même nom dans cet objet et si nous mettons à jour un produit qui est relativement égal, mettre à jour le produit, donc nous pouvons généralement le

19
00:01:54,460 --> 00:01:59,920
copier mais il y a une différence importante. Ici, nous avons également besoin de l'ID du produit qui doit changer, nous obtenons

20
00:01:59,920 --> 00:02:08,370
donc cela comme un argument supplémentaire et nous pouvons le stocker dans notre action donc dans une propriété distincte de notre objet action. Maintenant, dans le réducteur, nous devons bien

21
00:02:08,370 --> 00:02:09,510
sûr

22
00:02:09,510 --> 00:02:10,920
gérer cela, nous

23
00:02:10,920 --> 00:02:20,900
devons gérer la création et la mise à jour. Ajoutons donc un nouveau cas ici dans le réducteur de produits pour créer un

24
00:02:20,930 --> 00:02:28,940
produit et pour cela, assurez-vous d'importer créer un produit à partir de produits d'actions et bien sûr un pour mettre à jour un

25
00:02:28,940 --> 00:02:33,740
produit avec le produit de mise à jour, assurez-vous d'importer cela également.

26
00:02:35,970 --> 00:02:42,300
Dans créer un produit, bien sûr, nous devons créer un nouveau produit et je le stockerai ici dans une constante avec le

27
00:02:42,300 --> 00:02:45,230
nouveau mot-clé dans le modèle de produit que nous avons

28
00:02:45,230 --> 00:02:51,780
créé plus tôt, pour cela vous devez simplement vous assurer que vous importez ce modèle de produit ici à partir de le dossier

29
00:02:51,780 --> 00:02:58,260
des modèles et ce produit ici reçoivent un ID qui pour l'instant peut générer manuellement avec une nouvelle date à chaîne pour avoir

30
00:02:58,260 --> 00:03:04,350
une sorte d'ID factice pseudo unique pour le moment plus tard, cela sera généré sur un serveur mais nous ne l'avons

31
00:03:04,350 --> 00:03:05,600
pas encore .

32
00:03:05,970 --> 00:03:11,580
L'identifiant du propriétaire pour le moment est codé en dur pour U1 car nous n'avons pas d'utilisateurs dans cette application pour

33
00:03:11,580 --> 00:03:17,910
le moment, mais le titre et ainsi de suite peuvent être remplis avec les données de l'action car dans l'action pour créer un produit,

34
00:03:17,940 --> 00:03:22,040
nous avons la clé de données du produit et qui contient un objet avec titre, description,

35
00:03:22,050 --> 00:03:24,010
imageUrl et prix et ce sont des

36
00:03:24,010 --> 00:03:25,800
données que nous pouvons maintenant récupérer.

37
00:03:25,980 --> 00:03:36,000
Donc ici pour le titre, nous obtenons une action productData. title, pour l'imageUrl, c'est l'action. données du

38
00:03:36,360 --> 00:03:43,800
produit. imageUrl, sans surprise pour la description, c'est l'action. données du produit. description et pour

39
00:03:44,380 --> 00:03:52,780
le prix, c'est l'action. données du produit. prix. C'est maintenant un nouveau produit que je crée.

40
00:03:53,070 --> 00:03:58,890
Maintenant, nous devons l'ajouter à notre magasin en renvoyant notre état mis à jour ici, où je copie d'abord l'état

41
00:03:58,890 --> 00:04:03,840
existant et maintenant je dois l'ajouter aux produits disponibles et aux produits utilisateur parce que nous l'avons

42
00:04:03,840 --> 00:04:09,690
créé, il appartient donc certainement pour nous, il doit donc faire partie à la fois des tableaux et des produits

43
00:04:09,690 --> 00:04:15,480
disponibles, bien là, nous pouvons prendre ces produits disponibles que nous avons obtenus et utiliser concat pour obtenir un nouveau

44
00:04:15,480 --> 00:04:21,990
tableau qui est l'ancien tableau plus ajouter un nouvel élément et ici, le nouveau produit est ce nouvel élément et je fais

45
00:04:21,990 --> 00:04:25,040
exactement la même chose ici pour les produits utilisateur.

46
00:04:25,110 --> 00:04:34,220
Alors là, j'utilise des produits utilisateurs d'État et je concatte mon nouveau produit. Qu'en est-il maintenant de la mise à jour? Pour la mise à jour, nous devons

47
00:04:34,220 --> 00:04:37,430
d'abord trouver l'index du produit actuel, donc l'index

48
00:04:37,430 --> 00:04:46,580
du produit pourrait être un nom constant peut être trouvé en accédant à nos produits utilisateur et là avec l'index de recherche qui

49
00:04:46,580 --> 00:04:51,570
est une méthode Javascript intégrée, nous pouvons trouver l'indice d'un certain élément.

50
00:04:51,590 --> 00:04:57,440
Encore une fois, cela prend une fonction qui s'exécute sur chaque élément de ce tableau et qui doit retourner true pour que

51
00:04:57,440 --> 00:05:02,930
nous ayons un index et là, je vais regarder les ID et chercher les ID où il est égal à

52
00:05:02,930 --> 00:05:05,330
mon pid, mon action pid parce que si

53
00:05:05,330 --> 00:05:11,520
vous vous souvenez de la façon dont nous avons configuré cette action, pour la mise à jour, nous avons ici le champ pid

54
00:05:11,520 --> 00:05:13,980
qui contient les ID de produit que nous obtenons.

55
00:05:13,980 --> 00:05:19,470
Je recherche donc ce produit, puis je stocke l'index de ce produit dans le tableau des produits

56
00:05:19,620 --> 00:05:21,890
utilisateur dans l'index des produits ici, maintenant

57
00:05:21,900 --> 00:05:27,720
nous pouvons créer un produit mis à jour ici qui est techniquement un nouvel objet produit mais bien

58
00:05:27,720 --> 00:05:29,570
sûr prérempli avec des anciens données,

59
00:05:29,670 --> 00:05:31,200
par exemple, nous conservons

60
00:05:31,230 --> 00:05:34,320
l'ID, nous prenons donc une action pid comme valeur ici.

61
00:05:34,320 --> 00:05:40,080
Je garde également l'ID du propriétaire et pour cela, je peux accéder aux produits utilisateur d'État pour l'index que nous

62
00:05:40,080 --> 00:05:46,070
venons de découvrir, donc pour cet index de produit ,. ownerID, je ne changerai pas cela.

63
00:05:46,290 --> 00:05:48,800
Bien sûr, je vais stocker le

64
00:05:48,900 --> 00:05:59,430
nouveau titre, donc ici je vais stocker l'action. données du produit. titre, je vais stocker la nouvelle imageUrl, donc action. données du

65
00:05:59,430 --> 00:06:03,180
produit. imageUrl et moi allons

66
00:06:03,180 --> 00:06:11,190
stocker une nouvelle description, donc action. données du produit. la description. Cependant, j'ai mentionné que le prix ne devrait pas être

67
00:06:11,520 --> 00:06:24,750
modifiable, donc en tant que valeur pour cela, je garderai le prix d'origine, donc indiquez l'index des produits des produits utilisateur. prix ici.

68
00:06:24,840 --> 00:06:30,150
Au fait, cela signifie également que notre action n'est pas entièrement correcte, là aussi j'attends un prix, je ne devrais pas le faire parce que nous ne pouvons pas le

69
00:06:30,150 --> 00:06:36,060
saisir de toute façon dans nos entrées, nous n'en avons pas besoin donc nous ne devrions pas attendez-vous ici, nous ne devrions pas le transmettre dans le cadre des données de produit pour

70
00:06:36,390 --> 00:06:41,090
la mise à jour du produit, pour un nouveau produit, nous en avons besoin, mais pour la mise à jour, nous ne le faisons pas.

71
00:06:41,500 --> 00:06:46,600
Donc, avec cela, nous avons notre produit mis à jour avec de nouvelles données et d'anciennes données,

72
00:06:46,600 --> 00:06:55,090
maintenant nous devons mettre à jour notre état bien sûr et pour cela, nous avons les produits utilisateur mis à jour où à la fin je copie mes produits

73
00:06:55,210 --> 00:07:01,960
utilisateur existants avec cette syntaxe ici pour créer une copie, puis j'ai défini des produits utilisateur mis à jour pour l'index de produit

74
00:07:01,960 --> 00:07:09,460
sélectionné égal au produit mis à jour, donc je remplace le produit de cet index par le nouveau produit mis à jour dans ma copie,

75
00:07:09,460 --> 00:07:15,790
non pas dans la matrice d'origine mais dans ma copie. Je dois faire la même chose dans les

76
00:07:15,790 --> 00:07:20,770
produits disponibles mais là, je dois d'abord trouver l'index car cet index ne fonctionne ici

77
00:07:20,770 --> 00:07:25,230
que pour les produits utilisateur, l'index dans les produits disponibles est très probablement

78
00:07:25,750 --> 00:07:32,200
différent, donc j'ai mon disponible index des produits ici si vous voulez l'appeler comme ça, qui a généralement la

79
00:07:32,200 --> 00:07:37,330
même logique de sélection, donc nous pouvons copier cela mais bien sûr je vais regarder dans

80
00:07:37,420 --> 00:07:45,660
le tableau des produits disponibles au lieu du tableau des produits utilisateur. Et maintenant, encore une fois, ici, nous pouvons avoir les produits

81
00:07:45,660 --> 00:07:53,280
disponibles mis à jour où je copie mes produits disponibles d'état, puis je définis les produits disponibles mis à jour

82
00:07:53,340 --> 00:08:02,110
pour l'indice de produit donné égal, excusez-moi pour l'indice de produit disponible bien sûr égal au produit mis à jour, de sorte que

83
00:08:02,410 --> 00:08:07,810
Je remplace mon produit existant par le produit mis à jour dans les produits

84
00:08:07,810 --> 00:08:15,030
disponibles et dans la gamme de produits utilisateur. Eh bien et maintenant, nous avons juste besoin de retourner

85
00:08:15,030 --> 00:08:23,490
notre nouvel état, tout d'abord copier l'existant et maintenant définir les produits disponibles égaux aux produits disponibles mis à jour et définir les produits utilisateur égaux aux

86
00:08:23,490 --> 00:08:32,790
produits utilisateur mis à jour, donc à mes tableaux mis à jour je configure Là. Avec cela, nous espérons avoir toute la logique dont nous avons besoin, maintenant répartissons

87
00:08:32,790 --> 00:08:38,880
ces événements depuis l'intérieur de l'écran du produit ajouté. Donc, ici, nous devons importer use

88
00:08:38,880 --> 00:08:46,440
dispatch de React Redux et importer nos actions, alors importez tout en tant qu'actions de produits

89
00:08:46,530 --> 00:08:54,910
du dossier magasin, là du dossier actions et là du fichier produits, puis envoyez ces choses dans le

90
00:08:55,360 --> 00:09:01,060
gestionnaire de soumission bien sûr. Ici, ce que nous envoyons dépend de si nous

91
00:09:01,150 --> 00:09:02,540
éditons ou ajoutons amd

92
00:09:02,650 --> 00:09:08,110
comme je l'ai mentionné, nous pouvons découvrir ce qui est le cas avec l'aide du produit édité, s'il est

93
00:09:08,110 --> 00:09:11,100
défini, nous éditons, s'il n'est pas défini, nous sommes ajouter.

94
00:09:11,100 --> 00:09:18,370
Donc ici, dans le gestionnaire de soumission, nous pouvons ajouter une vérification if et vérifier si le produit modifié, si cela est

95
00:09:18,460 --> 00:09:19,170
défini,

96
00:09:19,300 --> 00:09:25,660
nous modifions, alors je veux envoyer mon événement de mise à jour du produit, pour cela, tout d'abord, je

97
00:09:25,660 --> 00:09:33,650
besoin de créer cette fonction de répartition à l'aide de l'utilisation de la répartition et maintenant avec celle créée, là-bas, nous pouvons appeler le produit

98
00:09:34,310 --> 00:09:39,410
de mise à jour des actions de répartition des produits parce que c'est ce que

99
00:09:40,570 --> 00:09:42,700
nous faisons ici et maintenant transmettre

100
00:09:42,700 --> 00:09:44,980
toutes les données dont nous avons besoin

101
00:09:45,130 --> 00:09:49,060
ici, qui est mon ID de prod. , c'est l'ID du produit

102
00:09:51,850 --> 00:09:59,020
que nous éditons, nous l'extrayons ici et bien sûr en plus, transférez également le titre, transmettez la description, toutes ces constantes d'état

103
00:09:59,050 --> 00:10:07,630
que nous avons ici, notre imageUrl et non le prix parce que nous pas besoin de cela et dans le cas contraire ici, cela signifie que

104
00:10:07,630 --> 00:10:09,060
nous ajoutons, alors je

105
00:10:09,130 --> 00:10:13,560
veux envoyer une action sur les produits. créer un produit, ici

106
00:10:13,660 --> 00:10:21,850
nous transmettons le titre, la description, imageUrl et aussi le prix et avec cela, nous devrions avoir une

107
00:10:21,900 --> 00:10:26,580
configuration où nous espérons pouvoir ajouter et modifier des produits.

108
00:10:26,640 --> 00:10:28,040
Sauvegardons donc

109
00:10:28,050 --> 00:10:36,060
ceci et jetons un coup d'œil. Si nous allons maintenant dans la zone d'administration ici et que j'ai ajouté cela et

110
00:10:36,120 --> 00:10:43,460
que j'ajoute un point d'exclamation ici et aussi ici dans la description et que je clique sur Enregistrer, je reçois indéfini n'est pas un objet, évaluant

111
00:10:43,460 --> 00:10:45,440
le prix des accessoires à fixe.

112
00:10:45,530 --> 00:10:49,540
Il semble donc que j'ai perdu mon prix ici en essayant de mettre à jour cela.

113
00:10:49,850 --> 00:10:54,140
Bon, avant de résoudre ce problème, voyons si l'ajout d'un nouveau produit fonctionne.

114
00:10:54,260 --> 00:11:00,890
Si j'ajoute ici un produit avec test, test qui n'est bien sûr pas une imageUrl valide, donc nous

115
00:11:00,890 --> 00:11:06,750
ne verrons pas d'image mais au moins nous sirotons quelque chose, c'est aussi un test.

116
00:11:06,830 --> 00:11:10,250
Si nous essayons cela et que je clique sur soumettre, cela ne

117
00:11:10,250 --> 00:11:13,220
fonctionne pas non plus, donc en quelque sorte, économiser

118
00:11:13,220 --> 00:11:19,700
le prix ne fonctionne pas et je pense que le problème est là bien sûr, le problème ici est que le prix est

119
00:11:19,700 --> 00:11:24,890
en fait une chaîne ici mais devrait être un nombre, afin que nous puissions facilement le convertir en

120
00:11:24,890 --> 00:11:33,580
un nombre en ajoutant un plus ici avant de le passer pour créer un produit, pour la mise à jour d'autre part, si nous jetons un œil à notre réducteur de

121
00:11:33,580 --> 00:11:36,790
produits, il devrait normalement garder le prix qu'il avait déjà .

122
00:11:36,850 --> 00:11:42,870
Voyons donc si ce plus le corrige pour l'ajout ou s'il y a aussi un problème différent, c'était un changement qui est requis de

123
00:11:42,880 --> 00:11:48,060
toute façon mais voyons s'il y a un autre problème. Alors test, test, douze s'il vous

124
00:11:48,060 --> 00:11:54,330
plaît entrez seulement des nombres ici, pas du texte que vous pourriez actuellement mais qui le casserait,

125
00:11:54,330 --> 00:12:02,950
testez cela, appuyez sur ce bouton, oui cela ne semble pas trop mal, nous avons eu un problème avec l'image ici mais si

126
00:12:02,950 --> 00:12:09,920
nous faisons défiler vers le bas, en fait ici si nous rejetons cela, nous pouvons voir ici notre produit,

127
00:12:09,920 --> 00:12:14,030
donc le prix est manquant, donc quelque chose ne va pas

128
00:12:14,040 --> 00:12:18,290
là-bas et nous ne semblons pas non plus enregistrer correctement l'image,

129
00:12:18,390 --> 00:12:22,380
non seulement parce qu'elle n'est pas affichée mais à cause

130
00:12:22,380 --> 00:12:25,400
de cet avertissement que nous avons reçu, mais

131
00:12:25,740 --> 00:12:27,570
en général, cela fonctionne.

132
00:12:27,570 --> 00:12:31,650
Cependant, par exemple ici, si j'essaie de mettre à jour et d'enregistrer cela, nous obtenons toujours une erreur, il y a

133
00:12:31,650 --> 00:12:33,320
donc toujours quelque chose qui ne va pas.

134
00:12:33,360 --> 00:12:39,270
Donc, une chose qui ne va pas est dans les actions bien sûr, pour mettre à jour le produit ici, le type devrait être mettre à

135
00:12:39,270 --> 00:12:41,100
jour le produit et non pas créer

136
00:12:41,100 --> 00:12:45,710
le produit, sinon nous déclenchons la mauvaise action dans le réducteur, ce qui explique l'erreur de prix que nous avons obtenue.

137
00:12:45,720 --> 00:12:50,190
Il faut donc mettre à jour le produit ici pour mettre à jour un produit sans surprise.

138
00:12:50,400 --> 00:12:57,060
C'est donc un problème, mais un autre gros problème peut être trouvé dans l'écran du produit ajouté. J'utilise ma méthode de rappel ici pour envelopper le

139
00:12:57,060 --> 00:13:00,580
gestionnaire de soumission à droite et je le fais pour

140
00:13:00,660 --> 00:13:03,480
éviter les recréations inutiles des fonctions.

141
00:13:03,480 --> 00:13:08,730
Le problème est que j'ai initialement défini cela pour avoir un tableau vide en tant que liste de dépendances, ce qui signifie

142
00:13:08,730 --> 00:13:12,740
que cela n'est jamais recréé, ce qui était logique lorsque nous n'avions que la connexion à la

143
00:13:13,230 --> 00:13:17,100
console, mais maintenant nous faisons des choses là-dedans et maintenant nous avons effectivement des dépendances.

144
00:13:17,100 --> 00:13:22,710
À l'heure actuelle, je ne recrée jamais cette fonction, ce qui signifie qu'elle n'est jamais recréée pour ses valeurs mises à jour.

145
00:13:22,710 --> 00:13:28,180
Ainsi, lorsque nous soumettons notre formulaire, nous ne prenons jamais en compte ce que l'utilisateur a entré.

146
00:13:28,200 --> 00:13:30,930
Donc, en fait, nous devons

147
00:13:31,020 --> 00:13:40,590
maintenant spécifier les dépendances ici, la fonction de répartition, mais plus important encore, l'ID de prod, le titre, la

148
00:13:40,680 --> 00:13:49,380
description et l'imageUrl et aussi bien sûr le prix. Maintenant, avec cela, si nous sauvegardons cela, tout ira bien et tous

149
00:13:49,380 --> 00:13:50,880
les problèmes devraient disparaître.

150
00:13:50,880 --> 00:13:52,220
Attendons donc que cela

151
00:13:52,290 --> 00:13:59,510
se recharge, allez à l'administrateur maintenant et commencez à éditer cela peut-être et maintenant si nous ajoutons un point d'exclamation dans le titre et dans

152
00:13:59,510 --> 00:14:05,660
la description et nous l'enregistrons et revenons, nous le voyons ici et si nous allons aux produits , nous le voyons

153
00:14:05,720 --> 00:14:09,090
également ici et dans les détails, nous voyons également ce point d'exclamation.

154
00:14:09,170 --> 00:14:12,910
Maintenant, si nous revenons à l'administrateur et

155
00:14:13,080 --> 00:14:15,200
créons un nouveau

156
00:14:15,390 --> 00:14:21,790
produit, testons, testons, douze, testons cela et je l'enregistre et je reviens,

157
00:14:21,890 --> 00:14:26,780
maintenant cela apparaît également là-bas. Bien sûr, l'image ne s'affiche pas

158
00:14:26,810 --> 00:14:31,480
parce que nous n'avons pas entré d'URL valide, mais toutes les autres données

159
00:14:31,550 --> 00:14:35,410
s'affichent, donc cela fonctionne généralement et bien sûr, vous pouvez

160
00:14:35,410 --> 00:14:44,450
entrer une imageUrl valide et cela casserait également, testons rapidement cela ainsi que. Revenons donc à la section admin et ajoutons une étagère ici peut-être,

161
00:14:44,470 --> 00:14:53,970
pour cela j'ai sélectionné l'URL d'une étagère que j'ai trouvée sur internet pour 199. 99, c'est une belle étagère

162
00:14:53,970 --> 00:15:00,870
comme ça. Si nous enregistrons maintenant cela et que nous revenons en arrière, cela semble bon,

163
00:15:00,870 --> 00:15:05,260
voici notre image et nous le voyons également ici sur l'écran du produit et nous pouvons le voir ici également.

164
00:15:05,730 --> 00:15:07,070
Cela semble donc

165
00:15:07,080 --> 00:15:11,610
fonctionner et avec cela, nous avons généralement une configuration qui fonctionne.

166
00:15:11,610 --> 00:15:16,410
Maintenant, il y a des choses mineures sur lesquelles je veux travailler, par exemple avant de supprimer, ce

167
00:15:16,410 --> 00:15:23,310
serait bien d'avoir une petite boîte de dialogue de confirmation et en plus, je veux m'assurer que lorsque nous avons ajouté ou modifié un produit, lorsque

168
00:15:23,400 --> 00:15:26,140
nous avons cliqué sur Enregistrer ici, nous remontons automatiquement.

169
00:15:26,130 --> 00:15:31,590
Ce ne sont donc que des choses mineures bien sûr, mais je pense qu'elles font une belle finale ici dans ce module.