1
00:00:02,320 --> 00:00:09,040
Donc, maintenant que le composant d'élément de produit est réorganisé, il est temps de pouvoir dire, disons, de supprimer les

2
00:00:09,040 --> 00:00:14,120
éléments, car c'est en fait l'une des choses les plus simples que nous pouvons faire.

3
00:00:14,170 --> 00:00:19,600
Cela nous ramène à Redux et là, il est maintenant temps de travailler sur les produits et je

4
00:00:19,600 --> 00:00:21,120
vais commencer par les

5
00:00:21,160 --> 00:00:26,450
actions qui sont actuellement un fichier vide, les produits. Fichier js dans le dossier actions où

6
00:00:26,560 --> 00:00:35,350
je souhaite exporter une action qui nous aide à supprimer des produits. L'identifiant est donc simplement nommé supprimer le produit et il contient

7
00:00:35,350 --> 00:00:46,900
un texte de suppression du produit ici et j'exporterai également un créateur d'action supprimer le produit qui prend l'ID du produit, comme celui-ci et qui renvoie ensuite un objet

8
00:00:46,900 --> 00:00:53,430
d'action dont le type est supprimer le produit et le pid, l'ID de produit est simplement

9
00:00:53,440 --> 00:00:55,990
l'ID de produit transféré, comme ceci.

10
00:00:59,620 --> 00:01:07,990
Maintenant, dans le réducteur, dans le fichier de réduction des produits, nous pouvons écouter cela car

11
00:01:08,560 --> 00:01:17,110
actuellement, nous ne nous soucions d'aucune action. Maintenant, nous pouvons activer le type d'action ici et gérer le cas où il s'agit de supprimer le produit que

12
00:01:17,230 --> 00:01:23,900
nous obtenons de notre fichier d'action de produits et vous devez donc ajouter cette importation. Si la suppression de produit est le cas, nous devons

13
00:01:23,900 --> 00:01:29,840
supprimer le produit de notre gamme de produits utilisateur et bien sûr également de la gamme de produits disponibles,

14
00:01:29,840 --> 00:01:34,490
car il est supprimé en général, non seulement dans nos produits utilisateur, mais dans

15
00:01:34,490 --> 00:01:35,290
toute l'application.

16
00:01:37,990 --> 00:01:39,190
Par conséquent,

17
00:01:39,190 --> 00:01:48,100
ici, je vais retourner un nouvel objet où nous copions l'état existant pour être sûr de ne perdre aucun état et maintenant les produits

18
00:01:48,100 --> 00:01:51,630
utilisateur sont simplement des états. userProducts, donc les anciens

19
00:01:51,640 --> 00:01:57,070
produits utilisateur sur lesquels nous pouvons filtrer, c'est une méthode Javascript intégrée qui renvoie un

20
00:01:57,070 --> 00:02:04,640
nouveau tableau, un nouveau tableau qui est essentiellement créé en exécutant une fonction sur chaque élément de l'ancien tableau et si cette

21
00:02:04,660 --> 00:02:09,930
fonction retourne vrai , nous gardons cet article, s'il retourne faux, nous le laissons tomber.

22
00:02:10,000 --> 00:02:15,490
Donc, cela exécute une fonction où nous obtenons le produit, cette fonction est exécutée pour nous

23
00:02:15,490 --> 00:02:20,720
par Javascript pour ainsi dire et elle passe dans l'élément qu'elle examine actuellement cette fonction.

24
00:02:20,800 --> 00:02:29,110
Nous obtenons donc le produit pour chaque produit dans notre gamme de produits utilisateur et nous voulons renvoyer l'ID du produit, contrairement à l'action

25
00:02:29,650 --> 00:02:33,390
pid qui est l'ID du produit que nous voulons supprimer.

26
00:02:33,400 --> 00:02:39,530
Cela signifie que, fondamentalement, il conservera tous les produits dont les ID ne correspondent pas, s'ils correspondent, nous savons que c'est le

27
00:02:39,550 --> 00:02:41,890
produit dont nous voulons nous débarrasser et donc nous

28
00:02:41,890 --> 00:02:43,240
renvoyons false, ce qui

29
00:02:43,240 --> 00:02:46,340
signifie que dans le nouveau tableau, il ne sera pas inclus.

30
00:02:46,370 --> 00:02:50,890
Maintenant, c'est essentiellement la même logique pour les produits disponibles, il nous

31
00:02:50,900 --> 00:02:55,530
suffit de parcourir tous les produits disponibles et de filtrer le produit là-bas.

32
00:02:55,550 --> 00:03:01,090
Il s'agit d'un changement que nous devons apporter, un autre changement doit être effectué dans le panier, mais

33
00:03:01,090 --> 00:03:06,400
parce que lorsque nous supprimons un produit, il doit également être supprimé du panier, car sinon nous

34
00:03:06,400 --> 00:03:09,690
avons un produit dans le panier qui n'existe plus .

35
00:03:09,820 --> 00:03:17,410
Donc, ici, j'ajouterai également un cas pour supprimer le produit et vous devez donc importer le produit de suppression des produits d'actions dans

36
00:03:17,410 --> 00:03:18,810
le panier. js

37
00:03:18,820 --> 00:03:20,290
reducer ainsi et ici, nous

38
00:03:23,060 --> 00:03:27,830
devons nous assurer que nous retirons le produit du panier s'il a été supprimé.

39
00:03:29,670 --> 00:03:36,150
Donc ici dans le panier, bien sûr, nous obtenons notre ID de produit du produit que nous

40
00:03:36,300 --> 00:03:47,940
voulons supprimer, c'est ce pid dans cette action qui est expédié, donc ici nous retournons un nouvel état où nous voulons mettre à jour notre panier et le montant total

41
00:03:47,950 --> 00:03:53,680
de sorte que le produit a disparu et qu'il a disparu, je veux dire totalement

42
00:03:53,680 --> 00:04:01,920
effacé du panier, non seulement réduit d'un, mais totalement effacé. Donc, les éléments sont ici à la fin une copie

43
00:04:01,920 --> 00:04:02,760
des

44
00:04:02,760 --> 00:04:12,610
éléments existants sans ce produit, donc je vais créer une nouvelle constante, des éléments mis à jour où je copie mes éléments d'état existants

45
00:04:12,610 --> 00:04:13,910
ici, comme ceci,

46
00:04:15,010 --> 00:04:22,820
puis je supprime les éléments mis à jour pour l'action pid, donc je supprime cet article du panier.

47
00:04:22,820 --> 00:04:29,600
Bien sûr, cela n'a de sens que si cet article existe dans le panier, donc je vais d'abord vérifier si les éléments d'état pour l'action

48
00:04:29,750 --> 00:04:33,940
pid, si cela renvoie quelque chose de significatif et si ce n'est pas le

49
00:04:34,220 --> 00:04:40,310
cas, alors je vais simplement retourner l'état existant parce que alors j'en ai fini avec ce cas, je n'ai pas besoin de

50
00:04:40,310 --> 00:04:44,750
changer quoi que ce soit dans l'état, donc je vais juste retourner l'état existant sans changements.

51
00:04:45,230 --> 00:04:46,840
Si je passe ce test,

52
00:04:46,850 --> 00:04:52,330
je sais que le produit avec l'ID que nous sommes sur le point de supprimer fait partie de l'article.

53
00:04:52,340 --> 00:05:00,790
Alors je continue de copier mes articles, puis je supprime le produit à partir de là, mais avant de

54
00:05:00,790 --> 00:05:11,970
le faire, obtenir le total de l'article en accédant aux articles d'état pour l'action pid, puis là, bien sûr, nous l'avons, si nous jetons un

55
00:05:11,970 --> 00:05:20,150
œil au panier modèle d'élément, je veux dire, nous avons ce champ de somme ici, donc à la

56
00:05:20,150 --> 00:05:27,300
fin ici, je dois supprimer la somme. Je suis intéressé par la somme parce que maintenant je peux mettre à

57
00:05:27,300 --> 00:05:34,440
jour mes articles là-bas avec les articles mis à jour où je les ai supprimés avec le mot-clé supprimer et le montant total du panier est le montant

58
00:05:34,620 --> 00:05:44,540
total de l'état moins le total de l'article, donc le total de ce panier élément que nous avions ajouté auparavant. Alors maintenant, nous mettons également à jour le panier de

59
00:05:44,540 --> 00:05:45,760
manière appropriée

60
00:05:45,860 --> 00:05:50,600
lorsque nous le supprimons. Maintenant, nous avons juste besoin d'envoyer cette

61
00:05:50,660 --> 00:05:52,960
suppression, donc de retour dans

62
00:05:52,990 --> 00:06:00,170
les produits utilisateur, ici dans la suppression, nous voulons envoyer. Donc, à partir de React Redux, nous pouvons importer

63
00:06:00,170 --> 00:06:04,140
use dispatch pour accéder à la fonction de répartition ici

64
00:06:04,490 --> 00:06:12,290
en appelant use dispatch comme nous l'avons fait plusieurs fois avant, puis ici, lorsque la suppression est pressée, nous pouvons distribuer

65
00:06:12,290 --> 00:06:12,980
notre

66
00:06:12,980 --> 00:06:13,870
action et

67
00:06:13,880 --> 00:06:24,130
pour cela bien sûr, nous avons besoin pour importer cette action, alors faisons-le, importons peut-être tout en tant qu'actions de produits du dossier de magasin, là du

68
00:06:24,160 --> 00:06:29,650
dossier d'actions et là du fichier de produits et maintenant nous utilisons l'action de

69
00:06:29,650 --> 00:06:36,100
produits là-bas lorsque nous envoyons ceci pour appeler supprimer le produit et transmettre l'ID du produit qui

70
00:06:36,100 --> 00:06:40,340
est bien sûr itemData. article. id ici parce que

71
00:06:40,480 --> 00:06:46,830
nous parcourons tous les produits ici et cela signifie essentiellement que itemData. l'élément fait référence aux instances de notre modèle de

72
00:06:46,840 --> 00:06:51,870
produit, chaque instance a une propriété ID et nous la transmettons pour supprimer le produit.

73
00:06:51,940 --> 00:06:58,900
Donc, si nous essayons cela et que nous allons à l'administrateur et que je clique sur supprimer sur la chemise rouge, en effet, c'est parti ici

74
00:06:58,900 --> 00:07:01,960
et si je reviens aux produits, c'est parti ici aussi.

75
00:07:02,200 --> 00:07:08,680
Maintenant, si nous rechargeons cela et que j'ajoute la chemise rouge au panier, vous le voyez ici, je l'ai ajouté deux fois.

76
00:07:08,680 --> 00:07:16,380
Maintenant, si je vais à l'administrateur et que je le supprime et que je reviens aux produits et au panier, le panier est vide maintenant.

77
00:07:16,520 --> 00:07:23,090
D'un autre côté, si j'ajoute disons le tapis et la tasse de café maintenant, revenez à l'administrateur, supprimez

78
00:07:23,090 --> 00:07:28,460
le tapis mais pas la tasse de café, vous voyez dans les produits, la

79
00:07:28,520 --> 00:07:35,850
tasse de café est toujours dans le panier, travail. À propos, vous remarquerez peut-être que la tasse de café est un peu coupée

80
00:07:35,880 --> 00:07:41,240
ici, c'est quelque chose que je corrigerai plus tard avec le fait qu'ici, nous voyons actuellement un moins pour le total, c'est

81
00:07:41,250 --> 00:07:43,680
aussi quelque chose que je corrigerai dans un seconde.

82
00:07:43,680 --> 00:07:45,810
Tout d'abord, assurons-nous que nous pouvons

83
00:07:45,840 --> 00:07:52,830
cependant dans la section d'administration aller à l'écran d'édition ou que nous avons également un élément là-haut qui nous permet

84
00:07:52,830 --> 00:07:54,720
d'ajouter un nouveau produit.