Beginnen wir für die Schaltfläche Löschen erneut mit der Redux-Logik.
Hier in den Aktionen können wir beispielsweise eine neue Kennung registrieren. Das Entfernen aus dem Warenkorb klingt wie ein passender
Name, den wir zuvor zum Warenkorb hinzugefügt haben. Entfernen Sie ihn also aus dem Warenkorb.
Ich werde hier auch wieder eine Action Creator-Funktion hinzufügen, aus dem Warenkorb entfernen.
Dies benötigt jetzt nur noch die ID des Produkts, das entfernt werden soll, also nur die Produkt-ID,
und dann wird ein neues Aktionsobjekt zurückgegeben, bei dem der Kurstyp aus dem Warenkorb entfernt wird und bei dem wir die PID haben,
die Produkt-ID, an die ich die weiterleite Produkt-ID Ich bekomme hier. Jetzt im Reduzierer hatten wir diesen Fall
zum Warenkorb hinzufügen, jetzt müssen wir hier einfach
einen anderen Fall hinzufügen und dieser Fall ist
der Fall vom Wagen entfernen.
Dazu müssen Sie sicherstellen, dass Sie die aus dem Warenkorb entfernte Aktionskennung aus
der Warenkorbaktionsdatei
importieren. Im Fall "Aus
dem Warenkorb entfernen" haben wir hier wieder zwei Fälle.
Zum einen hatten wir nur einen Artikel dieses Produkts im Warenkorb, wie beim blauen Teppich.
In diesem Fall
müssen wir ihn vollständig aus dem Warenkorb entfernen,
also aus
diesem Objekt, und dies wird ihn dann aus dieser Reihe entfernen was wir hier ausgeben.
Wenn wir zwei oder mehr Artikel haben, möchten wir die Menge nur um 1 reduzieren.
Natürlich können Sie diesen Artikel jederzeit vollständig löschen, wenn Sie möchten, aber ich möchte Ihnen zeigen, wie
Sie zwischen diesen beiden Fällen unterscheiden können.
Wenn wir also eine höhere Menge als eine haben, möchte ich den Artikel nicht aus dem Warenkorb
löschen, sondern nur die Menge um 1 reduzieren.
Deshalb müssen wir beim Entfernen aus dem Warenkorb herausfinden, wie hoch unsere Menge ist. Unsere aktuelle Menge, die ich in dieser Konstante speichere, kann natürlich
von unserem Zustand abgezogen werden. Dort müssen wir in den Artikeln das Produkt finden, nach dem wir suchen, und natürlich können
wir dies mit Hilfe der
ID tun, die ist Teil unserer Aktion hier im PID-Feld, da jetzt Statuselemente ein
Objekt sind und wir daher auf Aktionen zugreifen können. pid hier, richtig.
Dadurch wird dynamisch auf den Wert mit dem Produkt-ID-Schlüssel hier in unserem Artikel
zugegriffen. Mit der
Produkt-ID erhalten wir diese Aktion. Auf diese
Weise fügen wir unserem Artikelobjekt hier rechts Artikel hinzu.
Wir verwenden unsere Produkt-ID als Kennung. Dies ist nun das, was
ich hier verwende, um Zugriff darauf zu erhalten.
Dies hat eine Menge, da dies einen Wert enthält, der ein Produktartikel ist. Sie können
natürlich auch eine Überprüfung hinzufügen, ob dieser Artikel tatsächlich Teil des Warenkorbs ist,
aber so wie wir diese App erstellen, sollten wir dies niemals erreichen können Aktion, ohne dass dieses
Produkt Teil des Warenkorbs ist, da wir unsere Löschaktion hier nur innerhalb des Warenkorbbildschirms auslösen können. Wir müssen
hier also nicht nachsehen, aber wir müssen definitiv die Menge ermitteln.
Jetzt können wir prüfen, ob die aktuelle Menge größer als 1 ist, was bedeutet, dass wir sie reduzieren müssen,
wir müssen sie reduzieren, nicht löschen, sonst
müssen wir sie löschen.
Beginnen wir nun mit dem Löschfall.
Hier müssen wir also nur ein neues Elementobjekt zurückgeben, das alle alten Elemente
enthält, dieses Element jedoch nicht mehr enthält. So können wir unsere aktualisierten Warenkorbelemente hier haben, wo wir Statuselemente
wie dieses klonen. Um nun eine Eigenschaft zu entfernen, können wir das Schlüsselwort delete verwenden, das Javascript kennt, und dort können wir
aktualisierte Warenkorbelemente für Aktionen löschen. pid.
Dadurch wird dieser Artikel aus unserem kopierten Javascript-Objekt hier gelöscht. Dieser Artikel wird vollständig gelöscht. Dieser Produktartikel wird
vollständig aus unserem Warenkorb-Objekt entfernt. So können wir es löschen. In dem anderen Fall, in
dem wir es nur reduzieren müssen, kann
ich meinen aktualisierten Warenkorbartikel haben, sodass ich für diesen einzelnen Warenkorbartikel einen neuen Warenkorbartikel mit der
Warenkorbartikelklasse erstelle und dort die Werte des vorhandenen Warenkorbs kopieren möchte Warenkorbartikel aber einfach die Menge reduzieren.
Der Warenkorbartikel nimmt also die richtige Menge als ersten Wert
an. Daher besteht das Ziel hier darin, Zugriff auf Statusartikel für die Produkt-ID zu erhalten, die ich für die Aktion
erhalte. Da das Wiederholen dieses Artikels umständlich ist, speichere ich ihn in einem Helfer als Konstante , ausgewähltes Warenkorbelement ist dies hier,
jetzt können wir das hier durch ausgewähltes Warenkorbelement ersetzen und hier
kann ich ausgewähltes Warenkorbelement verwenden. Menge minus eins.
Jetzt wissen wir natürlich, dass dies nicht Null sein wird, da die Menge größer als 1 war, und jetzt können wir natürlich
den Rest der Daten behalten.
Also behalten wir den Produktpreis hier, wir behalten den Produkttitel, dass sich nicht alles ändert, die Summe
ändert sich jedoch natürlich und das ist
die Summe, die alte Summe abzüglich des Preises natürlich, also
abzüglich des Produktpreises, weil wir einen entfernt haben Artikel müssen wir die Summe um den Preis eines Artikels reduzieren.
Jetzt muss dieser aktualisierte Warenkorbartikel den aktuellen Artikel in unserem Warenkorbartikelobjekt ersetzen. Damit wir auch etwas Code wiederverwenden können, werde ich dies
tatsächlich ein wenig ändern und aktualisierte Warenkorbelemente hier als Variable anstelle einer
Konstante hier im else-Block erstellen, so dass ich nur diesen Variablenwert aktualisiere, so dass hier in
Im if-Block
können wir auch denselben Variablennamen verwenden, aktualisierte Warenkorbartikel, bei denen ich dies gleich einer Kopie der
vorhandenen Artikel setze, aber dann meine Aktions-PID hier ersetze, also meine Produkt-ID, meine Kennung, den Wert dort durch den aktualisierter Warenkorbartikel, der mein alter
Warenkorbartikel mit der aktualisierten Menge und Summe ist. Das sind die aktualisierten Warenkorbartikel. Jetzt müssen
wir
natürlich auch den Gesamtbetrag unseres Status anpassen. Wenn dieser Block
blockiert ist, geben wir eine Kopie des Status zurück. Artikel können auf aktualisierte Warenkorbartikel eingestellt werden Der
Gesamtbetrag kann so eingestellt werden,
dass der Gesamtbetrag abzüglich des Produktpreises für den ausgewählten Warenkorbartikel angegeben wird, da
genau wie ich die Summe für diesen einzelnen Warenkorbartikel aktualisiert habe, die Gesamtsumme des Warenkorbs natürlich
auch als solche neu angepasst werden muss. Jetzt können wir versuchen, diese Aktion zum Entfernen aus dem Warenkorb zu versenden.
Gehen wir also zum Warenkorbbildschirm, auf dem ich am Ende diese Funktion zum Entfernen habe, und
dort möchte ich jetzt eine Aktion auslösen, sodass
ich mithilfe des Verwendungshakts Zugriff auf die Versandfunktion benötigen werde. Wir können das jetzt hier oben verwenden, um Zugriff darauf zu erhalten, indem wir einfach den Versand wie folgt
verwenden und diesen dann dort unten versenden.
Der Versand importiert jetzt alle Aktionen, die wir benötigen. Importieren Sie also alles als Warenkorbaktionen aus dem Speicherordner, aus dem Aktionskorb wie diesem. Wenn Sie diesen gebündelten
Import verwenden, der völlig optional ist, können Sie auch auf die spezifischen Dinge abzielen, die Sie
benötigen Aktionsersteller, in
diesem Fall das Entfernen aus dem Warenkorb, das wir benötigen würden, und dann
dort unten, führen Sie diesen Aktionsersteller einfach
aus, in meinem Fall mithilfe von Warenkorbaktionen. removeFromCart, leiten Sie die Produkt-ID weiter, die wir natürlich hier
erhalten, es ist itemData. Artikel.
und denken Sie jetzt daran, dass wir Artikel dieser Form durchlaufen, sodass wir dort ein Produkt-ID-Feld
haben und dieses hier verwenden können, um es aus dem Warenkorb zu entfernen. Dies sollte
uns hoffentlich eine Aktualisierung ermöglichen Dies. Und das sollte alles sein. Redux
sollte den Rest hinter den Kulissen erledigen und den Warenkorbbildschirm automatisch neu rendern, wenn sich
der Warenkorb ändert, also immer dann, wenn wir Artikel entfernen. Also habe ich zwei rote Hemden und einen blauen Teppich hinzugefügt und wenn
ich ein
rotes Hemd entferne, ist ein Problem, das wir haben, die Bestellschalter. Wir müssen
das beheben, aber Sie sehen, dass die Menge korrekt aktualisiert wurde.
Wenn ich dies jetzt entferne, wird auch der Gesamtbetrag korrekt aktualisiert. Wenn ich dies jetzt entferne, ist es tatsächlich vollständig verschwunden
und jetzt ist dies auch deaktiviert.
Das funktioniert also im Allgemeinen, aber natürlich wird die Reihenfolge geändert,
das möchte ich hier nicht tun.
Um zu vermeiden, dass die Reihenfolge wechselt, können wir einfach zum Warenkorbbildschirm gehen, auf dem ich meine Artikel in ein Array umwandle.
Dort müssen wir nur sicherstellen, dass dieses Array immer auf die gleiche Weise sortiert ist, da dieser Selektor
immer neu sortiert wird Lösen Sie unsere Daten aus und rufen Sie sie erneut ab, wenn sich unser Redux-Status ändert.
Daher erhalten wir hier immer den neuesten Datenschnappschuss, den wir dort haben, und daher müssen wir
ihn hier immer nur auf die gleiche Weise sortieren und ihn daher immer auf die
gleiche Weise rendern.
Wir müssen also nur sicherstellen, dass unser Array für transformierte Warenkorbartikel sortiert ist, indem wir dort sort aufrufen.
Wenn ich es so nenne, füge ich hier einige Daten hinzu. Jetzt sehen Sie, dass dies
allein nicht ausreicht, weil wir ihm nicht sagen, wie er sortiert werden
soll, und er nicht weiß, wie er dies für Objekte aus tun soll Das Feld, aber wir können
eine Funktion zum Sortieren übergeben, bei der wir immer zwei Elemente, a und b, miteinander vergleichen
und dann sortieren, muss am Ende eine Zahl zurückgegeben
werden, die bestimmt, was zuerst kommt,
und da können Sie dies natürlich sortieren Sie möchten, zum Beispiel nach Produkt-ID, damit wir einfach einen Vergleich zurückgeben können, bei dem wir die Produkt-ID von
A überprüfen, diese mit der Produkt-ID von B vergleichen und wenn sie größer ist, habe ich mit einem ternären Ausdruck
hier einen zurückgegeben, andernfalls gebe ich minus eins zurück .
Dies ist die normale Sortierfunktion, mit der Javascript geliefert wird, und dies stellt jetzt
sicher, dass
wir immer auf die gleiche Weise sortieren. Wenn Sie dies entfernen, bleibt der rote Kurzschluss an seiner Stelle und daher ist unsere Warenkorblogik fertig.
Jetzt können wir sicherstellen, dass wir tatsächlich auch auf diese Schaltfläche "Jetzt bestellen" klicken können, und wir fügen diese als Bestellung hinzu,
die wir anschließend mit der hilfreichen Schublade hier besuchen können, die es uns ermöglicht, zum Bestellbildschirm zu gelangen, den wir
natürlich auch noch nicht haben hinzufügen.