Jetzt, da die Produktartikelkomponente neu organisiert wurde, ist es an der Zeit, die Artikel löschen zu können,
da dies tatsächlich zu den einfachsten Dingen gehört, die wir tun können.
Dies bringt uns zurück zu Redux und dort ist es jetzt Zeit, an den Produkten zu arbeiten und ich
werde mit den Aktionen
beginnen, die derzeit eine leere Datei sind, die Produkte. js-Datei im Aktionsordner, in den ich
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
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
zurückgibt, bei dem der Typ Produkt löschen und das Produkt ist pid, die Produkt-ID
ist einfach die weitergeleitete Produkt-ID.
Jetzt im Reduzierer, in der Produktreduzierungsdatei, können wir uns das anhören, weil wir uns
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,
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
wir das Produkt aus unserem Benutzerprodukt-Array und natürlich auch aus dem verfügbaren Produkt-Array entfernen, da es
im Allgemeinen nicht nur in unseren Benutzerprodukten, sondern in der gesamten App gelöscht
wird.
Daher werde
ich hier ein neues Objekt zurückgeben, in dem wir den vorhandenen Status kopieren, um sicherzustellen, dass wir keinen Status verlieren und Benutzerprodukte
nun einfach den Status haben. userProducts, also die alten
Benutzerprodukte, nach denen wir filtern können, ist eine integrierte Javascript-Methode, die ein neues Array
zurückgibt, ein neues Array, das im Grunde durch Ausführen einer Funktion für jedes Element im alten Array erstellt wird und
wenn diese Funktion true zurückgibt Wenn wir false zurückgeben, wird das Element gelöscht.
Damit wird eine Funktion ausgeführt, bei der wir das Produkt erhalten. Diese Funktion wird sozusagen von
Javascript für uns ausgeführt und übergibt den Artikel, den sie gerade betrachtet, an diese Funktion.
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
sich um die Produkt-ID handelt, die wir löschen möchten.
Dies bedeutet, dass im Grunde alle Produkte erhalten bleiben, bei denen die IDs nicht übereinstimmen. Wenn sie übereinstimmen, wissen wir, dass es sich
um das Produkt handelt, das wir entfernen möchten, und
geben daher false zurück,
was bedeutet, dass dies im neuen Array nicht der Fall ist inbegriffen.
Jetzt ist es im Wesentlichen die gleiche Logik für die verfügbaren Produkte.
Dort müssen wir nur noch alle verfügbaren Produkte durchgehen und das Produkt dort herausfiltern.
Dies ist eine Änderung, die wir vornehmen müssen. Eine weitere Änderung muss im Warenkorb vorgenommen werden. Wenn wir
jedoch ein Produkt löschen, sollte es ebenfalls aus dem Warenkorb entfernt werden, da wir sonst ein Produkt
im Warenkorb haben, das nicht mehr vorhanden ist .
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
Warenkorb importieren. js
Reduzierer auch und hier müssen
wir sicherstellen, dass wir das Produkt aus dem Warenkorb entfernen, wenn es gelöscht wurde.
Hier im Warenkorb erhalten wir natürlich unsere Produkt-ID des Produkts, das wir löschen möchten. Es ist
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
das Produkt weg ist und weg ist, meine ich vollständig aus dem Warenkorb
gelöscht, nicht nur um eins reduziert, sondern vollständig gelöscht. Elemente sind hier also am Ende eine Kopie
der
vorhandenen Elemente ohne dieses Produkt. Daher erstelle ich eine neue konstante, aktualisierte Elemente, in die ich meine vorhandenen Statuselemente hier
wie folgt kopiere
und dann aktualisierte Elemente für die Aktions-PID lösche. Also lösche ich diesen Artikel aus dem Warenkorb.
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
Aktions-PID vorhanden sind. Wenn dies etwas Sinnvolles zurückgibt und wenn dies nicht
der Fall ist, werde ich nur den vorhandenen Status zurückgeben, weil Dann bin ich mit diesem Fall fertig. Ich muss
nichts im Status ändern, also werde ich einfach den vorhandenen Status ohne Änderungen zurückgeben.
Wenn ich es über diese
Prüfung hinaus schaffe, weiß ich, dass das Produkt mit der ID, die wir löschen möchten, Teil des Artikels ist.
Dann kopiere ich meine Artikel weiter und lösche dann das Produkt von dort. Bevor ich dies
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
wir uns den Warenkorb ansehen Artikelmodell Ich meine, wir haben dieses Summenfeld hier, also muss ich
am Ende hier die Summe entfernen. Ich interessiere mich für die Summe, da ich jetzt meine Artikel
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
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,
wenn
wir diesen löschen. Jetzt müssen wir nur noch diese
Löschung versenden, also möchten
wir zurück in Benutzerprodukte, hier in Löschen, versenden. Aus React Redux können wir also use dispatch
importieren, um hier Zugriff auf die Versandfunktion zu erhalten, indem
wir use dispatch aufrufen, wie wir es schon oft getan haben, und dann können wir hier, wenn Löschen gedrückt wird,
unsere
Aktion auslösen,
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
dem Aktionsordner und dort aus der Produktdatei. Jetzt verwenden wir die Produktaktion dort unten,
wenn wir diese versenden, um das Produkt löschen und aufzurufen leiten Sie die Produkt-ID weiter, die
natürlich itemData ist. Artikel. ID hier, weil wir
alle Produkte hier durchgehen und das bedeutet im Grunde, dass itemData. Artikel bezieht sich auf Instanzen unseres Produktmodells, jede
Instanz hat eine ID-Eigenschaft und wir leiten diese weiter, um das Produkt zu löschen.
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
zurück zu den Produkten gehe, ist es auch hier weg.
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.
Wenn ich jetzt zu admin gehe und es lösche und zu Produkten und zum Warenkorb zurückkehre, ist der Warenkorb jetzt leer.
Auf der anderen Seite, wenn ich jetzt den Teppich und die Kaffeetasse hinzufüge, gehen Sie zurück zu
admin, löschen Sie den Teppich, aber nicht die Kaffeetasse, Sie sehen in Produkten, die
Kaffeetasse ist noch im Einkaufswagen, also das tat Arbeit. Übrigens, Sie werden vielleicht bemerken, dass die Kaffeetasse hier etwas abgeschnitten ist. Das
werde ich später beheben, zusammen mit der Tatsache, dass wir hier tatsächlich ein Minus für die Gesamtsumme sehen. Das
werde ich auch in einem Problem beheben zweite.
Stellen wir zunächst sicher, dass wir
jedoch im Admin-Bereich zum Bearbeitungsbildschirm gehen können oder dass wir dort oben auch ein Element haben, mit dem wir ein
neues Produkt hinzufügen können.