1
00:00:02,320 --> 00:00:09,040
Jetzt, da die Produktartikelkomponente neu organisiert wurde, ist es an der Zeit, die Artikel löschen zu können,

2
00:00:09,040 --> 00:00:14,120
da dies tatsächlich zu den einfachsten Dingen gehört, die wir tun können.

3
00:00:14,170 --> 00:00:19,600
Dies bringt uns zurück zu Redux und dort ist es jetzt Zeit, an den Produkten zu arbeiten und ich

4
00:00:19,600 --> 00:00:21,120
werde mit den Aktionen

5
00:00:21,160 --> 00:00:26,450
beginnen, die derzeit eine leere Datei sind, die Produkte. js-Datei im Aktionsordner, in den ich

6
00:00:26,560 --> 00:00:35,350
eine Aktion exportieren möchte, die uns beim Löschen von Produkten hilft. Der Bezeichner heißt daher einfach Produkt löschen und enthält

7
00:00:35,350 --> 00:00:46,900
hier einen Text zum Löschen des Produkts. Außerdem exportiere ich ein Löschprodukt des Aktionserstellers, das die Produkt-ID wie folgt verwendet und dann ein Aktionsobjekt

8
00:00:46,900 --> 00:00:53,430
zurückgibt, bei dem der Typ Produkt löschen und das Produkt ist pid, die Produkt-ID

9
00:00:53,440 --> 00:00:55,990
ist einfach die weitergeleitete Produkt-ID.

10
00:00:59,620 --> 00:01:07,990
Jetzt im Reduzierer, in der Produktreduzierungsdatei, können wir uns das anhören, weil wir uns

11
00:01:08,560 --> 00:01:17,110
derzeit nie um eine Aktion kümmern. Jetzt können wir hier den Aktionstyp einschalten und den Fall behandeln, dass es sich um ein Löschprodukt handelt,

12
00:01:17,230 --> 00:01:23,900
das wir aus unserer Produktaktionsdatei erhalten, und daher müssen Sie diesen Import hinzufügen. Wenn das Löschen von Produkten der Fall ist, müssen

13
00:01:23,900 --> 00:01:29,840
wir das Produkt aus unserem Benutzerprodukt-Array und natürlich auch aus dem verfügbaren Produkt-Array entfernen, da es

14
00:01:29,840 --> 00:01:34,490
im Allgemeinen nicht nur in unseren Benutzerprodukten, sondern in der gesamten App gelöscht

15
00:01:34,490 --> 00:01:35,290
wird.

16
00:01:37,990 --> 00:01:39,190
Daher werde

17
00:01:39,190 --> 00:01:48,100
ich hier ein neues Objekt zurückgeben, in dem wir den vorhandenen Status kopieren, um sicherzustellen, dass wir keinen Status verlieren und Benutzerprodukte

18
00:01:48,100 --> 00:01:51,630
nun einfach den Status haben. userProducts, also die alten

19
00:01:51,640 --> 00:01:57,070
Benutzerprodukte, nach denen wir filtern können, ist eine integrierte Javascript-Methode, die ein neues Array

20
00:01:57,070 --> 00:02:04,640
zurückgibt, ein neues Array, das im Grunde durch Ausführen einer Funktion für jedes Element im alten Array erstellt wird und

21
00:02:04,660 --> 00:02:09,930
wenn diese Funktion true zurückgibt Wenn wir false zurückgeben, wird das Element gelöscht.

22
00:02:10,000 --> 00:02:15,490
Damit wird eine Funktion ausgeführt, bei der wir das Produkt erhalten. Diese Funktion wird sozusagen von

23
00:02:15,490 --> 00:02:20,720
Javascript für uns ausgeführt und übergibt den Artikel, den sie gerade betrachtet, an diese Funktion.

24
00:02:20,800 --> 00:02:29,110
Wir erhalten also das Produkt für jedes Produkt in unserem Benutzerprodukt-Array und möchten die Produkt-ID zurückgeben, im Gegensatz zur Aktions-PID, bei der es

25
00:02:29,650 --> 00:02:33,390
sich um die Produkt-ID handelt, die wir löschen möchten.

26
00:02:33,400 --> 00:02:39,530
Dies bedeutet, dass im Grunde alle Produkte erhalten bleiben, bei denen die IDs nicht übereinstimmen. Wenn sie übereinstimmen, wissen wir, dass es sich

27
00:02:39,550 --> 00:02:41,890
um das Produkt handelt, das wir entfernen möchten, und

28
00:02:41,890 --> 00:02:43,240
geben daher false zurück,

29
00:02:43,240 --> 00:02:46,340
was bedeutet, dass dies im neuen Array nicht der Fall ist inbegriffen.

30
00:02:46,370 --> 00:02:50,890
Jetzt ist es im Wesentlichen die gleiche Logik für die verfügbaren Produkte.

31
00:02:50,900 --> 00:02:55,530
Dort müssen wir nur noch alle verfügbaren Produkte durchgehen und das Produkt dort herausfiltern.

32
00:02:55,550 --> 00:03:01,090
Dies ist eine Änderung, die wir vornehmen müssen. Eine weitere Änderung muss im Warenkorb vorgenommen werden. Wenn wir

33
00:03:01,090 --> 00:03:06,400
jedoch ein Produkt löschen, sollte es ebenfalls aus dem Warenkorb entfernt werden, da wir sonst ein Produkt

34
00:03:06,400 --> 00:03:09,690
im Warenkorb haben, das nicht mehr vorhanden ist .

35
00:03:09,820 --> 00:03:17,410
Daher werde ich hier auch einen Fall für das Löschen von Produkten hinzufügen. Daher müssen Sie das Löschen von Produkten aus Aktionsprodukten in den

36
00:03:17,410 --> 00:03:18,810
Warenkorb importieren. js

37
00:03:18,820 --> 00:03:20,290
Reduzierer auch und hier müssen

38
00:03:23,060 --> 00:03:27,830
wir sicherstellen, dass wir das Produkt aus dem Warenkorb entfernen, wenn es gelöscht wurde.

39
00:03:29,670 --> 00:03:36,150
Hier im Warenkorb erhalten wir natürlich unsere Produkt-ID des Produkts, das wir löschen möchten. Es ist

40
00:03:36,300 --> 00:03:47,940
diese PID in dieser Aktion, die ausgelöst wird. Daher geben wir hier einen neuen Status zurück, in dem wir unseren Warenkorb und den Gesamtbetrag aktualisieren möchten so dass

41
00:03:47,950 --> 00:03:53,680
das Produkt weg ist und weg ist, meine ich vollständig aus dem Warenkorb

42
00:03:53,680 --> 00:04:01,920
gelöscht, nicht nur um eins reduziert, sondern vollständig gelöscht. Elemente sind hier also am Ende eine Kopie

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

44
00:04:02,760 --> 00:04:12,610
vorhandenen Elemente ohne dieses Produkt. Daher erstelle ich eine neue konstante, aktualisierte Elemente, in die ich meine vorhandenen Statuselemente hier

45
00:04:12,610 --> 00:04:13,910
wie folgt kopiere

46
00:04:15,010 --> 00:04:22,820
und dann aktualisierte Elemente für die Aktions-PID lösche. Also lösche ich diesen Artikel aus dem Warenkorb.

47
00:04:22,820 --> 00:04:29,600
Dies ist natürlich nur dann sinnvoll, wenn dieser Artikel im Warenkorb vorhanden ist. Daher werde ich zunächst prüfen, ob Statuselemente für die

48
00:04:29,750 --> 00:04:33,940
Aktions-PID vorhanden sind. Wenn dies etwas Sinnvolles zurückgibt und wenn dies nicht

49
00:04:34,220 --> 00:04:40,310
der Fall ist, werde ich nur den vorhandenen Status zurückgeben, weil Dann bin ich mit diesem Fall fertig. Ich muss

50
00:04:40,310 --> 00:04:44,750
nichts im Status ändern, also werde ich einfach den vorhandenen Status ohne Änderungen zurückgeben.

51
00:04:45,230 --> 00:04:46,840
Wenn ich es über diese

52
00:04:46,850 --> 00:04:52,330
Prüfung hinaus schaffe, weiß ich, dass das Produkt mit der ID, die wir löschen möchten, Teil des Artikels ist.

53
00:04:52,340 --> 00:05:00,790
Dann kopiere ich meine Artikel weiter und lösche dann das Produkt von dort. Bevor ich dies

54
00:05:00,790 --> 00:05:11,970
tue, erhalte ich die Gesamtsumme der Artikel, indem ich auf Statuselemente für die Aktions-PID zugreife, und dann haben wir diese natürlich, wenn

55
00:05:11,970 --> 00:05:20,150
wir uns den Warenkorb ansehen Artikelmodell Ich meine, wir haben dieses Summenfeld hier, also muss ich

56
00:05:20,150 --> 00:05:27,300
am Ende hier die Summe entfernen. Ich interessiere mich für die Summe, da ich jetzt meine Artikel

57
00:05:27,300 --> 00:05:34,440
dort unten mit den aktualisierten Artikeln aktualisieren kann, bei denen ich sie mit dem Schlüsselwort delete gelöscht habe, und der Gesamtbetrag des Warenkorbs den Gesamtbetrag

58
00:05:34,620 --> 00:05:44,540
abzüglich der Gesamtsumme des Artikels angibt, also die Gesamtsumme dieses Warenkorbs Artikel, den wir zuvor hinzugefügt hatten. Jetzt aktualisieren wir den Warenkorb auch entsprechend,

59
00:05:44,540 --> 00:05:45,760
wenn

60
00:05:45,860 --> 00:05:50,600
wir diesen löschen. Jetzt müssen wir nur noch diese

61
00:05:50,660 --> 00:05:52,960
Löschung versenden, also möchten

62
00:05:52,990 --> 00:06:00,170
wir zurück in Benutzerprodukte, hier in Löschen, versenden. Aus React Redux können wir also use dispatch

63
00:06:00,170 --> 00:06:04,140
importieren, um hier Zugriff auf die Versandfunktion zu erhalten, indem

64
00:06:04,490 --> 00:06:12,290
wir use dispatch aufrufen, wie wir es schon oft getan haben, und dann können wir hier, wenn Löschen gedrückt wird,

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

66
00:06:12,980 --> 00:06:13,870
Aktion auslösen,

67
00:06:13,880 --> 00:06:24,130
und dafür brauchen wir natürlich Um diese Aktion zu importieren, lassen Sie uns dies tun. Importieren wir möglicherweise alles als Produktaktionen aus dem Speicherordner, dort aus

68
00:06:24,160 --> 00:06:29,650
dem Aktionsordner und dort aus der Produktdatei. Jetzt verwenden wir die Produktaktion dort unten,

69
00:06:29,650 --> 00:06:36,100
wenn wir diese versenden, um das Produkt löschen und aufzurufen leiten Sie die Produkt-ID weiter, die

70
00:06:36,100 --> 00:06:40,340
natürlich itemData ist. Artikel. ID hier, weil wir

71
00:06:40,480 --> 00:06:46,830
alle Produkte hier durchgehen und das bedeutet im Grunde, dass itemData. Artikel bezieht sich auf Instanzen unseres Produktmodells, jede

72
00:06:46,840 --> 00:06:51,870
Instanz hat eine ID-Eigenschaft und wir leiten diese weiter, um das Produkt zu löschen.

73
00:06:51,940 --> 00:06:58,900
Wenn wir es also versuchen und zum Administrator gehen und ich auf Löschen auf dem roten Shirt klicke, ist es tatsächlich hier weg und wenn ich

74
00:06:58,900 --> 00:07:01,960
zurück zu den Produkten gehe, ist es auch hier weg.

75
00:07:02,200 --> 00:07:08,680
Wenn wir dies nun neu laden und ich das rote Hemd in den Warenkorb lege, sehen Sie es hier, ich habe es zweimal hinzugefügt.

76
00:07:08,680 --> 00:07:16,380
Wenn ich jetzt zu admin gehe und es lösche und zu Produkten und zum Warenkorb zurückkehre, ist der Warenkorb jetzt leer.

77
00:07:16,520 --> 00:07:23,090
Auf der anderen Seite, wenn ich jetzt den Teppich und die Kaffeetasse hinzufüge, gehen Sie zurück zu

78
00:07:23,090 --> 00:07:28,460
admin, löschen Sie den Teppich, aber nicht die Kaffeetasse, Sie sehen in Produkten, die

79
00:07:28,520 --> 00:07:35,850
Kaffeetasse ist noch im Einkaufswagen, also das tat Arbeit. Übrigens, Sie werden vielleicht bemerken, dass die Kaffeetasse hier etwas abgeschnitten ist. Das

80
00:07:35,880 --> 00:07:41,240
werde ich später beheben, zusammen mit der Tatsache, dass wir hier tatsächlich ein Minus für die Gesamtsumme sehen. Das

81
00:07:41,250 --> 00:07:43,680
werde ich auch in einem Problem beheben zweite.

82
00:07:43,680 --> 00:07:45,810
Stellen wir zunächst sicher, dass wir

83
00:07:45,840 --> 00:07:52,830
jedoch im Admin-Bereich zum Bearbeitungsbildschirm gehen können oder dass wir dort oben auch ein Element haben, mit dem wir ein

84
00:07:52,830 --> 00:07:54,720
neues Produkt hinzufügen können.