1 00:00:02,260 --> 00:00:08,030 Um sicherzustellen, dass wir auch Bestellungen in dieser Anwendung haben können, wiederholen wir etwas, was 2 00:00:08,050 --> 00:00:13,940 wir zuvor getan haben, arbeiten am Bestellbildschirm und arbeiten an unserer Redux-Logik, damit wir Bestellungen speichern können. 3 00:00:14,020 --> 00:00:15,980 Also füge ich 4 00:00:16,060 --> 00:00:22,060 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 5 00:00:22,060 --> 00:00:26,280 der wir unsere auftragsbezogenen Aktionen, die Aufträge, verwalten. js Datei auch. 6 00:00:27,010 --> 00:00:33,910 Beginnen wir also mit den Bestellungen. js reducers file hier und wieder wie immer, wir wollen 7 00:00:33,910 --> 00:00:41,020 hier einen Anfangszustand haben, der auch definiert, wie unsere Daten dort geformt werden und Bestellungen werden in dieser Anwendung wirklich einfach 8 00:00:41,020 --> 00:00:42,640 sein, es wird nur 9 00:00:42,640 --> 00:00:46,660 eine Reihe von Bestellungen sein Das ist wirklich alles was wir brauchen. 10 00:00:47,390 --> 00:00:53,630 Dann können wir hier eine Standardfunktion exportieren, die unser Reduzierer ist, der natürlich einen Zustand hat, der mit 11 00:00:53,630 --> 00:01:00,830 dem Anfangszustand initialisiert ist, der eine Aktion empfängt und der natürlich alle von Redux behandelt wird, und wir geben unseren Zustand 12 00:01:00,830 --> 00:01:01,520 hier 13 00:01:01,520 --> 00:01:07,580 zurück, aber natürlich normalerweise Wir möchten dann auch den Aktionstyp einschalten und hier einige verschiedene Fälle behandeln, 14 00:01:08,300 --> 00:01:13,350 damit wir diese switch-Anweisung bereits hinzufügen können. In Bezug auf die Fälle, die 15 00:01:13,380 --> 00:01:19,130 wir behandeln möchten, die Aktionen, die wir behandeln möchten, gibt es eine Aktion, die ich 16 00:01:19,130 --> 00:01:26,500 jetzt bearbeiten möchte, und das sind meine Aktionen zum Hinzufügen von Aufträgen. Das Hinzufügen von Aufträgen sieht also auch 17 00:01:26,510 --> 00:01:34,390 wie eine passende Kennung aus, und dann exportiere ich meine Fügen Sie hier den Ersteller der Bestellaktion hinzu, der jetzt zwei 18 00:01:34,910 --> 00:01:40,450 Dinge erhalten soll - meine Warenkorbartikel oder die Artikel, die Teil der Bestellung sind, 19 00:01:40,550 --> 00:01:47,180 aber dies sind meine Warenkorbartikel am Ende und natürlich der Gesamtbetrag, und das sind natürlich alle Daten, 20 00:01:47,180 --> 00:01:52,550 die wir im Warenkorb haben Am Ende schaffen wir es im Wagen, oder? 21 00:01:52,550 --> 00:01:58,760 Wir haben eine Gesamtmenge des Warenkorbs und wir haben die Artikel des Warenkorbs. Da wir unseren gesamten Warenkorb 22 00:01:58,760 --> 00:02:03,380 bestellen, ist es natürlich sinnvoll, dass diese Daten in der Bestellung landen. 23 00:02:03,520 --> 00:02:08,900 Jetzt hier im Aktionsersteller geben wir daher unser neues Aktionsobjekt zurück. 24 00:02:08,900 --> 00:02:17,240 Dieses Aktionsobjekt hat den Typ Bestellung hinzufügen und dann beispielsweise einen Bestelldatenschlüssel, in dem wir unsere Warenkorbartikel zusammenführen, in 25 00:02:17,240 --> 00:02:23,270 einer Warenkorbartikel-Eigenschaft speichern und dann den Betrag angeben hält zum Beispiel den Gesamtbetrag. 26 00:02:23,270 --> 00:02:29,660 Jetzt liegt es an Ihnen, ob Sie dies in einer zusammengeführten Auftragsdateneigenschaft übergeben oder ob Sie zwei 27 00:02:30,140 --> 00:02:33,690 oder mehr Eigenschaften als Teil Ihres Aktionsobjekts haben. 28 00:02:33,720 --> 00:02:37,710 Dies ist die Aktion, zurück zum Reduzierer. Was soll passieren, wenn wir eine Bestellung erhalten? 29 00:02:38,580 --> 00:02:45,040 Nun, ich möchte ein neues Bestellobjekt erstellen und dafür werde ich nach wie vor mit meinen eigenen Modellen arbeiten. 30 00:02:45,090 --> 00:02:52,110 Gehen wir also zum Modellordner und fügen dort eine Bestellung hinzu. js-Datei, in der wir eine Klassenreihenfolge haben, die ich exportieren werde, 31 00:02:52,110 --> 00:02:52,800 damit 32 00:02:52,830 --> 00:02:58,890 ich dies nicht wieder vergesse. Dort erhalten wir einen Konstruktor, mit dem wir eine neue Reihenfolge erstellen können. 33 00:02:58,890 --> 00:03:04,700 Wie soll nun eine Bestellung aussehen? Eine Bestellung sollte natürlich eine ID haben, die 34 00:03:04,770 --> 00:03:10,970 nicht die Produkt-ID ist, da wir natürlich dasselbe Produkt mehrmals bestellen können und daher eine Bestellung vollständig getrennt ist. 35 00:03:11,040 --> 00:03:13,650 Darüber hinaus kann eine Bestellung mehr als ein 36 00:03:13,650 --> 00:03:16,380 Produkt enthalten. Am Ende bestellen wir dort unseren gesamten Warenkorb. 37 00:03:16,380 --> 00:03:18,570 Die Bestellung hat also eine eigenständige 38 00:03:18,750 --> 00:03:26,160 ID, sie erhält die Artikel, den Gesamtbetrag und eine Bestellung benötigt natürlich auch ein Datum, denn wenn wir eine Bestellung aufgeben, 39 00:03:26,160 --> 00:03:29,430 möchten wir dieses Datum speichern, als sie gemacht wurde. 40 00:03:29,940 --> 00:03:31,500 Und dann werde ich all 41 00:03:31,500 --> 00:03:42,160 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 42 00:03:42,170 --> 00:03:49,310 wir mit den Bestellungen dort machen können. Dort möchte ich jetzt den Fall des Hinzufügens von 43 00:03:49,340 --> 00:03:53,260 Aufträgen behandeln, der die einzige Aktion ist, die ich habe. 44 00:03:53,270 --> 00:04:01,140 Sie müssen diese Aktionskennung natürlich importieren und dort möchte ich eine neue Bestellung erstellen, sie in einer 45 00:04:01,160 --> 00:04:01,820 neuen 46 00:04:01,820 --> 00:04:07,960 Bestellkonstante mit dem soeben erstellten Bestellmodell speichern, das Sie daher auch importieren müssen. 47 00:04:08,030 --> 00:04:14,030 Mit dem neuen Schlüsselwort können wir jetzt ein neues Javascript-Objekt basierend auf dieser Klasse erstellen. Dort benötigen wir 48 00:04:14,180 --> 00:04:17,330 die ID, die Elemente, den Gesamtbetrag und das Erstellungsdatum. 49 00:04:17,330 --> 00:04:23,040 Jetzt erhalten wir hier nur noch die Artikel und den Gesamtbetrag als Teil unserer Aktion, wie Sie sehen können. 50 00:04:23,240 --> 00:04:28,630 Jetzt ist die ID etwas, das wir später dynamisch auf einem Server 51 00:04:28,640 --> 00:04:36,530 generieren werden. Im Moment verwende ich eine pseudo-eindeutige Dummy-ID mit neuem Datum für die Zeichenfolge. Das Datum ist natürlich 52 00:04:36,560 --> 00:04:42,140 ein integriertes Javascript-Objekt und wird letztendlich generiert eine ID, die irgendwie einzigartig ist. 53 00:04:42,140 --> 00:04:48,230 Technisch gesehen könnten wir zwei Bestellungen mit genau demselben Zeitstempel und genau derselben Millisekunde erstellen. In unserer App, in der 54 00:04:48,230 --> 00:04:52,340 wir den Warenkorb löschen, nachdem wir auf Bestellung hinzufügen oder jetzt bestellen geklickt haben, 55 00:04:52,340 --> 00:04:54,230 ist dies jedoch nicht möglich. 56 00:04:54,230 --> 00:04:57,470 Dies ist also im Moment eine gute Dummy-ID. Es sollte sich um 57 00:04:57,470 --> 00:04:59,050 eine Zeichenfolge handeln, die wichtig 58 00:05:00,110 --> 00:05:06,170 ist, und darüber hinaus natürlich die Elemente, die gespeichert werden können. Wir bekommen dies auf unsere Aktion, richtig, 59 00:05:06,170 --> 00:05:10,770 die Aktion hat diese Bestelldateneigenschaft und dort haben wir die Artikel. 60 00:05:11,060 --> 00:05:16,580 Also Aktionsauftragsdaten. Artikel gibt uns die Artikel und für den Gesamtbetrag können wir 61 00:05:16,580 --> 00:05:17,280 Aktion verwenden. 62 00:05:17,330 --> 00:05:20,250 Bestelldaten. 63 00:05:20,450 --> 00:05:23,810 und dann haben wir dort diese Mengeneigenschaft, die wir extrahieren können, 64 00:05:23,810 --> 00:05:25,650 damit wir sie dort verwenden können. 65 00:05:25,850 --> 00:05:31,700 Last but not least für das Datum möchte ich hier natürlich einen Zeitstempel mit neuem 66 00:05:31,700 --> 00:05:37,730 Datum generieren. Dieser integrierte Javascript-Konstruktor gibt uns am Ende den aktuellen Zeitstempel, der in einem Javascript-Objekt 67 00:05:37,940 --> 00:05:41,060 gespeichert ist, wenn wir ihn so ausführen. 68 00:05:41,060 --> 00:05:46,700 Jetzt muss diese neue Bestellung nur noch zu unserem Bestellarray hinzugefügt werden, sodass wir hier einen neuen Status-Snapshot 69 00:05:47,000 --> 00:05:48,960 zurückgeben, in dem wir den alten 70 00:05:49,010 --> 00:05:53,650 Status kopieren. Auch hier haben wir keinen anderen Status, sodass das Kopieren überflüssig ist, wenn 71 00:05:53,750 --> 00:05:55,410 wir ihn ersetzen Es 72 00:05:55,460 --> 00:06:01,160 ist sowieso so, aber falls Sie hier einen komplexeren Status-Snapshot für dieses Segment Ihres Redux-Speichers hatten, sollten Sie sicherstellen, 73 00:06:01,160 --> 00:06:04,550 dass Sie den anderen Status kopieren, damit Sie ihn nicht verlieren. 74 00:06:04,550 --> 00:06:11,510 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 75 00:06:11,510 --> 00:06:17,450 handelt es sich um eine integrierte Javascript-Funktion, die einem Array ein neues Element hinzufügt und ein neues Array zurückgibt, das 76 00:06:17,450 --> 00:06:18,530 dieses Element enthält. 77 00:06:18,560 --> 00:06:24,040 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 78 00:06:24,040 --> 00:06:29,450 zu aktualisieren, wobei wir niemals die ursprünglichen Daten berühren, sondern den neuen Status festlegen, indem wir ein brandneues Array erstellen, 79 00:06:29,450 --> 00:06:36,590 das das neue Objekt und enthält dort verkette ich einfach meine neue Bestellung. Damit können 80 00:06:36,770 --> 00:06:45,590 wir zur App gehen. js Datei und importieren Sie den Auftragsreduzierer dort aus dem 81 00:06:45,590 --> 00:06:52,040 Speicherordner, dem Reduzierungsordner und dort den Bestellungen. js Datei natürlich und füge das in 82 00:06:52,100 --> 00:06:57,750 unseren Root-Reduzierer ein, vielleicht mit einer Auftragskennung und zeige dann auf den Auftragsreduzierer. 83 00:06:57,780 --> 00:07:04,160 Jetzt sollte dies verfügbar sein und jetzt können wir Aktionen versenden, nämlich hier unsere Aktion zum Hinzufügen von Bestellungen 84 00:07:04,230 --> 00:07:11,740 und natürlich auf diese Statusscheibe tippen und unsere Bestellungen abrufen. Das Versenden von Aktionen ist das erste, was ich 85 00:07:11,740 --> 00:07:18,220 tun möchte. Ich möchte dies über den Warenkorbbildschirm tun, wenn wir auf diese Schaltfläche "Jetzt bestellen" klicken. 86 00:07:18,220 --> 00:07:19,990 Im Moment machen wir dort nichts, 87 00:07:20,020 --> 00:07:26,790 jetzt ist das Ziel, eine Bestellung aufzugeben und auch unseren Warenkorb zu räumen. Hier im Warenkorbbildschirm importieren wir also 88 00:07:26,800 --> 00:07:33,270 bereits den Versand und führen ihn aus, damit wir die Versandfunktion haben. 89 00:07:33,340 --> 00:07:45,490 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 90 00:07:45,520 --> 00:07:50,140 sehr genau benennen. Wenn wir jetzt auf 91 00:07:50,290 --> 00:07:57,450 diese Schaltfläche, diese Schaltfläche "Jetzt bestellen" klicken, können wir eine ausführen Funktion 92 00:07:57,450 --> 00:08:05,500 und in dieser Funktion versenden wir eine Redux-Aktion, die Order-Aktion, fügen Bestellung mit diesem 93 00:08:05,580 --> 00:08:10,500 Action-Ersteller hinzu. Jetzt müssen wir zwei Dinge übergeben - die Warenkorbartikel und den Gesamtbetrag. Natürlich ist beides hier 94 00:08:10,500 --> 00:08:16,680 verfügbar, der Gesamtbetrag wird in der Konstanten des Gesamtbetrags des Warenkorbs gespeichert, der Warenkorbartikel ist dies 95 00:08:16,680 --> 00:08:23,580 hier, also leiten wir dies einfach weiter, wir leiten den Gesamtbetrag des Warenkorbs weiter und das sollte das 96 00:08:23,580 --> 00:08:32,420 zweite Argument sein, also eigentlich als erstes Argument die Warenkorbartikel, so. Bitte beachten Sie, dass ich damit natürlich Warenkorbartikel weitergebe. Ich speichere 97 00:08:32,430 --> 00:08:37,620 Warenkorbartikel, die sich im Array befinden und nicht in dem Format, das ich in 98 00:08:37,620 --> 00:08:40,310 meinem Warenkorb-Redux-Shop habe. Dort habe ich 99 00:08:40,380 --> 00:08:48,130 zwar ein Objekt, aber das Speichern eines solchen Arrays von Warenkorbartikeln in einer Bestellung sollte eigentlich in Ordnung 100 00:08:48,130 --> 00:08:48,900 sein, 101 00:08:48,970 --> 00:08:52,500 sodass ich dieses unveränderte Objekt nicht unbedingt erhalten 102 00:08:52,510 --> 00:08:53,340 muss. Ich 103 00:08:53,340 --> 00:08:56,690 bleibe bei dem Array, das ich jetzt speichere. 104 00:08:56,720 --> 00:08:58,460 Jetzt versenden wir dies, um es 105 00:08:58,460 --> 00:09:00,860 anzuzeigen, müssen wir jetzt natürlich einen Bestellbildschirm hinzufügen, und 106 00:09:00,980 --> 00:09:06,140 dafür möchte ich auch eine Menüschaltfläche und eine Schublade hinzufügen, die es uns ermöglichen, als Alternative zu unseren 107 00:09:06,140 --> 00:09:07,520 Shop-Bildschirmen hierher zu gelangen.