Um sicherzustellen, dass wir auch Bestellungen in dieser Anwendung haben können, wiederholen wir etwas, was
wir zuvor getan haben, arbeiten am Bestellbildschirm und arbeiten an unserer Redux-Logik, damit wir Bestellungen speichern können.
Also füge ich
zunächst einen neuen Reduzierer hinzu, die Bestellungen. js-Datei, die unseren Auftragsreduzierer enthält, und natürlich benötigen wir auch eine Aktionsdatei, in
der wir unsere auftragsbezogenen Aktionen, die Aufträge, verwalten. js Datei auch.
Beginnen wir also mit den Bestellungen. js reducers file hier und wieder wie immer, wir wollen
hier einen Anfangszustand haben, der auch definiert, wie unsere Daten dort geformt werden und Bestellungen werden in dieser Anwendung wirklich einfach
sein, es wird nur
eine Reihe von Bestellungen sein Das ist wirklich alles was wir brauchen.
Dann können wir hier eine Standardfunktion exportieren, die unser Reduzierer ist, der natürlich einen Zustand hat, der mit
dem Anfangszustand initialisiert ist, der eine Aktion empfängt und der natürlich alle von Redux behandelt wird, und wir geben unseren Zustand
hier
zurück, aber natürlich normalerweise Wir möchten dann auch den Aktionstyp einschalten und hier einige verschiedene Fälle behandeln,
damit wir diese switch-Anweisung bereits hinzufügen können. In Bezug auf die Fälle, die
wir behandeln möchten, die Aktionen, die wir behandeln möchten, gibt es eine Aktion, die ich
jetzt bearbeiten möchte, und das sind meine Aktionen zum Hinzufügen von Aufträgen. Das Hinzufügen von Aufträgen sieht also auch
wie eine passende Kennung aus, und dann exportiere ich meine Fügen Sie hier den Ersteller der Bestellaktion hinzu, der jetzt zwei
Dinge erhalten soll - meine Warenkorbartikel oder die Artikel, die Teil der Bestellung sind,
aber dies sind meine Warenkorbartikel am Ende und natürlich der Gesamtbetrag, und das sind natürlich alle Daten,
die wir im Warenkorb haben Am Ende schaffen wir es im Wagen, oder?
Wir haben eine Gesamtmenge des Warenkorbs und wir haben die Artikel des Warenkorbs. Da wir unseren gesamten Warenkorb
bestellen, ist es natürlich sinnvoll, dass diese Daten in der Bestellung landen.
Jetzt hier im Aktionsersteller geben wir daher unser neues Aktionsobjekt zurück.
Dieses Aktionsobjekt hat den Typ Bestellung hinzufügen und dann beispielsweise einen Bestelldatenschlüssel, in dem wir unsere Warenkorbartikel zusammenführen, in
einer Warenkorbartikel-Eigenschaft speichern und dann den Betrag angeben hält zum Beispiel den Gesamtbetrag.
Jetzt liegt es an Ihnen, ob Sie dies in einer zusammengeführten Auftragsdateneigenschaft übergeben oder ob Sie zwei
oder mehr Eigenschaften als Teil Ihres Aktionsobjekts haben.
Dies ist die Aktion, zurück zum Reduzierer. Was soll passieren, wenn wir eine Bestellung erhalten?
Nun, ich möchte ein neues Bestellobjekt erstellen und dafür werde ich nach wie vor mit meinen eigenen Modellen arbeiten.
Gehen wir also zum Modellordner und fügen dort eine Bestellung hinzu. js-Datei, in der wir eine Klassenreihenfolge haben, die ich exportieren werde,
damit
ich dies nicht wieder vergesse. Dort erhalten wir einen Konstruktor, mit dem wir eine neue Reihenfolge erstellen können.
Wie soll nun eine Bestellung aussehen? Eine Bestellung sollte natürlich eine ID haben, die
nicht die Produkt-ID ist, da wir natürlich dasselbe Produkt mehrmals bestellen können und daher eine Bestellung vollständig getrennt ist.
Darüber hinaus kann eine Bestellung mehr als ein
Produkt enthalten. Am Ende bestellen wir dort unseren gesamten Warenkorb.
Die Bestellung hat also eine eigenständige
ID, sie erhält die Artikel, den Gesamtbetrag und eine Bestellung benötigt natürlich auch ein Datum, denn wenn wir eine Bestellung aufgeben,
möchten wir dieses Datum speichern, als sie gemacht wurde.
Und dann werde ich all
diese Daten speichern, meinen Ausweis erhalten, meine Artikel hier abrufen, den Gesamtbetrag abrufen und auch das Datum abrufen. Gehen wir damit zurück zum Reduzierer, zum Auftragsreduzierer und sehen, was
wir mit den Bestellungen dort machen können. Dort möchte ich jetzt den Fall des Hinzufügens von
Aufträgen behandeln, der die einzige Aktion ist, die ich habe.
Sie müssen diese Aktionskennung natürlich importieren und dort möchte ich eine neue Bestellung erstellen, sie in einer
neuen
Bestellkonstante mit dem soeben erstellten Bestellmodell speichern, das Sie daher auch importieren müssen.
Mit dem neuen Schlüsselwort können wir jetzt ein neues Javascript-Objekt basierend auf dieser Klasse erstellen. Dort benötigen wir
die ID, die Elemente, den Gesamtbetrag und das Erstellungsdatum.
Jetzt erhalten wir hier nur noch die Artikel und den Gesamtbetrag als Teil unserer Aktion, wie Sie sehen können.
Jetzt ist die ID etwas, das wir später dynamisch auf einem Server
generieren werden. Im Moment verwende ich eine pseudo-eindeutige Dummy-ID mit neuem Datum für die Zeichenfolge. Das Datum ist natürlich
ein integriertes Javascript-Objekt und wird letztendlich generiert eine ID, die irgendwie einzigartig ist.
Technisch gesehen könnten wir zwei Bestellungen mit genau demselben Zeitstempel und genau derselben Millisekunde erstellen. In unserer App, in der
wir den Warenkorb löschen, nachdem wir auf Bestellung hinzufügen oder jetzt bestellen geklickt haben,
ist dies jedoch nicht möglich.
Dies ist also im Moment eine gute Dummy-ID. Es sollte sich um
eine Zeichenfolge handeln, die wichtig
ist, und darüber hinaus natürlich die Elemente, die gespeichert werden können. Wir bekommen dies auf unsere Aktion, richtig,
die Aktion hat diese Bestelldateneigenschaft und dort haben wir die Artikel.
Also Aktionsauftragsdaten. Artikel gibt uns die Artikel und für den Gesamtbetrag können wir
Aktion verwenden.
Bestelldaten.
und dann haben wir dort diese Mengeneigenschaft, die wir extrahieren können,
damit wir sie dort verwenden können.
Last but not least für das Datum möchte ich hier natürlich einen Zeitstempel mit neuem
Datum generieren. Dieser integrierte Javascript-Konstruktor gibt uns am Ende den aktuellen Zeitstempel, der in einem Javascript-Objekt
gespeichert ist, wenn wir ihn so ausführen.
Jetzt muss diese neue Bestellung nur noch zu unserem Bestellarray hinzugefügt werden, sodass wir hier einen neuen Status-Snapshot
zurückgeben, in dem wir den alten
Status kopieren. Auch hier haben wir keinen anderen Status, sodass das Kopieren überflüssig ist, wenn
wir ihn ersetzen Es
ist sowieso so, aber falls Sie hier einen komplexeren Status-Snapshot für dieses Segment Ihres Redux-Speichers hatten, sollten Sie sicherstellen,
dass Sie den anderen Status kopieren, damit Sie ihn nicht verlieren.
Aus diesem Grund füge ich es hier hinzu und setze dann Aufträge, die Statusbefehlen entsprechen, und rufe jetzt concat für dieses Array auf. Hierbei
handelt es sich um eine integrierte Javascript-Funktion, die einem Array ein neues Element hinzufügt und ein neues Array zurückgibt, das
dieses Element enthält.
Das alte Array bleibt also unberührt, das neue Array wird zurückgegeben und dies ermöglicht es uns natürlich, dies auf unveränderliche Weise
zu aktualisieren, wobei wir niemals die ursprünglichen Daten berühren, sondern den neuen Status festlegen, indem wir ein brandneues Array erstellen,
das das neue Objekt und enthält dort verkette ich einfach meine neue Bestellung. Damit können
wir zur App gehen. js Datei und importieren Sie den Auftragsreduzierer dort aus dem
Speicherordner, dem Reduzierungsordner und dort den Bestellungen. js Datei natürlich und füge das in
unseren Root-Reduzierer ein, vielleicht mit einer Auftragskennung und zeige dann auf den Auftragsreduzierer.
Jetzt sollte dies verfügbar sein und jetzt können wir Aktionen versenden, nämlich hier unsere Aktion zum Hinzufügen von Bestellungen
und natürlich auf diese Statusscheibe tippen und unsere Bestellungen abrufen. Das Versenden von Aktionen ist das erste, was ich
tun möchte. Ich möchte dies über den Warenkorbbildschirm tun, wenn wir auf diese Schaltfläche "Jetzt bestellen" klicken.
Im Moment machen wir dort nichts,
jetzt ist das Ziel, eine Bestellung aufzugeben und auch unseren Warenkorb zu räumen. Hier im Warenkorbbildschirm importieren wir also
bereits den Versand und führen ihn aus, damit wir die Versandfunktion haben.
Alles, was wir daher tun müssen, ist, dass wir alles als Auftragsaktionen aus Geschäftsaktionsaufträgen importieren müssen. Daher werde ich diese Auftragsaktionen
sehr genau benennen. Wenn wir jetzt auf
diese Schaltfläche, diese Schaltfläche "Jetzt bestellen" klicken, können wir eine ausführen Funktion
und in dieser Funktion versenden wir eine Redux-Aktion, die Order-Aktion, fügen Bestellung mit diesem
Action-Ersteller hinzu. Jetzt müssen wir zwei Dinge übergeben - die Warenkorbartikel und den Gesamtbetrag. Natürlich ist beides hier
verfügbar, der Gesamtbetrag wird in der Konstanten des Gesamtbetrags des Warenkorbs gespeichert, der Warenkorbartikel ist dies
hier, also leiten wir dies einfach weiter, wir leiten den Gesamtbetrag des Warenkorbs weiter und das sollte das
zweite Argument sein, also eigentlich als erstes Argument die Warenkorbartikel, so. Bitte beachten Sie, dass ich damit natürlich Warenkorbartikel weitergebe. Ich speichere
Warenkorbartikel, die sich im Array befinden und nicht in dem Format, das ich in
meinem Warenkorb-Redux-Shop habe. Dort habe ich
zwar ein Objekt, aber das Speichern eines solchen Arrays von Warenkorbartikeln in einer Bestellung sollte eigentlich in Ordnung
sein,
sodass ich dieses unveränderte Objekt nicht unbedingt erhalten
muss. Ich
bleibe bei dem Array, das ich jetzt speichere.
Jetzt versenden wir dies, um es
anzuzeigen, müssen wir jetzt natürlich einen Bestellbildschirm hinzufügen, und
dafür möchte ich auch eine Menüschaltfläche und eine Schublade hinzufügen, die es uns ermöglichen, als Alternative zu unseren
Shop-Bildschirmen hierher zu gelangen.