1 00:00:02,100 --> 00:00:05,460 Beginnen wir für die Schaltfläche Löschen erneut mit der Redux-Logik. 2 00:00:05,490 --> 00:00:11,850 Hier in den Aktionen können wir beispielsweise eine neue Kennung registrieren. Das Entfernen aus dem Warenkorb klingt wie ein passender 3 00:00:11,850 --> 00:00:17,120 Name, den wir zuvor zum Warenkorb hinzugefügt haben. Entfernen Sie ihn also aus dem Warenkorb. 4 00:00:17,110 --> 00:00:22,710 Ich werde hier auch wieder eine Action Creator-Funktion hinzufügen, aus dem Warenkorb entfernen. 5 00:00:22,740 --> 00:00:27,750 Dies benötigt jetzt nur noch die ID des Produkts, das entfernt werden soll, also nur die Produkt-ID, 6 00:00:27,750 --> 00:00:34,260 und dann wird ein neues Aktionsobjekt zurückgegeben, bei dem der Kurstyp aus dem Warenkorb entfernt wird und bei dem wir die PID haben, 7 00:00:34,260 --> 00:00:40,800 die Produkt-ID, an die ich die weiterleite Produkt-ID Ich bekomme hier. Jetzt im Reduzierer hatten wir diesen Fall 8 00:00:40,800 --> 00:00:44,560 zum Warenkorb hinzufügen, jetzt müssen wir hier einfach 9 00:00:44,560 --> 00:00:48,280 einen anderen Fall hinzufügen und dieser Fall ist 10 00:00:50,290 --> 00:00:53,030 der Fall vom Wagen entfernen. 11 00:00:53,050 --> 00:00:57,960 Dazu müssen Sie sicherstellen, dass Sie die aus dem Warenkorb entfernte Aktionskennung aus 12 00:00:58,000 --> 00:00:58,990 der Warenkorbaktionsdatei 13 00:01:01,840 --> 00:01:03,670 importieren. Im Fall "Aus 14 00:01:03,670 --> 00:01:07,120 dem Warenkorb entfernen" haben wir hier wieder zwei Fälle. 15 00:01:07,140 --> 00:01:12,660 Zum einen hatten wir nur einen Artikel dieses Produkts im Warenkorb, wie beim blauen Teppich. 16 00:01:12,660 --> 00:01:13,900 In diesem Fall 17 00:01:13,980 --> 00:01:16,760 müssen wir ihn vollständig aus dem Warenkorb entfernen, 18 00:01:16,770 --> 00:01:17,850 also aus 19 00:01:17,850 --> 00:01:23,400 diesem Objekt, und dies wird ihn dann aus dieser Reihe entfernen was wir hier ausgeben. 20 00:01:23,400 --> 00:01:27,870 Wenn wir zwei oder mehr Artikel haben, möchten wir die Menge nur um 1 reduzieren. 21 00:01:27,870 --> 00:01:33,120 Natürlich können Sie diesen Artikel jederzeit vollständig löschen, wenn Sie möchten, aber ich möchte Ihnen zeigen, wie 22 00:01:33,120 --> 00:01:35,450 Sie zwischen diesen beiden Fällen unterscheiden können. 23 00:01:35,490 --> 00:01:41,130 Wenn wir also eine höhere Menge als eine haben, möchte ich den Artikel nicht aus dem Warenkorb 24 00:01:41,130 --> 00:01:43,870 löschen, sondern nur die Menge um 1 reduzieren. 25 00:01:44,100 --> 00:01:51,210 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 26 00:01:51,210 --> 00:01:57,930 von unserem Zustand abgezogen werden. Dort müssen wir in den Artikeln das Produkt finden, nach dem wir suchen, und natürlich können 27 00:01:57,960 --> 00:02:00,000 wir dies mit Hilfe der 28 00:02:00,000 --> 00:02:04,770 ID tun, die ist Teil unserer Aktion hier im PID-Feld, da jetzt Statuselemente ein 29 00:02:05,550 --> 00:02:11,440 Objekt sind und wir daher auf Aktionen zugreifen können. pid hier, richtig. 30 00:02:11,450 --> 00:02:16,680 Dadurch wird dynamisch auf den Wert mit dem Produkt-ID-Schlüssel hier in unserem Artikel 31 00:02:16,950 --> 00:02:18,380 zugegriffen. Mit der 32 00:02:18,390 --> 00:02:21,220 Produkt-ID erhalten wir diese Aktion. Auf diese 33 00:02:21,240 --> 00:02:24,950 Weise fügen wir unserem Artikelobjekt hier rechts Artikel hinzu. 34 00:02:24,960 --> 00:02:28,890 Wir verwenden unsere Produkt-ID als Kennung. Dies ist nun das, was 35 00:02:28,920 --> 00:02:32,410 ich hier verwende, um Zugriff darauf zu erhalten. 36 00:02:32,430 --> 00:02:36,940 Dies hat eine Menge, da dies einen Wert enthält, der ein Produktartikel ist. Sie können 37 00:02:36,990 --> 00:02:41,120 natürlich auch eine Überprüfung hinzufügen, ob dieser Artikel tatsächlich Teil des Warenkorbs ist, 38 00:02:41,130 --> 00:02:46,290 aber so wie wir diese App erstellen, sollten wir dies niemals erreichen können Aktion, ohne dass dieses 39 00:02:46,290 --> 00:02:51,690 Produkt Teil des Warenkorbs ist, da wir unsere Löschaktion hier nur innerhalb des Warenkorbbildschirms auslösen können. Wir müssen 40 00:02:51,690 --> 00:02:55,340 hier also nicht nachsehen, aber wir müssen definitiv die Menge ermitteln. 41 00:02:55,410 --> 00:03:03,780 Jetzt können wir prüfen, ob die aktuelle Menge größer als 1 ist, was bedeutet, dass wir sie reduzieren müssen, 42 00:03:03,780 --> 00:03:06,740 wir müssen sie reduzieren, nicht löschen, sonst 43 00:03:06,750 --> 00:03:08,940 müssen wir sie löschen. 44 00:03:09,090 --> 00:03:11,790 Beginnen wir nun mit dem Löschfall. 45 00:03:11,850 --> 00:03:18,900 Hier müssen wir also nur ein neues Elementobjekt zurückgeben, das alle alten Elemente 46 00:03:18,930 --> 00:03:27,520 enthält, dieses Element jedoch nicht mehr enthält. So können wir unsere aktualisierten Warenkorbelemente hier haben, wo wir Statuselemente 47 00:03:27,520 --> 00:03:36,870 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 48 00:03:36,870 --> 00:03:41,880 aktualisierte Warenkorbelemente für Aktionen löschen. pid. 49 00:03:41,880 --> 00:03:49,290 Dadurch wird dieser Artikel aus unserem kopierten Javascript-Objekt hier gelöscht. Dieser Artikel wird vollständig gelöscht. Dieser Produktartikel wird 50 00:03:49,290 --> 00:03:57,020 vollständig aus unserem Warenkorb-Objekt entfernt. So können wir es löschen. In dem anderen Fall, in 51 00:03:57,020 --> 00:03:59,690 dem wir es nur reduzieren müssen, kann 52 00:04:01,040 --> 00:04:07,250 ich meinen aktualisierten Warenkorbartikel haben, sodass ich für diesen einzelnen Warenkorbartikel einen neuen Warenkorbartikel mit der 53 00:04:07,280 --> 00:04:13,700 Warenkorbartikelklasse erstelle und dort die Werte des vorhandenen Warenkorbs kopieren möchte Warenkorbartikel aber einfach die Menge reduzieren. 54 00:04:14,220 --> 00:04:17,910 Der Warenkorbartikel nimmt also die richtige Menge als ersten Wert 55 00:04:17,910 --> 00:04:25,290 an. Daher besteht das Ziel hier darin, Zugriff auf Statusartikel für die Produkt-ID zu erhalten, die ich für die Aktion 56 00:04:25,290 --> 00:04:33,450 erhalte. Da das Wiederholen dieses Artikels umständlich ist, speichere ich ihn in einem Helfer als Konstante , ausgewähltes Warenkorbelement ist dies hier, 57 00:04:33,510 --> 00:04:37,290 jetzt können wir das hier durch ausgewähltes Warenkorbelement ersetzen und hier 58 00:04:37,290 --> 00:04:41,760 kann ich ausgewähltes Warenkorbelement verwenden. Menge minus eins. 59 00:04:41,760 --> 00:04:48,240 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 60 00:04:48,240 --> 00:04:49,820 den Rest der Daten behalten. 61 00:04:49,830 --> 00:04:57,270 Also behalten wir den Produktpreis hier, wir behalten den Produkttitel, dass sich nicht alles ändert, die Summe 62 00:04:57,270 --> 00:05:00,840 ändert sich jedoch natürlich und das ist 63 00:05:00,910 --> 00:05:05,090 die Summe, die alte Summe abzüglich des Preises natürlich, also 64 00:05:05,100 --> 00:05:13,410 abzüglich des Produktpreises, weil wir einen entfernt haben Artikel müssen wir die Summe um den Preis eines Artikels reduzieren. 65 00:05:13,470 --> 00:05:21,870 Jetzt muss dieser aktualisierte Warenkorbartikel den aktuellen Artikel in unserem Warenkorbartikelobjekt ersetzen. Damit wir auch etwas Code wiederverwenden können, werde ich dies 66 00:05:21,870 --> 00:05:26,760 tatsächlich ein wenig ändern und aktualisierte Warenkorbelemente hier als Variable anstelle einer 67 00:05:26,760 --> 00:05:32,880 Konstante hier im else-Block erstellen, so dass ich nur diesen Variablenwert aktualisiere, so dass hier in 68 00:05:33,240 --> 00:05:34,230 Im if-Block 69 00:05:34,230 --> 00:05:40,530 können wir auch denselben Variablennamen verwenden, aktualisierte Warenkorbartikel, bei denen ich dies gleich einer Kopie der 70 00:05:40,530 --> 00:05:49,890 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 71 00:05:49,890 --> 00:05:56,610 Warenkorbartikel mit der aktualisierten Menge und Summe ist. Das sind die aktualisierten Warenkorbartikel. Jetzt müssen 72 00:05:56,700 --> 00:05:57,520 wir 73 00:05:57,540 --> 00:06:02,550 natürlich auch den Gesamtbetrag unseres Status anpassen. Wenn dieser Block 74 00:06:02,550 --> 00:06:10,800 blockiert ist, geben wir eine Kopie des Status zurück. Artikel können auf aktualisierte Warenkorbartikel eingestellt werden Der 75 00:06:11,160 --> 00:06:14,030 Gesamtbetrag kann so eingestellt werden, 76 00:06:14,100 --> 00:06:20,160 dass der Gesamtbetrag abzüglich des Produktpreises für den ausgewählten Warenkorbartikel angegeben wird, da 77 00:06:23,530 --> 00:06:31,030 genau wie ich die Summe für diesen einzelnen Warenkorbartikel aktualisiert habe, die Gesamtsumme des Warenkorbs natürlich 78 00:06:31,060 --> 00:06:38,200 auch als solche neu angepasst werden muss. Jetzt können wir versuchen, diese Aktion zum Entfernen aus dem Warenkorb zu versenden. 79 00:06:38,200 --> 00:06:46,940 Gehen wir also zum Warenkorbbildschirm, auf dem ich am Ende diese Funktion zum Entfernen habe, und 80 00:06:46,940 --> 00:06:51,860 dort möchte ich jetzt eine Aktion auslösen, sodass 81 00:06:51,890 --> 00:07:03,040 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 82 00:07:03,550 --> 00:07:05,740 verwenden und diesen dann dort unten versenden. 83 00:07:05,740 --> 00:07:17,150 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 84 00:07:17,150 --> 00:07:24,080 Import verwenden, der völlig optional ist, können Sie auch auf die spezifischen Dinge abzielen, die Sie 85 00:07:24,080 --> 00:07:25,760 benötigen Aktionsersteller, in 86 00:07:25,790 --> 00:07:31,610 diesem Fall das Entfernen aus dem Warenkorb, das wir benötigen würden, und dann 87 00:07:32,480 --> 00:07:35,400 dort unten, führen Sie diesen Aktionsersteller einfach 88 00:07:35,420 --> 00:07:41,780 aus, in meinem Fall mithilfe von Warenkorbaktionen. removeFromCart, leiten Sie die Produkt-ID weiter, die wir natürlich hier 89 00:07:41,780 --> 00:07:45,030 erhalten, es ist itemData. Artikel. 90 00:07:45,110 --> 00:07:50,810 und denken Sie jetzt daran, dass wir Artikel dieser Form durchlaufen, sodass wir dort ein Produkt-ID-Feld 91 00:07:50,810 --> 00:07:55,840 haben und dieses hier verwenden können, um es aus dem Warenkorb zu entfernen. Dies sollte 92 00:07:55,850 --> 00:08:00,770 uns hoffentlich eine Aktualisierung ermöglichen Dies. Und das sollte alles sein. Redux 93 00:08:00,770 --> 00:08:05,470 sollte den Rest hinter den Kulissen erledigen und den Warenkorbbildschirm automatisch neu rendern, wenn sich 94 00:08:05,570 --> 00:08:12,060 der Warenkorb ändert, also immer dann, wenn wir Artikel entfernen. Also habe ich zwei rote Hemden und einen blauen Teppich hinzugefügt und wenn 95 00:08:13,260 --> 00:08:13,790 ich ein 96 00:08:13,800 --> 00:08:17,000 rotes Hemd entferne, ist ein Problem, das wir haben, die Bestellschalter. Wir müssen 97 00:08:17,010 --> 00:08:19,800 das beheben, aber Sie sehen, dass die Menge korrekt aktualisiert wurde. 98 00:08:19,920 --> 00:08:25,620 Wenn ich dies jetzt entferne, wird auch der Gesamtbetrag korrekt aktualisiert. Wenn ich dies jetzt entferne, ist es tatsächlich vollständig verschwunden 99 00:08:26,360 --> 00:08:28,080 und jetzt ist dies auch deaktiviert. 100 00:08:28,080 --> 00:08:31,970 Das funktioniert also im Allgemeinen, aber natürlich wird die Reihenfolge geändert, 101 00:08:31,980 --> 00:08:34,140 das möchte ich hier nicht tun. 102 00:08:34,380 --> 00:08:40,620 Um zu vermeiden, dass die Reihenfolge wechselt, können wir einfach zum Warenkorbbildschirm gehen, auf dem ich meine Artikel in ein Array umwandle. 103 00:08:40,620 --> 00:08:45,960 Dort müssen wir nur sicherstellen, dass dieses Array immer auf die gleiche Weise sortiert ist, da dieser Selektor 104 00:08:45,990 --> 00:08:51,690 immer neu sortiert wird Lösen Sie unsere Daten aus und rufen Sie sie erneut ab, wenn sich unser Redux-Status ändert. 105 00:08:52,320 --> 00:08:57,540 Daher erhalten wir hier immer den neuesten Datenschnappschuss, den wir dort haben, und daher müssen wir 106 00:08:57,540 --> 00:09:02,670 ihn hier immer nur auf die gleiche Weise sortieren und ihn daher immer auf die 107 00:09:02,670 --> 00:09:03,790 gleiche Weise rendern. 108 00:09:03,900 --> 00:09:11,250 Wir müssen also nur sicherstellen, dass unser Array für transformierte Warenkorbartikel sortiert ist, indem wir dort sort aufrufen. 109 00:09:11,410 --> 00:09:17,310 Wenn ich es so nenne, füge ich hier einige Daten hinzu. Jetzt sehen Sie, dass dies 110 00:09:17,410 --> 00:09:21,820 allein nicht ausreicht, weil wir ihm nicht sagen, wie er sortiert werden 111 00:09:21,820 --> 00:09:28,480 soll, und er nicht weiß, wie er dies für Objekte aus tun soll Das Feld, aber wir können 112 00:09:28,480 --> 00:09:34,490 eine Funktion zum Sortieren übergeben, bei der wir immer zwei Elemente, a und b, miteinander vergleichen 113 00:09:34,600 --> 00:09:38,140 und dann sortieren, muss am Ende eine Zahl zurückgegeben 114 00:09:38,190 --> 00:09:40,780 werden, die bestimmt, was zuerst kommt, 115 00:09:40,800 --> 00:09:50,530 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 116 00:09:50,530 --> 00:09:58,110 A überprüfen, diese mit der Produkt-ID von B vergleichen und wenn sie größer ist, habe ich mit einem ternären Ausdruck 117 00:09:58,150 --> 00:10:02,210 hier einen zurückgegeben, andernfalls gebe ich minus eins zurück . 118 00:10:02,370 --> 00:10:07,620 Dies ist die normale Sortierfunktion, mit der Javascript geliefert wird, und dies stellt jetzt 119 00:10:07,620 --> 00:10:08,610 sicher, dass 120 00:10:08,670 --> 00:10:17,520 wir immer auf die gleiche Weise sortieren. Wenn Sie dies entfernen, bleibt der rote Kurzschluss an seiner Stelle und daher ist unsere Warenkorblogik fertig. 121 00:10:17,520 --> 00:10:23,620 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, 122 00:10:23,610 --> 00:10:29,250 die wir anschließend mit der hilfreichen Schublade hier besuchen können, die es uns ermöglicht, zum Bestellbildschirm zu gelangen, den wir 123 00:10:29,250 --> 00:10:31,190 natürlich auch noch nicht haben hinzufügen.