1
00:00:02,100 --> 00:00:05,460
Pour le bouton Supprimer, recommençons avec la logique Redux.

2
00:00:05,490 --> 00:00:11,850
Donc ici, dans les actions par exemple, nous pouvons enregistrer un nouvel identifiant, supprimer du panier sonne comme un

3
00:00:11,850 --> 00:00:17,120
nom approprié étant donné que nous avions déjà ajouté au panier, alors supprimez du panier.

4
00:00:17,110 --> 00:00:22,710
Je vais également ajouter à nouveau une fonction de création d'action ici, supprimer du panier.

5
00:00:22,740 --> 00:00:27,750
Cela n'a maintenant besoin que de l'ID du produit qui doit être supprimé, donc uniquement l'ID du produit,

6
00:00:27,750 --> 00:00:34,260
puis cela renvoie un nouvel objet d'action où le type de cours est supprimé du panier et où nous avons le pid, l'ID

7
00:00:34,260 --> 00:00:40,800
du produit, où je transmets le ID du produit J'arrive ici. Maintenant, dans le réducteur, nous avions cet étui

8
00:00:40,800 --> 00:00:44,560
à ajouter au panier, maintenant nous devons simplement ajouter

9
00:00:44,560 --> 00:00:48,280
un autre étui ici et cet étui est le

10
00:00:50,290 --> 00:00:53,030
retrait de l'étui à chariot.

11
00:00:53,050 --> 00:00:57,960
Pour cela, vous devez vous assurer que vous importez l'identifiant d'action retiré du panier du

12
00:00:58,000 --> 00:00:58,990
fichier d'actions

13
00:01:01,840 --> 00:01:03,670
du panier et dans le cas

14
00:01:03,670 --> 00:01:07,120
de suppression du panier ici, nous avons à nouveau deux cas.

15
00:01:07,140 --> 00:01:12,660
La première est que nous n'avions qu'un seul article de ce produit dans le panier, comme pour

16
00:01:12,660 --> 00:01:13,900
le tapis bleu, dans

17
00:01:13,980 --> 00:01:16,760
ce cas, nous devons le supprimer entièrement de l'objet

18
00:01:16,770 --> 00:01:17,850
articles du

19
00:01:17,850 --> 00:01:23,400
panier, donc de cet objet et cela le supprimera donc de cette ligne que nous produisons ici.

20
00:01:23,400 --> 00:01:27,870
Si nous avons deux articles ou plus, nous voulons simplement réduire la quantité de 1.

21
00:01:27,870 --> 00:01:33,120
Bien sûr, vous pouvez toujours effacer cet élément entièrement si vous le souhaitez, mais je veux vous montrer

22
00:01:33,120 --> 00:01:35,450
comment vous pouvez différencier ces deux cas.

23
00:01:35,490 --> 00:01:41,130
Donc, en fait, si nous avons une quantité supérieure à un, je ne veux pas effacer l'article du panier,

24
00:01:41,130 --> 00:01:43,870
mais en fait simplement réduire le montant de 1.

25
00:01:44,100 --> 00:01:51,210
Donc, en retirant du panier, nous devons découvrir quelle est notre quantité. Donc, notre quantité actuelle que je stocke dans cette constante peut être

26
00:01:51,210 --> 00:01:57,930
déduite de notre état bien sûr, là dans les articles, nous devons trouver le produit que nous recherchons et bien sûr, nous pouvons le

27
00:01:57,960 --> 00:02:00,000
faire à l'aide de l'ID qui

28
00:02:00,000 --> 00:02:04,770
est une partie de notre action ici dans le champ pid parce que maintenant les éléments d'état

29
00:02:05,550 --> 00:02:11,440
sont un objet et donc nous pouvons accéder à l'action. pid ici, à droite.

30
00:02:11,450 --> 00:02:16,680
Cela permettra d'accéder dynamiquement à la valeur avec la clé d'ID de produit ici dans notre article, donc

31
00:02:16,950 --> 00:02:18,380
avec l'ID de produit

32
00:02:18,390 --> 00:02:21,220
que nous obtenons sur cette action et c'est ainsi

33
00:02:21,240 --> 00:02:24,950
que nous ajoutons des articles à notre objet articles ici à droite.

34
00:02:24,960 --> 00:02:28,890
Nous utilisons notre ID de produit comme identifiant, c'est maintenant

35
00:02:28,920 --> 00:02:32,410
ce que j'utilise ici pour y accéder.

36
00:02:32,430 --> 00:02:36,940
Cela aura une quantité car il contiendra une valeur qui est un article de produit, vous pouvez

37
00:02:36,990 --> 00:02:41,120
bien sûr également ajouter un contrôle si cet article fait réellement partie du panier mais la

38
00:02:41,130 --> 00:02:46,290
façon dont nous construisons cette application, nous ne devrions jamais être en mesure d'atteindre cet sans que ce produit fasse

39
00:02:46,290 --> 00:02:51,690
partie du panier, car nous ne pouvons déclencher notre action de suppression que depuis l'intérieur de l'écran du panier, nous n'avons

40
00:02:51,690 --> 00:02:55,340
donc pas besoin de vérifier ici, mais nous devons absolument obtenir la quantité.

41
00:02:55,410 --> 00:03:03,780
Maintenant, nous pouvons vérifier si la quantité actuelle est supérieure à 1, ce qui signifie que nous devons la

42
00:03:03,780 --> 00:03:06,740
réduire, nous devons la réduire, pas l'effacer,

43
00:03:06,750 --> 00:03:08,940
sinon nous devons l'effacer.

44
00:03:09,090 --> 00:03:11,790
Commençons maintenant par le cas d'effacement.

45
00:03:11,850 --> 00:03:18,900
Donc, ici, nous avons juste besoin de retourner un nouvel objet items qui inclut tous

46
00:03:18,930 --> 00:03:27,520
les anciens articles mais ne comprend plus cet article. Nous pouvons donc avoir nos articles de panier mis à jour ici où nous

47
00:03:27,520 --> 00:03:36,870
clonons les articles d'état, comme ceci et maintenant pour supprimer une propriété, nous pouvons utiliser le mot-clé de suppression que Javascript connaît et là, nous pouvons supprimer les articles

48
00:03:36,870 --> 00:03:41,880
de panier mis à jour pour action. pid.

49
00:03:41,880 --> 00:03:49,290
Donc, cela supprimera cet article de notre objet Javascript copié ici, il supprimera cet article entièrement, cet article de produit entièrement

50
00:03:49,290 --> 00:03:57,020
de notre objet articles du panier. C'est ainsi que nous pouvons l'effacer. Maintenant, dans l'autre cas où nous devons

51
00:03:57,020 --> 00:03:59,690
simplement le réduire, je peux avoir mon article de

52
00:04:01,040 --> 00:04:07,250
panier mis à jour, de sorte que cet article de panier unique où je crée un nouvel article de panier avec

53
00:04:07,280 --> 00:04:13,700
la classe d'élément de panier et là, je veux copier les valeurs de l'existant article du panier mais réduisez simplement la quantité.

54
00:04:14,220 --> 00:04:17,910
Donc, l'article du panier prend la bonne quantité comme premières

55
00:04:17,910 --> 00:04:25,290
valeurs, alors maintenant, le but est d'avoir accès aux éléments de l'état pour l'ID de produit que j'obtiens sur l'action

56
00:04:25,290 --> 00:04:33,450
et puisque répéter cela sera lourd, je le stockerai dans une aide une constante , l'article du panier sélectionné est ici, maintenant nous

57
00:04:33,510 --> 00:04:37,290
pouvons le remplacer ici par l'article du panier sélectionné et ici

58
00:04:37,290 --> 00:04:41,760
je peux utiliser cartItem sélectionné. quantité moins un.

59
00:04:41,760 --> 00:04:48,240
Maintenant, bien sûr, nous savons que ce ne sera pas zéro parce que la quantité était supérieure à 1 et maintenant nous pouvons bien sûr

60
00:04:48,240 --> 00:04:49,820
garder le reste des données.

61
00:04:49,830 --> 00:04:57,270
Donc, nous gardons le prix du produit ici, nous gardons le titre du produit, que tout ne change pas,

62
00:04:57,270 --> 00:05:00,840
la somme change bien sûr et c'est la

63
00:05:00,910 --> 00:05:05,090
somme, l'ancienne somme moins le prix bien sûr, donc moins

64
00:05:05,100 --> 00:05:13,410
le prix du produit parce que nous en avons supprimé un article, nous devons réduire la somme du prix d'un article.

65
00:05:13,470 --> 00:05:21,870
Cet article de panier mis à jour doit maintenant remplacer l'article actuel dans notre objet Articles de panier. Afin que nous puissions également réutiliser du code, je vais en fait changer un peu

66
00:05:21,870 --> 00:05:26,760
et créer des éléments de panier mis à jour en tant que variable ici au lieu d'une

67
00:05:26,760 --> 00:05:32,880
constante ici dans le bloc else, de sorte que je mets à jour cette valeur de variable, de sorte qu'ici dans le

68
00:05:33,240 --> 00:05:34,230
bloc if, nous

69
00:05:34,230 --> 00:05:40,530
pouvons également utiliser le même nom de variable, les articles du panier mis à jour où je le place égal à une copie

70
00:05:40,530 --> 00:05:49,890
des articles existants, mais je remplace ici mon action pid, donc mon ID de produit, mon identifiant, la valeur là avec le article de panier mis à jour qui est mon ancien article

71
00:05:49,890 --> 00:05:56,610
de panier avec la quantité et la somme mises à jour. Ce sont les articles du panier mis à jour,

72
00:05:56,700 --> 00:05:57,520
maintenant,

73
00:05:57,540 --> 00:06:02,550
bien sûr, nous devrons également ajuster le montant total de notre état, donc après

74
00:06:02,550 --> 00:06:10,800
ce bloc sinon, nous retournons une copie de l'état, les articles peuvent être définis sur des articles du panier mis à jour et

75
00:06:11,160 --> 00:06:14,030
maintenant important, le le montant total peut

76
00:06:14,100 --> 00:06:20,160
être défini pour indiquer le montant total moins le prix du produit de l'article de panier

77
00:06:23,530 --> 00:06:31,030
sélectionné, tout comme j'ai mis à jour la somme pour cet article de panier unique, la somme totale du panier

78
00:06:31,060 --> 00:06:38,200
doit bien sûr également être réajustée en tant que telle. Nous pouvons maintenant essayer de répartir cette action de suppression du panier.

79
00:06:38,200 --> 00:06:46,940
Allons donc à l'écran du panier où j'ai finalement cette fonction on remove et là, je veux

80
00:06:46,940 --> 00:06:51,860
maintenant envoyer une action, donc j'aurai besoin d'accéder à

81
00:06:51,890 --> 00:07:03,040
la fonction de répartition à l'aide du crochet de répartition d'utilisation. Nous pouvons maintenant utiliser cela ici, y accéder en appelant simplement utiliser dispatch comme ceci

82
00:07:03,550 --> 00:07:05,740
et ensuite distribuer ceci là-bas.

83
00:07:05,740 --> 00:07:17,150
Dispatch importe maintenant toutes les actions dont nous avons besoin, alors importez tout en tant qu'actions de panier à partir du dossier de magasin, à partir du panier d'actions comme celui-ci, encore une

84
00:07:17,150 --> 00:07:24,080
fois en utilisant cette importation groupée qui est totalement facultative, vous pouvez également cibler les choses spécifiques dont vous avez

85
00:07:24,080 --> 00:07:25,760
besoin, donc cibler le

86
00:07:25,790 --> 00:07:31,610
spécifique les créateurs d'actions, dans ce cas le créateur du retrait du panier dont nous aurions

87
00:07:32,480 --> 00:07:35,400
besoin, puis là-bas, exécutez simplement ce créateur d'action,

88
00:07:35,420 --> 00:07:41,780
dans mon cas en utilisant les actions du panier. removeFromCart, transmettez l'ID du produit que nous obtenons bien

89
00:07:41,780 --> 00:07:45,030
sûr ici, c'est itemData. article.

90
00:07:45,110 --> 00:07:50,810
et maintenant gardez à l'esprit que nous parcourons des articles de cette forme, nous aurons donc un champ d'ID de

91
00:07:50,810 --> 00:07:55,840
produit là-dedans et donc nous pouvons l'utiliser ici pour le transférer pour le retirer du panier, cela devrait

92
00:07:55,850 --> 00:08:00,770
donc nous permettre de mettre à jour cette. Et cela devrait être tout, Redux devrait

93
00:08:00,770 --> 00:08:05,470
faire le reste dans les coulisses et devrait automatiquement restituer l'écran du panier chaque fois que

94
00:08:05,570 --> 00:08:12,060
le panier change, donc chaque fois que nous supprimons des articles. J'ai donc ajouté deux chemises rouges et un tapis bleu et si je retire une chemise

95
00:08:13,260 --> 00:08:13,790
rouge, en

96
00:08:13,800 --> 00:08:17,000
effet bien un problème que nous avons est le changement de commande, nous devrons résoudre ce

97
00:08:17,010 --> 00:08:19,800
problème mais vous voyez que la quantité a été mise à jour correctement.

98
00:08:19,920 --> 00:08:25,620
Si je supprime maintenant cela, le montant total est également mis à jour correctement, si je supprime maintenant cela, en effet, il a complètement

99
00:08:26,360 --> 00:08:28,080
disparu et maintenant cela aussi est désactivé.

100
00:08:28,080 --> 00:08:31,970
Donc, cela fonctionne généralement, mais bien sûr l'ordre étant changé, ce n'est pas

101
00:08:31,980 --> 00:08:34,140
quelque chose que je veux faire ici.

102
00:08:34,380 --> 00:08:40,620
Maintenant, pour éviter que la commande ne change, nous pouvons simplement aller à l'écran du panier où je change mes articles

103
00:08:40,620 --> 00:08:45,960
pour être un tableau et là, nous devons juste nous assurer que ce tableau est toujours trié

104
00:08:45,990 --> 00:08:51,690
de la même manière car ce sélecteur déclencher et récupérer nos données chaque fois que notre état Redux change.

105
00:08:52,320 --> 00:08:57,540
Donc donc ici, nous aurons toujours le dernier instantané de données que nous avons là-bas et donc, c'est ici où nous

106
00:08:57,540 --> 00:09:02,670
avons juste besoin de le trier de la même manière tout le temps et donc de le restituer toujours

107
00:09:02,670 --> 00:09:03,790
de la même manière.

108
00:09:03,900 --> 00:09:11,250
Il nous suffit donc de nous assurer que notre tableau des articles du panier transformé est trié en appelant sort là-bas.

109
00:09:11,410 --> 00:09:17,310
Si je l'appelle comme ça, je commence à ajouter des données ici, maintenant vous voyez que cela

110
00:09:17,410 --> 00:09:21,820
seul n'a pas fait l'affaire parce que nous ne lui disons pas

111
00:09:21,820 --> 00:09:28,480
comment le trier et il ne sait pas comment faire cela pour les objets hors de la boîte mais

112
00:09:28,480 --> 00:09:34,490
nous pouvons passer une fonction pour trier où nous comparons toujours deux éléments, a et b, et

113
00:09:34,600 --> 00:09:38,140
ensuite trier doit retourner un nombre à la fin qui

114
00:09:38,190 --> 00:09:40,780
détermine ce qui vient en premier

115
00:09:40,800 --> 00:09:50,530
et là, vous pouvez bien sûr trier cela cependant vous voulez, par exemple par ID de produit, afin que nous puissions simplement retourner une comparaison où nous vérifions

116
00:09:50,530 --> 00:09:58,110
l'ID de produit de A, le comparer à l'ID de produit de B et s'il est supérieur, puis avec une expression ternaire

117
00:09:58,150 --> 00:10:02,210
ici, j'en ai renvoyé un, sinon je retourne moins un .

118
00:10:02,370 --> 00:10:07,620
C'est la fonction de tri normale fournie avec Javascript et maintenant cela garantit que nous trions

119
00:10:07,620 --> 00:10:08,610
toujours de

120
00:10:08,670 --> 00:10:17,520
la même manière, donc maintenant vous voyez si je supprime cela, le court-circuit rouge reste à sa place et donc notre logique de panier est terminée.

121
00:10:17,520 --> 00:10:23,620
Maintenant, nous pouvons nous assurer que nous pouvons également cliquer sur ce bouton de commande maintenant et nous l'ajoutons comme une commande

122
00:10:23,610 --> 00:10:29,250
que nous pourrons ensuite visiter avec le tiroir utile ici qui nous permet d'aller à l'écran des commandes que nous

123
00:10:29,250 --> 00:10:31,190
n'avons bien sûr pas encore ajouter.