1 00:00:02,220 --> 00:00:06,440 Für die Funktion zum Hinzufügen zum Warenkorb müssen wir an zwei Dingen 2 00:00:06,450 --> 00:00:09,850 arbeiten: Zum einen können wir einen Warenkorbbildschirm haben, hier in 3 00:00:09,880 --> 00:00:17,250 unserer Kopfzeile befindet sich ein Symbol, das uns zum Warenkorbbildschirm führt, auf dem wir sehen können die Gesamtsumme und die Warenkorbartikel und 4 00:00:17,250 --> 00:00:20,640 wo wir diese Schaltfläche "Jetzt bestellen" haben, aber ich würde 5 00:00:20,640 --> 00:00:26,580 sagen, dass dies der zweite Schritt ist, da der wichtigere erste Schritt darin besteht, die Logik zum 6 00:00:26,910 --> 00:00:33,030 Verwalten von Warenkorbartikeln hinzuzufügen, und dies beinhaltet Redux. Dazu füge ich einen brandneuen Reduzierer 7 00:00:33,040 --> 00:00:40,620 hinzu, einen zweiten Reduzierer, den ich Wagen, Wagen nenne. js und auch eine Aktionsdatei und dies ist nun tatsächlich 8 00:00:40,750 --> 00:00:43,280 eine Aktionsdatei, die wir füllen werden. 9 00:00:43,330 --> 00:00:45,270 Wir werden das später auch mit der Produktdatei tun, 10 00:00:45,280 --> 00:00:52,250 sobald wir uns mit dem Hinzufügen von Produkten usw. befassen. Beginnen wir jedoch zunächst mit der Warenkorbfunktion. Also hier im 11 00:00:52,250 --> 00:00:55,010 Wagen. js-Datei im Reduzierungsordner, 12 00:00:55,250 --> 00:01:00,350 ich werde meinen Anfangszustand für dieses Warenkorb-Slice einrichten und wieder sind es all diese 13 00:01:00,350 --> 00:01:05,390 separaten Reduzierungen und die Zustände, aus denen sie diesen gesamten Redux-Speicher bilden, denn am 14 00:01:05,390 --> 00:01:11,420 Ende kombinieren Sie das hier mit kombinierten Reduktionen in einen Wurzelreduzierer und einen großen Zustand am Ende. 15 00:01:11,520 --> 00:01:16,150 Wir haben nur diese einzelnen Unterzustände, um die Verwaltung der Daten zu vereinfachen. 16 00:01:16,230 --> 00:01:22,100 Wie sollte der Zustand unseres Wagens hier im Wagenreduzierer aussehen? 17 00:01:22,500 --> 00:01:31,000 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, 18 00:01:31,360 --> 00:01:35,680 könnten Sie natürlich auch diesen Gesamtbetrag nennen, vielleicht um wirklich klar zu machen, 19 00:01:35,680 --> 00:01:36,720 was dies ist. 20 00:01:36,730 --> 00:01:39,160 Das sind also die beiden Dinge, die meinen Einkaufswagen hier ausmachen, und 21 00:01:39,160 --> 00:01:45,460 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, 22 00:01:45,460 --> 00:01:47,350 tun Sie dies auf jeden Fall. 23 00:01:47,380 --> 00:01:48,480 Es gibt 24 00:01:48,490 --> 00:01:50,920 keinen einzigen richtigen oder falschen Ansatz. Dies ist 25 00:01:50,920 --> 00:01:53,330 nur mein Ansatz zum Erstellen dieser App. 26 00:01:53,410 --> 00:01:58,480 Jetzt ist es wichtig, dass ich für diesen Warenkorb hier sicherstellen möchte, dass, wenn wir bereits einen 27 00:01:58,590 --> 00:02:02,120 Artikel im Warenkorb haben, sagen wir das rote Hemd und ich ein 28 00:02:02,440 --> 00:02:09,340 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 29 00:02:09,340 --> 00:02:15,850 sollte jeder Artikel in diesem Artikelarray ein Objekt sein, in dem ich wie die ID des Produkts verwalte, wo ich den Titel 30 00:02:15,850 --> 00:02:18,940 und die Menge des Artikels im Warenkorb habe, damit 31 00:02:18,970 --> 00:02:22,630 das dann Wechseln Sie zu 2, wenn ich ein zweites Mal darauf klicke. 32 00:02:22,720 --> 00:02:31,960 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 33 00:02:32,170 --> 00:02:37,930 speichern können und der Wert ein Objekt mit dem Titel, mit der Menge, mit sein könnte 34 00:02:38,220 --> 00:02:42,420 der Preis und das ist nur eine Alternative, Sie könnten dies 35 00:02:42,470 --> 00:02:43,840 alles auch mit 36 00:02:43,840 --> 00:02:48,830 einem Array tun, aber das ist eigentlich der Ansatz, den ich verwenden werde. 37 00:02:49,180 --> 00:02:54,190 Jetzt ist der Reduzierer, den ich exportiere, daher ein Reduzierer, der natürlich einen Zustand 38 00:02:54,190 --> 00:03:00,700 erhält, der unseren Anfangszustand als Standardwert hat, und eine Aktion als Argument, die am Ende einige Daten zurückgeben muss. 39 00:03:01,150 --> 00:03:04,890 Am Ende muss also ein neuer Status zurückgegeben werden, der dann von Redux verwendet wird. 40 00:03:04,900 --> 00:03:07,210 Jetzt brauchen wir eine Aktion, um fortzufahren. 41 00:03:07,660 --> 00:03:15,610 Also exportiere ich hier eine Konstante, eine Aktionskennung und benenne diese zum Warenkorb hinzufügen, die Kennung liegt bei Ihnen, 42 00:03:15,610 --> 00:03:22,790 ich gehe mit dem Hinzufügen zum Warenkorb wie folgt und in der Aktionsdatei werde ich eine solche 43 00:03:22,780 --> 00:03:24,490 erstellen Action Creator-Funktion. 44 00:03:24,610 --> 00:03:26,620 Also hier eine weitere 45 00:03:26,650 --> 00:03:34,800 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 46 00:03:34,800 --> 00:03:40,260 Informationen abrufen kann, und dann müssen wir hier ein solches Aktionsobjekt zurückgeben, das hat 47 00:03:40,260 --> 00:03:44,730 einen Typ, der in den Warenkorb gelegt wird und dann unser Produkt. 48 00:03:44,730 --> 00:03:50,010 Dies ist nur eine Möglichkeit, diese Aktionen zu erstellen, die es uns sehr einfach macht, dies innerhalb unserer 49 00:03:50,010 --> 00:03:51,240 Komponenten zu tun. 50 00:03:51,240 --> 00:03:56,970 Am Ende, im Wagenreduzierer, in allen Reduzierern tatsächlich, aber an dem Wagenreduzierer, an dem wir uns interessieren, erhalten 51 00:03:57,310 --> 00:03:58,010 wir 52 00:03:58,020 --> 00:04:06,180 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 53 00:04:06,360 --> 00:04:07,950 daher sollten Sie den Warenkorb 54 00:04:07,950 --> 00:04:14,050 aus diesem Aktionsordner und dort aus der Warenkorbdatei importieren. Übrigens, diese Aktion, wenn sie versendet wird, wird 55 00:04:14,070 --> 00:04:19,200 auf allen Reduzierern empfangen. Wenn Sie sie jedoch nicht mit einem separaten Fall behandeln, 56 00:04:19,200 --> 00:04:26,460 wird Ihr Standardfall aktiviert, der normalerweise nur Ihr aktuelles Status-Slice für diesen Reduzierer zurückgeben sollte bedeutet, dass die Zustandsscheibe 57 00:04:26,460 --> 00:04:31,100 für diesen Reduzierer unverändert ist. Hier jedoch im Wagenreduzierer 58 00:04:31,140 --> 00:04:34,550 möchte ich natürlich meinen Status ändern, daher 59 00:04:34,710 --> 00:04:36,750 kann ich hier und 60 00:04:36,750 --> 00:04:39,660 jetzt im Wagenkorb hinzufügen, was soll 61 00:04:39,660 --> 00:04:41,240 dort passieren? 62 00:04:42,280 --> 00:04:50,720 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, 63 00:04:50,720 --> 00:04:51,750 den wir 64 00:04:51,770 --> 00:04:56,040 gerade hier im Aktionswagen eingerichtet haben. js-Datei, dann bekomme ich unser Produkt 65 00:04:56,060 --> 00:05:00,710 und speichere es in einem konstanten, hinzugefügten Produkt, mit dem wir jetzt arbeiten können, 66 00:05:01,920 --> 00:05:08,910 und wir haben hier unseren Produktpreis, der natürlich hinzugefügt wird. Preis und wir haben unseren Produkttitel, 67 00:05:08,940 --> 00:05:16,170 der hinzugefügt wirdProdukt. Titel. Bevor wir fortfahren, definieren wir, wie der 68 00:05:16,170 --> 00:05:21,460 Warenkorbartikel aussehen soll. Wie wir hier speichern, sollte also der Wert sein, den wir dort haben. 69 00:05:21,650 --> 00:05:30,550 Also gehe ich zu meinem Modellordner und füge einen Warenkorb hinzu. js Datei hier und fügen Sie dann eine Warenkorb-Artikelklasse 70 00:05:30,580 --> 00:05:32,650 hinzu, die einen Konstruktor erhält, 71 00:05:32,890 --> 00:05:39,370 und bevor ich sie wieder vergesse, die hier und jetzt in diesem Konstruktor exportiert 72 00:05:39,370 --> 00:05:46,750 werden muss, erwarte ich, die Menge des Produkts zu erhalten, das wir hinzufügen möchten, das Produktpreis, 73 00:05:47,020 --> 00:05:56,950 Produkttitel und die Summe für diesen Artikel. Wenn wir das Dreifache des roten Hemdes haben, wäre unsere Summe das Dreifache von 74 00:05:56,950 --> 00:05:58,980 29. 99, 75 00:05:59,110 --> 00:06:01,690 also ungefähr 90 Dollar. 76 00:06:01,690 --> 00:06:10,220 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, 77 00:06:10,220 --> 00:06:13,440 und dann klarer wird, sobald wir sie implementieren. 78 00:06:14,150 --> 00:06:17,690 Hier im Warenkorb speichere ich 79 00:06:17,840 --> 00:06:22,890 einfach alle Daten, die ich erhalte, Menge, Produktpreis und 80 00:06:22,900 --> 00:06:34,200 ich habe dort die Daten, die ich später ausgeben muss, also Produkttitel und die Summe, wie diese und jetzt wieder im 81 00:06:34,260 --> 00:06:41,520 Reduzierer. Natürlich können wir diese Warenkorb-Artikelklasse aus dem Modellordner und aus dem Warenkorb-Artikel 82 00:06:41,520 --> 00:06:47,880 hier und jetzt wieder in den Warenkorb-Fall importieren. Zunächst müssen wir herausfinden, 83 00:06:47,980 --> 00:06:52,680 ob dieses Produkt bereits Teil unserer Artikel ist. 84 00:06:52,680 --> 00:06:59,370 Wie bereits erwähnt, füge ich jedes neue Produkt hinzu, indem ich Artikeln, die die ID dieses Produkts darstellen, einen neuen Schlüssel 85 00:06:59,370 --> 00:07:01,020 hinzufüge. Da dies eindeutig 86 00:07:01,020 --> 00:07:06,870 ist, haben wir jeden Schlüssel immer nur einmal und der Wert ist dann wie folgt ein Warenkorbartikel definiert 87 00:07:07,110 --> 00:07:12,990 es in Modellen und daher weiß ich, ob die ID des Produkts, das ich hier erhalte, bereits ein 88 00:07:13,170 --> 00:07:17,050 Schlüssel für Artikel ist, dann hat dies bereits unseren Artikel als Warenkorbartikel. 89 00:07:17,070 --> 00:07:26,190 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, 90 00:07:26,200 --> 00:07:36,290 also nicht undefiniert, haben wir den Artikel bereits im Warenkorb, was in Ordnung ist, aber dann müssen wir nur die 91 00:07:36,290 --> 00:07:38,800 Menge ändern, andernfalls müssen 92 00:07:38,860 --> 00:07:41,600 wir einen brandneuen Artikel hinzufügen. 93 00:07:41,600 --> 00:07:45,920 Beginnen wir also mit dem Fall else, da dies der Fall ist, 94 00:07:45,920 --> 00:07:47,170 auf den wir 95 00:07:47,330 --> 00:07:51,910 zum ersten Mal stoßen, wenn wir zum ersten Mal etwas hinzufügen. Dort benötigen 96 00:07:51,920 --> 00:07:58,460 wir einen neuen Warenkorbartikel. Ich erstelle diesen mit dem neuen Schlüsselwort und der von mir definierten Warenkorbartikelklasse , wir 97 00:07:58,520 --> 00:08:00,530 müssen die Menge angeben, die natürlich 98 00:08:00,920 --> 00:08:08,840 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 99 00:08:09,050 --> 00:08:11,580 ist natürlich zunächst nur unser Produktpreis, oder? 100 00:08:11,600 --> 00:08:17,810 Denn wenn wir einen Artikel dieses Preises hinzufügen, ist die Summe für diesen Warenkorbartikel unser Produktpreis, und jetzt muss 101 00:08:17,810 --> 00:08:21,200 dieser neue Warenkorbartikel hier zu unseren Warenkorbartikeln hinzugefügt werden. 102 00:08:24,100 --> 00:08:29,050 Hier geben wir also eine Kopie unseres Status zurück und 103 00:08:29,220 --> 00:08:38,290 setzen Elemente gleich einem neuen Objekt, in das ich alle meine vorhandenen Statuselemente kopiere, sodass ich mein vorhandenes 104 00:08:38,290 --> 00:08:39,630 Elementobjekt hier 105 00:08:39,640 --> 00:08:47,200 kopiere und dann einen neuen Schlüssel mit dieser dynamischen Syntax mit hinzufüge die eckigen 106 00:08:47,200 --> 00:08:55,280 Klammern, in denen der Schlüsselname hinzugefügt wirdProdukt. ID, das habe ich gemeint, wobei die ID des Produkts der Schlüssel 107 00:08:55,340 --> 00:08:59,190 in unserem Artikelobjekt ist und der Wert unser neuer Warenkorbartikel ist. 108 00:08:59,390 --> 00:09:04,730 Dies ist nur eine Syntax, die Sie kennen müssen. Es ist Vanille-Javascript. Auf diese Weise können Sie hier oben eine dynamische 109 00:09:04,730 --> 00:09:11,570 Eigenschaft hinzufügen oder darauf zugreifen, anstatt sie hier als Zeichenfolge fest zu codieren. Übrigens sollte dies hier oben 110 00:09:11,600 --> 00:09:20,170 natürlich auch staatlich sein. Artikel, mein Fehler. Daher sollten wir hier einen neuen Warenkorbartikel hinzufügen. 111 00:09:20,230 --> 00:09:24,790 Wenn Sie bereits einen Artikel im Warenkorb haben, erstellen wir natürlich keinen 112 00:09:24,790 --> 00:09:31,480 neuen Warenkorbartikel, sondern möchten den vorhandenen Artikel aktualisieren. Also werde ich meinen aktualisierten Warenkorbartikel hier haben 113 00:09:31,480 --> 00:09:35,470 und dafür erstelle ich immer noch einen neuen Warenkorbartikel, aber 114 00:09:35,800 --> 00:09:46,960 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 115 00:09:46,960 --> 00:09:52,150 sein sollte. Wir überprüfen dies hier und dies wird natürlich einen Mengenschlüssel haben, da ein 116 00:09:52,150 --> 00:09:57,730 solcher Artikel hier in meinen Artikeln nur von ist Geben Sie Warenkorbartikel ein, damit er eine Mengeneigenschaft 117 00:09:57,730 --> 00:09:58,480 hat, und 118 00:09:58,600 --> 00:10:02,020 wir fügen einfach eine hinzu, da wir einen neuen Warenkorbartikel 119 00:10:02,080 --> 00:10:09,560 hinzufügen. Daher müssen wir diesen Wert erhöhen. Jetzt nimmt Warenkorbartikel als zweites Argument den Produktpreis. Da wir die App dann so 120 00:10:09,570 --> 00:10:14,540 erstellen werden, dass sich der Preis nie ändert, was hier viel Komplexität verursachen 121 00:10:14,550 --> 00:10:19,860 würde, müssten wir den Warenkorb in diesem Fall auf eine völlig andere Weise verwalten und 122 00:10:19,890 --> 00:10:25,350 jeden Warenkorbartikel als speichern Liste der Transaktionen für diesen Warenkorbartikel, die hierfür zu viel sind. 123 00:10:25,350 --> 00:10:30,760 Da sich dies also nie ändert, da sich der Preis nie ändert, können wir am Ende einfach den 124 00:10:30,760 --> 00:10:36,930 Produktpreis nehmen, den wir erhalten, oder den vorhandenen Preis, den wir zuvor gespeichert haben, da sich dies wiederum nie ändern wird. 125 00:10:36,930 --> 00:10:42,150 Der Titel könnte sich ändern und ich möchte den neuesten Titel hier speichern, also nehme 126 00:10:42,150 --> 00:10:46,620 ich definitiv das Produkt, das wir hier bekommen, anstelle meines alten Schnappschusses und 127 00:10:46,710 --> 00:10:51,480 nicht zuletzt den letzten Wert hier, meine Gesamtsumme Für diesen Warenkorbartikel ist das natürlich 128 00:10:51,480 --> 00:10:59,520 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 129 00:10:59,520 --> 00:11:06,660 wir den Preis mal 1 zur aktuellen Summe hinzufügen. Das ist der aktualisierte 130 00:11:06,660 --> 00:11:08,570 Warenkorbartikel. 131 00:11:08,580 --> 00:11:16,750 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 132 00:11:16,930 --> 00:11:26,460 Objekt setzen, in das wir den Status kopieren. Artikel, aber wo wir jetzt wieder addedProduct setzen. ID und ja, das gibt es bereits, 133 00:11:26,460 --> 00:11:33,310 aber damit überschreiben wir es einfach mit unserem aktualisierten Warenkorbartikel, sodass wir das gleiche Update durchführen, das 134 00:11:33,310 --> 00:11:37,070 wir dort unten durchführen. Jetzt, da dies jedoch 135 00:11:37,100 --> 00:11:40,150 nicht alles ist, was wir tun müssen, müssen 136 00:11:40,250 --> 00:11:43,750 wir auch den Gesamtbetrag ändern, da sich dies natürlich ändert. 137 00:11:43,940 --> 00:11:52,420 Wenn wir also einen Artikel zum ersten Mal hinzufügen, sollte der Gesamtbetrag im Grunde genommen unser alter Gesamtbetrag sein. Geben Sie also 138 00:11:52,430 --> 00:11:57,530 den Gesamtbetrag plus Produktpreis an. Dies gilt auch, wenn wir einen Artikel zu 139 00:11:57,530 --> 00:12:04,910 einem vorhandenen Warenkorb hinzufügen oder wenn er bereits vorhanden ist Weil am Ende unsere Summe immer nur die alte 140 00:12:04,910 --> 00:12:10,130 Summe plus der Preis ist, weil wir immer einen Artikel dieses Produkts hinzufügen, 141 00:12:10,130 --> 00:12:12,190 funktioniert diese App so. 142 00:12:12,200 --> 00:12:14,480 Unsere Update-Anweisung hier ist also fast 143 00:12:14,480 --> 00:12:18,920 dieselbe. Das einzige, was sich hier unterscheidet, ist, wie wir diesen Warenkorb erstellen. 144 00:12:18,920 --> 00:12:24,110 Daher können wir diesen Code natürlich auch wiederverwenden, ihn aus dem if else-Block verschieben und 145 00:12:24,110 --> 00:12:27,590 statt hier zwei verschiedene Konstanten haben können wir eine Variable 146 00:12:30,670 --> 00:12:33,150 erstellen, bevor wir die if-Anweisung eingeben, aktualisiert 147 00:12:33,190 --> 00:12:36,990 oder ein neues Warenkorbelement. Dies könnte ein Name sein, da wir 148 00:12:37,090 --> 00:12:44,590 nicht wissen, wie es im Voraus aussehen wird, und dann hier im if-Zweig hier setzen wir aktualisiert oder neuer Warenkorbartikel zu diesem aktualisierten 149 00:12:44,590 --> 00:12:49,900 Warenkorbartikel, hier setzen wir ihn andererseits auf diesen neuen Warenkorbartikel und hier verwenden wir dann immer 150 00:12:49,930 --> 00:12:54,270 den aktualisierten oder neuen Warenkorbartikel und damit haben wir hier eine Code-Wiederverwendung und 151 00:12:54,400 --> 00:13:00,610 tun dies nicht Wiederhole uns, was immer gut ist. Eine weitere Randnotiz: Das Kopieren des Status hier ist 152 00:13:00,610 --> 00:13:04,420 natürlich immer überflüssig, da Sie immer sowohl Elemente als auch den Gesamtbetrag festlegen. 153 00:13:04,420 --> 00:13:09,520 Wenn Sie also immer nur diese beiden Felder hier haben und immer beide ändern, müssen Sie 154 00:13:09,520 --> 00:13:15,940 den vorhandenen Status nicht kopieren, wenn Sie hier jemals ein anderes Datenelement in Ihr Status-Slice einfügen, das Sie hier unten 155 00:13:15,940 --> 00:13:20,680 nicht ändern Sie müssen jedoch Ihren alten Status kopieren, damit Sie diese zusätzlichen Daten nicht 156 00:13:20,680 --> 00:13:21,150 verlieren. 157 00:13:21,190 --> 00:13:26,470 Daher werde ich diese Kopierfunktion hier belassen, obwohl wir sie hier technisch nicht 158 00:13:26,470 --> 00:13:30,750 benötigen. Sollten wir jedoch jemals unseren Speicherstatus ändern, vergessen wir nicht, 159 00:13:31,030 --> 00:13:34,310 sie zu kopieren, und verlieren daher Daten. 160 00:13:34,330 --> 00:13:36,190 Nun, es gab eine Menge Arbeit, 161 00:13:36,190 --> 00:13:38,300 mit der wir beginnen können, diese Aktion 162 00:13:38,320 --> 00:13:42,130 zu versenden, und natürlich möchte ich sie aus der Produktübersicht und den Produktdetails 163 00:13:42,190 --> 00:13:45,650 heraus versenden, da ich in beiden Bildschirmen Schaltflächen zum Warenkorb hinzugefügt habe. 164 00:13:45,710 --> 00:13:50,890 Beginnen wir also mit dem Produktübersichtsbildschirm, um dort Redux-Aktionen zu versenden, 165 00:13:50,890 --> 00:13:52,380 die wir 166 00:13:52,600 --> 00:14:00,880 benötigen, um den Use Dispatch Hook hier einzuschließen. Hier können wir einfach auf diese Dispatch-Funktion zugreifen, indem wir 167 00:14:00,880 --> 00:14:08,410 Use Dispatch wie folgt aufrufen und jetzt auf Hinzufügen zu klicken Wagen dort unten, wir können 168 00:14:08,410 --> 00:14:13,330 unsere Aktion hier auslösen und natürlich können Sie, anstatt hier 169 00:14:13,480 --> 00:14:15,930 Inline-Funktionen zu verwenden, Funktionen in 170 00:14:16,090 --> 00:14:24,700 separaten Konstanten innerhalb Ihrer Funktionskomponente speichern, alternativ bleibe ich bei Inline-Funktionen für Jetzt und ich werde alle meine Aktionen 171 00:14:24,790 --> 00:14:32,080 hier als Warenkorbaktionen aus dem Speicherordner und dort aus dem Aktionsordner und der Warenkorbdatei importieren. 172 00:14:32,080 --> 00:14:37,060 Dies ist eine Importsyntax, die alle Exporte aus der Datei zu einem Objekt zusammenführt. Wir 173 00:14:37,060 --> 00:14:40,020 haben hier nur einen Export, daher können Sie auch 174 00:14:40,030 --> 00:14:42,610 auf diesen bestimmten Export abzielen. Später 175 00:14:42,610 --> 00:14:46,630 werden wir mehrere Exporte durchführen, und daher werde ich diesen Ansatz verwenden. 176 00:14:46,630 --> 00:14:49,750 Also hier versenden wir dann Wagenaktion. 177 00:14:49,930 --> 00:14:55,400 In den Warenkorb legen und dies ist eine Funktion, die wir ausführen müssen. Dies ist unsere Funktion zum 178 00:14:55,400 --> 00:14:57,050 Erstellen von Aktionen. Dies ist 179 00:14:57,430 --> 00:15:05,270 ein Argument, das unser Produkt übernimmt. Am Ende müssen wir also itemData übergeben. Artikel, der nur unser Produkt ist, hier im 180 00:15:05,270 --> 00:15:06,330 Produktdetailbildschirm. 181 00:15:06,410 --> 00:15:12,850 Deshalb machen wir genau das Gleiche, wir importieren Use Dispatch aus React Redux, daher können wir 182 00:15:12,890 --> 00:15:17,560 hier auf die Dispatch-Funktion zugreifen, indem wir Use Dispatch aufrufen und 183 00:15:18,050 --> 00:15:23,990 dann für diese Schaltfläche hier in der Inline-Funktion oder in einer separaten benannten Funktion, wenn 184 00:15:24,440 --> 00:15:26,330 Sie das mögen Sie 185 00:15:26,360 --> 00:15:31,490 können den Versand aufrufen. Jetzt müssen wir unsere Aktionen importieren. Ich verwende 186 00:15:31,490 --> 00:15:42,190 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 187 00:15:42,190 --> 00:15:48,630 das ausgewählte Produkt weiter, das unser Produkt ist, das wir hier in den Warenkorb legen möchten. 188 00:15:48,820 --> 00:15:54,190 Dies löst hoffentlich Aktionen aus, bei denen der Artikel in den Warenkorb gelegt wird, aber im Moment können 189 00:15:54,190 --> 00:15:56,040 wir dies natürlich nicht bestätigen. 190 00:15:56,110 --> 00:16:04,390 Nun, eigentlich können wir. Sie können den React Native-Debugger starten und ich habe ihn noch 191 00:16:04,990 --> 00:16:12,010 nicht verwendet, aber dort können Sie jetzt Befehl oder Steuerung t drücken, um einen neuen Tab zu öffnen, diesen 192 00:16:15,030 --> 00:16:15,660 Import 193 00:16:19,500 --> 00:16:20,520 hier zu 194 00:16:23,560 --> 00:16:30,790 bestätigen und dann zu Ihren Apps zu gehen und dort zu öffnen das Debugging-Menü unter iOS mit Befehl D, unter 195 00:16:35,000 --> 00:16:43,990 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 196 00:16:43,990 --> 00:16:45,290 am falschen Port 197 00:16:45,300 --> 00:16:52,120 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 198 00:16:52,120 --> 00:17:00,460 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 199 00:17:01,210 --> 00:17:05,550 Sie Ihren Chrome-Debugger schließen und dann Ihre App neu laden. Jetzt sollte hier 200 00:17:05,590 --> 00:17:09,630 eine Verbindung hergestellt werden, und jetzt können Sie Ihre App hier 201 00:17:09,640 --> 00:17:11,310 nicht nur überprüfen, wie ich 202 00:17:11,410 --> 00:17:11,940 es 203 00:17:11,980 --> 00:17:17,950 zuvor erklärt habe. Nein, Sie können es auch Schauen Sie sich den Teil dort oben an und das 204 00:17:17,950 --> 00:17:22,200 ist Ihr Redux-Debugger. Dort können Sie sehen, was Redux für Sie tut. 205 00:17:22,280 --> 00:17:28,620 Das einzige, was Sie tun müssen, damit es funktioniert, ist die Installation eines neuen Pakets 206 00:17:28,660 --> 00:17:34,160 mit npm install --save dev, da es sich um eine Entwicklungsabhängigkeit handelt, die 207 00:17:34,160 --> 00:17:40,520 wir nur während der Entwicklung benötigen. Installieren Sie dort die Redux dev tools-Erweiterung und rufen Sie 208 00:17:40,650 --> 00:17:44,870 Ihre App auf . js-Datei danach 209 00:17:47,350 --> 00:17:50,010 und dann aus dieser 210 00:17:50,010 --> 00:17:56,280 Redux dev tools-Erweiterung importieren. Sie können von dort aus Compose mit Dev-Tools importieren. Diese 211 00:17:56,300 --> 00:18:00,050 Funktion übergeben Sie zum Erstellen eines Speichers als zweites Argument. Sie können 212 00:18:00,090 --> 00:18:03,260 sie dort einfach so ausführen. Dies ist übrigens Code, dieser 213 00:18:03,260 --> 00:18:04,530 Import und diese 214 00:18:04,560 --> 00:18:10,020 Verwendung, die Sie entfernen sollten, bevor Sie Ihre App bereitstellen, da dies nur während der Entwicklung ausgeführt 215 00:18:10,020 --> 00:18:14,160 werden sollte, nicht in Ihrer Produktions-App. Sie müssen dies entfernen, bevor Sie Ihre 216 00:18:14,160 --> 00:18:20,580 App bereitstellen aber während der Entwicklung ist das in Ordnung. Wenn Sie dies jetzt speichern, sehen Sie tatsächlich, 217 00:18:20,580 --> 00:18:26,940 dass hier in diesem Redux-Inspektor eine Initiierungsaktion ausgelöst wird. Das haben Sie vorher noch nicht gesehen. 218 00:18:26,940 --> 00:18:30,560 Dies ist eine Aktion, die beim Start Ihrer App automatisch ausgelöst wird. 219 00:18:30,570 --> 00:18:35,670 Wenn ich jetzt hier auf "Warenkorb" klicke, wird auch die Aktion "In 220 00:18:35,670 --> 00:18:41,990 den Warenkorb" angezeigt. Jetzt können Sie hier Details zu dieser Aktion anzeigen, z. B. die damit 221 00:18:41,990 --> 00:18:48,120 verbundenen Daten und Ihren Status. Hier und da sehen Sie beispielsweise diese ist mein Produktstatus und 222 00:18:48,590 --> 00:18:50,380 wo ist mein Warenkorbstatus? 223 00:18:50,670 --> 00:18:54,840 Nun, das fehlt natürlich, denn während wir den Reduzierer in der Aktion eingerichtet haben, in der App. js-Datei, in kombinierten 224 00:18:54,840 --> 00:18:58,660 Reduzierern wird der Warenkorbstatus nicht berücksichtigt. 225 00:18:58,740 --> 00:19:07,110 Importieren wir also den Wagenreduzierer von. / StoreReducers / cart und jetzt mit dem importierten können wir es 226 00:19:07,440 --> 00:19:13,890 zu unserem kombinierten Reduzierungsobjekt hinzufügen und jetzt fügen wir dort ein Warenkorb-Slice hinzu, zeigen auf den Wagenreduzierer und 227 00:19:13,890 --> 00:19:20,560 daher wird dies jetzt in unseren Redux-Shop aufgenommen. Wenn Sie nun darauf warten, dass dies neu geladen wird, 228 00:19:20,560 --> 00:19:25,830 und erneut auf "Warenkorb" klicken, sehen Sie in dieser Aktion "In den Warenkorb hinzufügen" unter "Status", dass 229 00:19:25,830 --> 00:19:30,960 jetzt ein Warenkorb-Slice vorhanden ist und jetzt ein Gesamtbetrag angezeigt wird. Sie sehen, es gibt einen Artikel 230 00:19:30,990 --> 00:19:35,700 mit dem Schlüssel P1, der unser Produkt mit einer Menge von 1 ist, diesen Preis, 231 00:19:35,710 --> 00:19:43,900 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 232 00:19:43,900 --> 00:19:48,790 Sie sich den Zustand nach dieser Aktion an, wir sehen jetzt, kühlen nur einen Artikel ab, 233 00:19:48,790 --> 00:19:52,620 aber jetzt mit Menge zwei, Produktpreis pro Artikel ist dies, aber die 234 00:19:52,630 --> 00:19:54,030 Summe ist dies. 235 00:19:54,190 --> 00:19:55,120 Dies ist 236 00:19:55,120 --> 00:19:57,760 das Hemd, wenn ich jetzt auch den blauen Teppich 237 00:19:57,760 --> 00:20:02,590 versende, müssen wir noch einmal in den Warenkorb legen und dort im Zustand sehen wir jetzt 238 00:20:02,590 --> 00:20:04,190 tatsächlich, dass zwei Gegenstände darin sind, 239 00:20:04,270 --> 00:20:09,930 P1 und P2, P1 ist unverändert, aber P2 wurde nun hinzugefügt und der Gesamtbetrag sieht auch für mich gut aus. 240 00:20:09,940 --> 00:20:16,150 Das scheint also zu funktionieren und so können Sie Ihren Redux-Status überprüfen, während Ihre App ausgeführt wird, ohne ihn 241 00:20:16,240 --> 00:20:17,140 hier auszugeben. 242 00:20:17,140 --> 00:20:21,610 Jetzt möchten wir es natürlich auch visuell ausgeben, aber dies ist eine gute Möglichkeit, mit Hilfe 243 00:20:21,610 --> 00:20:25,120 des React Native-Debuggers einen Blick hinter die Kulissen Ihres Zustands zu werfen. 244 00:20:25,120 --> 00:20:30,010 Jetzt schließen wir es hier, weil es die App etwas verlangsamt. Deshalb 245 00:20:30,010 --> 00:20:35,230 stoppe ich hier im Debug-Menü auch mein Remote-Debugging und schließe den Inspektor hier vollständig. 246 00:20:35,260 --> 00:20:40,660 Auch wieder in der App. js file, ich werde das komponieren mit dev tools hier 247 00:20:40,660 --> 00:20:42,000 loswerden, damit ich es 248 00:20:42,070 --> 00:20:47,020 später nicht vergesse, aber du kannst es immer hier hinzufügen oder hier lassen, während du entwickelst, damit du 249 00:20:47,020 --> 00:20:48,380 in deinen Shop schauen kannst. 250 00:20:48,460 --> 00:20:51,010 Der wichtigste Aspekt für uns hier 251 00:20:51,010 --> 00:20:57,280 ist, dass dies zu funktionieren scheint. Wenn dies funktioniert, können wir jetzt natürlich daran arbeiten, hier eine Aktionsschaltfläche zum 252 00:20:57,280 --> 00:21:03,430 Header hinzuzufügen und sicherzustellen, dass wir von dort oder mit deren Hilfe zur Warenkorbseite gehen können Aktionsschaltfläche, damit 253 00:21:03,430 --> 00:21:06,220 wir auf der Warenkorbseite unsere Warenkorbinformationen ausgeben können.