Für die Funktion zum Hinzufügen zum Warenkorb müssen wir an zwei Dingen
arbeiten: Zum einen können wir einen Warenkorbbildschirm haben, hier in
unserer Kopfzeile befindet sich ein Symbol, das uns zum Warenkorbbildschirm führt, auf dem wir sehen können die Gesamtsumme und die Warenkorbartikel und
wo wir diese Schaltfläche "Jetzt bestellen" haben, aber ich würde
sagen, dass dies der zweite Schritt ist, da der wichtigere erste Schritt darin besteht, die Logik zum
Verwalten von Warenkorbartikeln hinzuzufügen, und dies beinhaltet Redux. Dazu füge ich einen brandneuen Reduzierer
hinzu, einen zweiten Reduzierer, den ich Wagen, Wagen nenne. js und auch eine Aktionsdatei und dies ist nun tatsächlich
eine Aktionsdatei, die wir füllen werden.
Wir werden das später auch mit der Produktdatei tun,
sobald wir uns mit dem Hinzufügen von Produkten usw. befassen. Beginnen wir jedoch zunächst mit der Warenkorbfunktion. Also hier im
Wagen. js-Datei im Reduzierungsordner,
ich werde meinen Anfangszustand für dieses Warenkorb-Slice einrichten und wieder sind es all diese
separaten Reduzierungen und die Zustände, aus denen sie diesen gesamten Redux-Speicher bilden, denn am
Ende kombinieren Sie das hier mit kombinierten Reduktionen in einen Wurzelreduzierer und einen großen Zustand am Ende.
Wir haben nur diese einzelnen Unterzustände, um die Verwaltung der Daten zu vereinfachen.
Wie sollte der Zustand unseres Wagens hier im Wagenreduzierer aussehen?
Nun, unser Einkaufswagen wird eine Reihe von Artikeln haben, könnte ein Array und eine Summe sein, die anfänglich Null ist. Ein Gesamtbetrag, den Sie sagen könnten,
könnten Sie natürlich auch diesen Gesamtbetrag nennen, vielleicht um wirklich klar zu machen,
was dies ist.
Das sind also die beiden Dinge, die meinen Einkaufswagen hier ausmachen, und
wie immer kann ich das nicht genug betonen, es gibt mehr als einen Weg, dies umzusetzen. Wenn Sie also auch hier einige andere Daten verwalten möchten,
tun Sie dies auf jeden Fall.
Es gibt
keinen einzigen richtigen oder falschen Ansatz. Dies ist
nur mein Ansatz zum Erstellen dieser App.
Jetzt ist es wichtig, dass ich für diesen Warenkorb hier sicherstellen möchte, dass, wenn wir bereits einen
Artikel im Warenkorb haben, sagen wir das rote Hemd und ich ein
zweites Mal auf den Warenkorb klicke, ich diesem Array keine zwei Artikel hinzufüge, aber Ich habe immer noch nur einen Artikel darin und stattdessen
sollte jeder Artikel in diesem Artikelarray ein Objekt sein, in dem ich wie die ID des Produkts verwalte, wo ich den Titel
und die Menge des Artikels im Warenkorb habe, damit
das dann Wechseln Sie zu 2, wenn ich ein zweites Mal darauf klicke.
Daher könnte man auch argumentieren, dass Elemente möglicherweise kein Array, sondern möglicherweise ein Javascript-Objekt sein sollten, da wir so die ID des Produkts als Schlüssel
speichern können und der Wert ein Objekt mit dem Titel, mit der Menge, mit sein könnte
der Preis und das ist nur eine Alternative, Sie könnten dies
alles auch mit
einem Array tun, aber das ist eigentlich der Ansatz, den ich verwenden werde.
Jetzt ist der Reduzierer, den ich exportiere, daher ein Reduzierer, der natürlich einen Zustand
erhält, der unseren Anfangszustand als Standardwert hat, und eine Aktion als Argument, die am Ende einige Daten zurückgeben muss.
Am Ende muss also ein neuer Status zurückgegeben werden, der dann von Redux verwendet wird.
Jetzt brauchen wir eine Aktion, um fortzufahren.
Also exportiere ich hier eine Konstante, eine Aktionskennung und benenne diese zum Warenkorb hinzufügen, die Kennung liegt bei Ihnen,
ich gehe mit dem Hinzufügen zum Warenkorb wie folgt und in der Aktionsdatei werde ich eine solche
erstellen Action Creator-Funktion.
Also hier eine weitere
Konstante, die ich zum Warenkorb hinzufügen werde, die beispielsweise das vollständige Produktobjekt erhält, das ich hinzufügen möchte, damit ich die benötigten
Informationen abrufen kann, und dann müssen wir hier ein solches Aktionsobjekt zurückgeben, das hat
einen Typ, der in den Warenkorb gelegt wird und dann unser Produkt.
Dies ist nur eine Möglichkeit, diese Aktionen zu erstellen, die es uns sehr einfach macht, dies innerhalb unserer
Komponenten zu tun.
Am Ende, im Wagenreduzierer, in allen Reduzierern tatsächlich, aber an dem Wagenreduzierer, an dem wir uns interessieren, erhalten
wir
diese Aktion zum Hinzufügen zum Wagen. Daher müssen wir hier den Aktionstyp wechseln und den Fall behandeln, in dem er hinzugefügt wird in den Warenkorb und
daher sollten Sie den Warenkorb
aus diesem Aktionsordner und dort aus der Warenkorbdatei importieren. Übrigens, diese Aktion, wenn sie versendet wird, wird
auf allen Reduzierern empfangen. Wenn Sie sie jedoch nicht mit einem separaten Fall behandeln,
wird Ihr Standardfall aktiviert, der normalerweise nur Ihr aktuelles Status-Slice für diesen Reduzierer zurückgeben sollte bedeutet, dass die Zustandsscheibe
für diesen Reduzierer unverändert ist. Hier jedoch im Wagenreduzierer
möchte ich natürlich meinen Status ändern, daher
kann ich hier und
jetzt im Wagenkorb hinzufügen, was soll
dort passieren?
Nun, wir bekommen unser hinzugefügtes Produkt, wir können das aus der Aktion herausziehen, weil wir dort in der Aktion einen Produktschlüssel haben,
den wir
gerade hier im Aktionswagen eingerichtet haben. js-Datei, dann bekomme ich unser Produkt
und speichere es in einem konstanten, hinzugefügten Produkt, mit dem wir jetzt arbeiten können,
und wir haben hier unseren Produktpreis, der natürlich hinzugefügt wird. Preis und wir haben unseren Produkttitel,
der hinzugefügt wirdProdukt. Titel. Bevor wir fortfahren, definieren wir, wie der
Warenkorbartikel aussehen soll. Wie wir hier speichern, sollte also der Wert sein, den wir dort haben.
Also gehe ich zu meinem Modellordner und füge einen Warenkorb hinzu. js Datei hier und fügen Sie dann eine Warenkorb-Artikelklasse
hinzu, die einen Konstruktor erhält,
und bevor ich sie wieder vergesse, die hier und jetzt in diesem Konstruktor exportiert
werden muss, erwarte ich, die Menge des Produkts zu erhalten, das wir hinzufügen möchten, das Produktpreis,
Produkttitel und die Summe für diesen Artikel. Wenn wir das Dreifache des roten Hemdes haben, wäre unsere Summe das Dreifache von
29. 99,
also ungefähr 90 Dollar.
Was ich hier nicht bekomme, ist die Produkt-ID, da ich diese als Schlüssel in meinem Objekt hier verwenden werde, welche Elemente enthalten sind,
und dann klarer wird, sobald wir sie implementieren.
Hier im Warenkorb speichere ich
einfach alle Daten, die ich erhalte, Menge, Produktpreis und
ich habe dort die Daten, die ich später ausgeben muss, also Produkttitel und die Summe, wie diese und jetzt wieder im
Reduzierer. Natürlich können wir diese Warenkorb-Artikelklasse aus dem Modellordner und aus dem Warenkorb-Artikel
hier und jetzt wieder in den Warenkorb-Fall importieren. Zunächst müssen wir herausfinden,
ob dieses Produkt bereits Teil unserer Artikel ist.
Wie bereits erwähnt, füge ich jedes neue Produkt hinzu, indem ich Artikeln, die die ID dieses Produkts darstellen, einen neuen Schlüssel
hinzufüge. Da dies eindeutig
ist, haben wir jeden Schlüssel immer nur einmal und der Wert ist dann wie folgt ein Warenkorbartikel definiert
es in Modellen und daher weiß ich, ob die ID des Produkts, das ich hier erhalte, bereits ein
Schlüssel für Artikel ist, dann hat dies bereits unseren Artikel als Warenkorbartikel.
Hier können wir also einfach überprüfen, ob Artikel für das hinzugefügte Produkt vorhanden sind. ID ist vorhanden. Wenn dies also etwas Wahres zurückgibt,
also nicht undefiniert, haben wir den Artikel bereits im Warenkorb, was in Ordnung ist, aber dann müssen wir nur die
Menge ändern, andernfalls müssen
wir einen brandneuen Artikel hinzufügen.
Beginnen wir also mit dem Fall else, da dies der Fall ist,
auf den wir
zum ersten Mal stoßen, wenn wir zum ersten Mal etwas hinzufügen. Dort benötigen
wir einen neuen Warenkorbartikel. Ich erstelle diesen mit dem neuen Schlüsselwort und der von mir definierten Warenkorbartikelklasse , wir
müssen die Menge angeben, die natürlich
eine ist, wenn wir nur einen neuen Artikel hinzufügen, wir müssen den Produktpreis, den Produkttitel hier und die Summe angeben und die Summe
ist natürlich zunächst nur unser Produktpreis, oder?
Denn wenn wir einen Artikel dieses Preises hinzufügen, ist die Summe für diesen Warenkorbartikel unser Produktpreis, und jetzt muss
dieser neue Warenkorbartikel hier zu unseren Warenkorbartikeln hinzugefügt werden.
Hier geben wir also eine Kopie unseres Status zurück und
setzen Elemente gleich einem neuen Objekt, in das ich alle meine vorhandenen Statuselemente kopiere, sodass ich mein vorhandenes
Elementobjekt hier
kopiere und dann einen neuen Schlüssel mit dieser dynamischen Syntax mit hinzufüge die eckigen
Klammern, in denen der Schlüsselname hinzugefügt wirdProdukt. ID, das habe ich gemeint, wobei die ID des Produkts der Schlüssel
in unserem Artikelobjekt ist und der Wert unser neuer Warenkorbartikel ist.
Dies ist nur eine Syntax, die Sie kennen müssen. Es ist Vanille-Javascript. Auf diese Weise können Sie hier oben eine dynamische
Eigenschaft hinzufügen oder darauf zugreifen, anstatt sie hier als Zeichenfolge fest zu codieren. Übrigens sollte dies hier oben
natürlich auch staatlich sein. Artikel, mein Fehler. Daher sollten wir hier einen neuen Warenkorbartikel hinzufügen.
Wenn Sie bereits einen Artikel im Warenkorb haben, erstellen wir natürlich keinen
neuen Warenkorbartikel, sondern möchten den vorhandenen Artikel aktualisieren. Also werde ich meinen aktualisierten Warenkorbartikel hier haben
und dafür erstelle ich immer noch einen neuen Warenkorbartikel, aber
ich werde ihn mit einigen vorhandenen Daten vorab füllen, zum Beispiel der Menge hier. Wir erhalten das von Statusartikeln für die ID des hinzugefügten Produkts, da dies bereits Teil der Statusartikel
sein sollte. Wir überprüfen dies hier und dies wird natürlich einen Mengenschlüssel haben, da ein
solcher Artikel hier in meinen Artikeln nur von ist Geben Sie Warenkorbartikel ein, damit er eine Mengeneigenschaft
hat, und
wir fügen einfach eine hinzu, da wir einen neuen Warenkorbartikel
hinzufügen. Daher müssen wir diesen Wert erhöhen. Jetzt nimmt Warenkorbartikel als zweites Argument den Produktpreis. Da wir die App dann so
erstellen werden, dass sich der Preis nie ändert, was hier viel Komplexität verursachen
würde, müssten wir den Warenkorb in diesem Fall auf eine völlig andere Weise verwalten und
jeden Warenkorbartikel als speichern Liste der Transaktionen für diesen Warenkorbartikel, die hierfür zu viel sind.
Da sich dies also nie ändert, da sich der Preis nie ändert, können wir am Ende einfach den
Produktpreis nehmen, den wir erhalten, oder den vorhandenen Preis, den wir zuvor gespeichert haben, da sich dies wiederum nie ändern wird.
Der Titel könnte sich ändern und ich möchte den neuesten Titel hier speichern, also nehme
ich definitiv das Produkt, das wir hier bekommen, anstelle meines alten Schnappschusses und
nicht zuletzt den letzten Wert hier, meine Gesamtsumme Für diesen Warenkorbartikel ist das natürlich
die aktuelle Summe, daher greife ich hier auf Statusartikel für die ID zu, Summe plus Produktpreis, da wir hier einen neuen Artikel hinzufügen, müssen
wir den Preis mal 1 zur aktuellen Summe hinzufügen. Das ist der aktualisierte
Warenkorbartikel.
Damit können wir unser neues Status-Slice hier zurückgeben, indem wir die alten Status kopieren und Elemente gleich und jetzt wichtig auf ein
Objekt setzen, in das wir den Status kopieren. Artikel, aber wo wir jetzt wieder addedProduct setzen. ID und ja, das gibt es bereits,
aber damit überschreiben wir es einfach mit unserem aktualisierten Warenkorbartikel, sodass wir das gleiche Update durchführen, das
wir dort unten durchführen. Jetzt, da dies jedoch
nicht alles ist, was wir tun müssen, müssen
wir auch den Gesamtbetrag ändern, da sich dies natürlich ändert.
Wenn wir also einen Artikel zum ersten Mal hinzufügen, sollte der Gesamtbetrag im Grunde genommen unser alter Gesamtbetrag sein. Geben Sie also
den Gesamtbetrag plus Produktpreis an. Dies gilt auch, wenn wir einen Artikel zu
einem vorhandenen Warenkorb hinzufügen oder wenn er bereits vorhanden ist Weil am Ende unsere Summe immer nur die alte
Summe plus der Preis ist, weil wir immer einen Artikel dieses Produkts hinzufügen,
funktioniert diese App so.
Unsere Update-Anweisung hier ist also fast
dieselbe. Das einzige, was sich hier unterscheidet, ist, wie wir diesen Warenkorb erstellen.
Daher können wir diesen Code natürlich auch wiederverwenden, ihn aus dem if else-Block verschieben und
statt hier zwei verschiedene Konstanten haben können wir eine Variable
erstellen, bevor wir die if-Anweisung eingeben, aktualisiert
oder ein neues Warenkorbelement. Dies könnte ein Name sein, da wir
nicht wissen, wie es im Voraus aussehen wird, und dann hier im if-Zweig hier setzen wir aktualisiert oder neuer Warenkorbartikel zu diesem aktualisierten
Warenkorbartikel, hier setzen wir ihn andererseits auf diesen neuen Warenkorbartikel und hier verwenden wir dann immer
den aktualisierten oder neuen Warenkorbartikel und damit haben wir hier eine Code-Wiederverwendung und
tun dies nicht Wiederhole uns, was immer gut ist. Eine weitere Randnotiz: Das Kopieren des Status hier ist
natürlich immer überflüssig, da Sie immer sowohl Elemente als auch den Gesamtbetrag festlegen.
Wenn Sie also immer nur diese beiden Felder hier haben und immer beide ändern, müssen Sie
den vorhandenen Status nicht kopieren, wenn Sie hier jemals ein anderes Datenelement in Ihr Status-Slice einfügen, das Sie hier unten
nicht ändern Sie müssen jedoch Ihren alten Status kopieren, damit Sie diese zusätzlichen Daten nicht
verlieren.
Daher werde ich diese Kopierfunktion hier belassen, obwohl wir sie hier technisch nicht
benötigen. Sollten wir jedoch jemals unseren Speicherstatus ändern, vergessen wir nicht,
sie zu kopieren, und verlieren daher Daten.
Nun, es gab eine Menge Arbeit,
mit der wir beginnen können, diese Aktion
zu versenden, und natürlich möchte ich sie aus der Produktübersicht und den Produktdetails
heraus versenden, da ich in beiden Bildschirmen Schaltflächen zum Warenkorb hinzugefügt habe.
Beginnen wir also mit dem Produktübersichtsbildschirm, um dort Redux-Aktionen zu versenden,
die wir
benötigen, um den Use Dispatch Hook hier einzuschließen. Hier können wir einfach auf diese Dispatch-Funktion zugreifen, indem wir
Use Dispatch wie folgt aufrufen und jetzt auf Hinzufügen zu klicken Wagen dort unten, wir können
unsere Aktion hier auslösen und natürlich können Sie, anstatt hier
Inline-Funktionen zu verwenden, Funktionen in
separaten Konstanten innerhalb Ihrer Funktionskomponente speichern, alternativ bleibe ich bei Inline-Funktionen für Jetzt und ich werde alle meine Aktionen
hier als Warenkorbaktionen aus dem Speicherordner und dort aus dem Aktionsordner und der Warenkorbdatei importieren.
Dies ist eine Importsyntax, die alle Exporte aus der Datei zu einem Objekt zusammenführt. Wir
haben hier nur einen Export, daher können Sie auch
auf diesen bestimmten Export abzielen. Später
werden wir mehrere Exporte durchführen, und daher werde ich diesen Ansatz verwenden.
Also hier versenden wir dann Wagenaktion.
In den Warenkorb legen und dies ist eine Funktion, die wir ausführen müssen. Dies ist unsere Funktion zum
Erstellen von Aktionen. Dies ist
ein Argument, das unser Produkt übernimmt. Am Ende müssen wir also itemData übergeben. Artikel, der nur unser Produkt ist, hier im
Produktdetailbildschirm.
Deshalb machen wir genau das Gleiche, wir importieren Use Dispatch aus React Redux, daher können wir
hier auf die Dispatch-Funktion zugreifen, indem wir Use Dispatch aufrufen und
dann für diese Schaltfläche hier in der Inline-Funktion oder in einer separaten benannten Funktion, wenn
Sie das mögen Sie
können den Versand aufrufen. Jetzt müssen wir unsere Aktionen importieren. Ich verwende
dieselbe Syntax wie zuvor, in der ich alles als Warenkorbaktionen aus dem Speicherordner, dem Aktionsordner, der Warenkorbdatei und jetzt den Warenkorbaktionen importiere Warenkorb hier und leiten Sie
das ausgewählte Produkt weiter, das unser Produkt ist, das wir hier in den Warenkorb legen möchten.
Dies löst hoffentlich Aktionen aus, bei denen der Artikel in den Warenkorb gelegt wird, aber im Moment können
wir dies natürlich nicht bestätigen.
Nun, eigentlich können wir. Sie können den React Native-Debugger starten und ich habe ihn noch
nicht verwendet, aber dort können Sie jetzt Befehl oder Steuerung t drücken, um einen neuen Tab zu öffnen, diesen
Import
hier zu
bestätigen und dann zu Ihren Apps zu gehen und dort zu öffnen das Debugging-Menü unter iOS mit Befehl D, unter
Android mit Steuerung oder Befehl M und klicken Sie auf Remote-Javascript debuggen. Jetzt wurde meine auf Port 19003 geöffnet, also habe ich den React Native-Debugger
am falschen Port
geöffnet, mich erneut ausgewählt, den Befehl T gedrückt oder T im Debugger gesteuert und 19003 ausgewählt, den für Sie in
Chrome geöffneten Port verwendet, auf Bestätigen geklickt und dies jetzt stellt hier im Debugger eine Verbindung zu Ihrer laufenden React-App her, stellen Sie sicher, dass
Sie Ihren Chrome-Debugger schließen und dann Ihre App neu laden. Jetzt sollte hier
eine Verbindung hergestellt werden, und jetzt können Sie Ihre App hier
nicht nur überprüfen, wie ich
es
zuvor erklärt habe. Nein, Sie können es auch Schauen Sie sich den Teil dort oben an und das
ist Ihr Redux-Debugger. Dort können Sie sehen, was Redux für Sie tut.
Das einzige, was Sie tun müssen, damit es funktioniert, ist die Installation eines neuen Pakets
mit npm install --save dev, da es sich um eine Entwicklungsabhängigkeit handelt, die
wir nur während der Entwicklung benötigen. Installieren Sie dort die Redux dev tools-Erweiterung und rufen Sie
Ihre App auf . js-Datei danach
und dann aus dieser
Redux dev tools-Erweiterung importieren. Sie können von dort aus Compose mit Dev-Tools importieren. Diese
Funktion übergeben Sie zum Erstellen eines Speichers als zweites Argument. Sie können
sie dort einfach so ausführen. Dies ist übrigens Code, dieser
Import und diese
Verwendung, die Sie entfernen sollten, bevor Sie Ihre App bereitstellen, da dies nur während der Entwicklung ausgeführt
werden sollte, nicht in Ihrer Produktions-App. Sie müssen dies entfernen, bevor Sie Ihre
App bereitstellen aber während der Entwicklung ist das in Ordnung. Wenn Sie dies jetzt speichern, sehen Sie tatsächlich,
dass hier in diesem Redux-Inspektor eine Initiierungsaktion ausgelöst wird. Das haben Sie vorher noch nicht gesehen.
Dies ist eine Aktion, die beim Start Ihrer App automatisch ausgelöst wird.
Wenn ich jetzt hier auf "Warenkorb" klicke, wird auch die Aktion "In
den Warenkorb" angezeigt. Jetzt können Sie hier Details zu dieser Aktion anzeigen, z. B. die damit
verbundenen Daten und Ihren Status. Hier und da sehen Sie beispielsweise diese ist mein Produktstatus und
wo ist mein Warenkorbstatus?
Nun, das fehlt natürlich, denn während wir den Reduzierer in der Aktion eingerichtet haben, in der App. js-Datei, in kombinierten
Reduzierern wird der Warenkorbstatus nicht berücksichtigt.
Importieren wir also den Wagenreduzierer von. / StoreReducers / cart und jetzt mit dem importierten können wir es
zu unserem kombinierten Reduzierungsobjekt hinzufügen und jetzt fügen wir dort ein Warenkorb-Slice hinzu, zeigen auf den Wagenreduzierer und
daher wird dies jetzt in unseren Redux-Shop aufgenommen. Wenn Sie nun darauf warten, dass dies neu geladen wird,
und erneut auf "Warenkorb" klicken, sehen Sie in dieser Aktion "In den Warenkorb hinzufügen" unter "Status", dass
jetzt ein Warenkorb-Slice vorhanden ist und jetzt ein Gesamtbetrag angezeigt wird. Sie sehen, es gibt einen Artikel
mit dem Schlüssel P1, der unser Produkt mit einer Menge von 1 ist, diesen Preis,
die Summe davon und wenn ich jetzt ein zweites Mal hier auf den Warenkorb klicke, wird eine weitere Aktion ausgelöst und wenn wir eine haben Schauen
Sie sich den Zustand nach dieser Aktion an, wir sehen jetzt, kühlen nur einen Artikel ab,
aber jetzt mit Menge zwei, Produktpreis pro Artikel ist dies, aber die
Summe ist dies.
Dies ist
das Hemd, wenn ich jetzt auch den blauen Teppich
versende, müssen wir noch einmal in den Warenkorb legen und dort im Zustand sehen wir jetzt
tatsächlich, dass zwei Gegenstände darin sind,
P1 und P2, P1 ist unverändert, aber P2 wurde nun hinzugefügt und der Gesamtbetrag sieht auch für mich gut aus.
Das scheint also zu funktionieren und so können Sie Ihren Redux-Status überprüfen, während Ihre App ausgeführt wird, ohne ihn
hier auszugeben.
Jetzt möchten wir es natürlich auch visuell ausgeben, aber dies ist eine gute Möglichkeit, mit Hilfe
des React Native-Debuggers einen Blick hinter die Kulissen Ihres Zustands zu werfen.
Jetzt schließen wir es hier, weil es die App etwas verlangsamt. Deshalb
stoppe ich hier im Debug-Menü auch mein Remote-Debugging und schließe den Inspektor hier vollständig.
Auch wieder in der App. js file, ich werde das komponieren mit dev tools hier
loswerden, damit ich es
später nicht vergesse, aber du kannst es immer hier hinzufügen oder hier lassen, während du entwickelst, damit du
in deinen Shop schauen kannst.
Der wichtigste Aspekt für uns hier
ist, dass dies zu funktionieren scheint. Wenn dies funktioniert, können wir jetzt natürlich daran arbeiten, hier eine Aktionsschaltfläche zum
Header hinzuzufügen und sicherzustellen, dass wir von dort oder mit deren Hilfe zur Warenkorbseite gehen können Aktionsschaltfläche, damit
wir auf der Warenkorbseite unsere Warenkorbinformationen ausgeben können.