1 00:00:02,550 --> 00:00:04,670 Um sicherzustellen, dass sie geladen werden, 2 00:00:04,710 --> 00:00:10,260 müssen wir erneut zum Aktionsersteller zurückkehren und dem Aktionsersteller der Bestellung eine brandneue Aktion hinzufügen. Entschuldigen Sie. 3 00:00:11,590 --> 00:00:18,880 Eine Kennung, die ich benötige, ist das Festlegen von Aufträgen, genau wie wir einen für Festlegen von Produkten zum 4 00:00:18,880 --> 00:00:21,340 Festlegen der geladenen Aufträge hatten. Hier 5 00:00:21,340 --> 00:00:28,120 habe ich dann den Aktionsersteller für Abrufaufträge, der keine Argumente akzeptiert, aber dank Redux Thunk und hier meine 6 00:00:28,140 --> 00:00:36,580 asynchrone Versandfunktion zurückgibt Dort versende ich letztendlich oder sende eine neue Aktion, bei der der Typ Aufträge gesetzt ist und bei der ich 7 00:00:36,580 --> 00:00:41,250 meine geladenen Aufträge habe und das natürlich kein leeres Array sein sollte. 8 00:00:41,290 --> 00:00:47,050 Stattdessen können wir die Logik vom Ersteller der Produktaktion ausleihen und dort Produkte abrufen. Wir können all diese Logik 9 00:00:47,110 --> 00:00:55,850 übernehmen, all das hier kopieren und sie an den Ersteller der Auftragsaktion übertragen und 10 00:00:55,850 --> 00:00:57,180 diese 11 00:00:57,410 --> 00:01:04,000 ausführen, bevor wir sie hier versenden. Jetzt müssen wir dies natürlich fein abstimmen, zum Beispiel muss die Anfrage an 12 00:01:04,190 --> 00:01:07,940 orders / U1 gesendet werden und diese wird später erneut durch einen dynamischen Wert ersetzt, 13 00:01:07,940 --> 00:01:13,880 da es jetzt fest codiert ist, Bestellungen für diesen Benutzer abzurufen. Es sollte eine Get-Anfrage sein, ich möchte das überprüfen, das 14 00:01:13,880 --> 00:01:14,930 ist in Ordnung. 15 00:01:14,930 --> 00:01:16,250 Hier habe ich 16 00:01:16,250 --> 00:01:19,450 meine Antwortdaten erhalten, jetzt habe ich meine geladenen Bestellungen 17 00:01:19,460 --> 00:01:21,550 erhalten, das scheint ein passenderer Name 18 00:01:21,560 --> 00:01:27,170 zu sein. Trotzdem durchlaufe ich alle Daten, die ich erhalten habe, und ich möchte meine geladenen Bestellungen 19 00:01:27,230 --> 00:01:30,050 dort unten festlegen, aber jetzt gibt es einen 20 00:01:30,050 --> 00:01:34,210 wichtigen Unterschied. Ich erstelle hier keine neuen Produkte, die ich zu geladenen Bestellungen 21 00:01:34,340 --> 00:01:37,680 hinzufüge, stattdessen muss ich hier natürlich neue Bestellungen erstellen und 22 00:01:37,890 --> 00:01:43,510 dafür müssen Sie Bestellungen aus dem Bestellmodell importieren. Jetzt sehe ich auch, dass es eine 23 00:01:43,520 --> 00:01:48,990 fehlende geschweifte Klammer gibt. Bevor ich übrigens damit fortfahre, muss ich sicherstellen, dass ich 24 00:01:49,020 --> 00:01:57,550 auch alle Fehler abfange, die ich möglicherweise bekomme, und dort möchte ich den Fehler werfen, im Grunde genommen erneut werfen, sicherstellen es 25 00:01:57,550 --> 00:01:59,220 erreicht meine Komponente 26 00:01:59,260 --> 00:02:04,530 und ich brauche noch eine schließende geschweifte Klammer, aber jetzt zurück zu unserer Logik 27 00:02:07,350 --> 00:02:11,480 hier, wo ich neue Bestellungen erstelle, dort ist die ID der 28 00:02:11,490 --> 00:02:18,920 Schlüssel, genau wie für die Produkte, die Artikel können in meinen Antwortdaten gefunden werden, weil wir Im Grunde genommen erhalten 29 00:02:18,920 --> 00:02:24,420 Sie dies hier richtig zurück, sodass die Antwortdaten beispielsweise einen Kartenelementschlüssel enthalten, der meine 30 00:02:24,420 --> 00:02:30,360 Kartenelemente enthält, die ich benötige. Also Antwortdaten für den angegebenen Schlüssel und dort ,. cardItems, dort finde ich 31 00:02:30,360 --> 00:02:38,200 meine Artikel, weil wir diese am Ende hier senden, um die Kartenartikel zu speichern. Dann benötigt meine Bestellung, 32 00:02:38,200 --> 00:02:42,610 die ich hier erstelle, natürlich auch den Gesamtbetrag. Ich bekomme 33 00:02:42,640 --> 00:02:48,700 diesen vom resData-Schlüssel und dann dort, wenn wir ihn haben Ein Blick auf Firebase, 34 00:02:48,700 --> 00:02:53,290 es ist das Feld für den Gesamtbetrag hier und das Datum. 35 00:02:53,330 --> 00:03:00,520 Gut dafür erstelle ich ein neues Datumsobjekt, aber ich initialisiere dies mit dem resData-Schlüssel. Datum. 36 00:03:00,540 --> 00:03:05,760 Jetzt müssen wir ein neues Datenobjekt erstellen, weil resData Schlüssel. Datum ist nur diese Datumszeichenfolge hier und ich 37 00:03:05,850 --> 00:03:08,190 brauche ein Datumsobjekt, keine Datumszeichenfolge, daher umschließen 38 00:03:08,190 --> 00:03:13,800 wir es, diese Zeichenfolge umschließen wir mit der Datumsobjekterstellung hier und daher erhalten wir ein Datenobjekt und das 39 00:03:13,800 --> 00:03:14,220 ist 40 00:03:14,250 --> 00:03:17,130 die Reihenfolge, die ich hier hinzufüge Bei geladenen Bestellungen 41 00:03:17,130 --> 00:03:22,470 tun wir dies für alle Bestellungen, die wir abrufen, und damit können wir diese versenden, und jetzt 42 00:03:22,470 --> 00:03:24,950 müssen wir sie nur noch im Bestellungsreduzierer bearbeiten. 43 00:03:25,080 --> 00:03:32,230 Wenn ich also festgelegte Aufträge abwickle und dafür natürlich diese Aktionskennung importieren muss, muss ich nur ein neues Statusobjekt zurückgeben, 44 00:03:32,290 --> 00:03:37,500 bei dem Aufträge gleich Aktion sind. Bestellungen und das ist alles was 45 00:03:37,570 --> 00:03:39,280 wir tun müssen, also 46 00:03:39,280 --> 00:03:40,640 ganz einfach. 47 00:03:40,720 --> 00:03:42,250 Warum ist es so einfach? 48 00:03:42,280 --> 00:03:47,530 Denn im Action Creator erledigen wir die ganze Arbeit. Dort ordnen wir unsere Bestellungen zu und 49 00:03:47,530 --> 00:03:50,290 hier habe ich nur den Bestellschlüssel für meine Aktion, 50 00:03:50,440 --> 00:03:53,740 der alle zugeordneten Bestellungen enthält. Genau das muss ich hier speichern. 51 00:03:54,150 --> 00:04:03,570 Der verbleibende Schritt besteht nun darin, dass wir Abrufaufträge hier in unserem Auftragsbildschirm versenden. Gehen wir also dorthin und fügen wir den Use-Effekt 52 00:04:03,840 --> 00:04:10,560 erneut hinzu, um dies zu tun. Zum Versenden müssen wir auch den Use-Dispatch aus 53 00:04:10,560 --> 00:04:14,470 React Redux importieren. Hier können wir dann auf 54 00:04:14,730 --> 00:04:20,050 diese Dispatch-Funktion zugreifen, indem wir den Use-Dispatch ausführen und dann hier 55 00:04:20,250 --> 00:04:28,420 den Use-Effekt ausführen. Wir fügen den Versand als Abhängigkeit hinzu, da ich in dieser Effektfunktion hier versende 56 00:04:28,420 --> 00:04:31,640 und jetzt meine Bestellaktionen benötige. 57 00:04:31,660 --> 00:04:39,730 Lassen Sie mich also alles als Bestellaktionen aus dem Speicherordner, aus dem Aktionsordner, aus der Bestelldatei 58 00:04:39,730 --> 00:04:50,840 und mit der hier importierten importieren können wir Befehle Aktionen sagen. fetchOrders so und dann werden wir fortfahren und diese Anfrage stellen. Wenn 59 00:04:51,110 --> 00:04:56,690 wir dies jetzt speichern und zum Bestellbildschirm gehen, ist es zunächst leer, aber 60 00:04:56,690 --> 00:05:05,790 sehr, sehr schnell und es lädt alle Bestellungen, die wir gespeichert haben und das sind diese drei Aufträge, die ich hier 61 00:05:05,790 --> 00:05:14,260 habe und natürlich können wir diese wie bisher erweitern. Jetzt wäre auch ein Ladespinner nett und natürlich können 62 00:05:14,260 --> 00:05:15,790 Sie das Video 63 00:05:15,790 --> 00:05:18,830 auch hier pausieren und selbst ausprobieren. 64 00:05:18,830 --> 00:05:24,830 Ich mache es schnell auf die gleiche Weise wie zuvor - importiere 65 00:05:24,900 --> 00:05:36,120 den Verwendungsstatus aus React, richte dann hier den isLoading-Status ein und setze isLoading, indem ich den use-Status ausführe und diesen zunächst auf false setze 66 00:05:36,120 --> 00:05:42,540 und dann hier im Effekt, am Ende, den ich möchte async verwenden warten. 67 00:05:42,550 --> 00:05:50,920 Jetzt habe ich gesagt, dass Sie hier kein Async hinzufügen können oder sollten, also können wir es entweder hier einfach verwenden oder dies in 68 00:05:50,920 --> 00:05:52,150 eine Hilfsfunktion einbinden. 69 00:05:52,150 --> 00:06:01,320 Jetzt verwende ich einfach den then-Aufruf, also setze ich isLoading hier auf true und füge dann hier hinzu. Sobald dies erledigt ist, weiß ich, dass 70 00:06:01,320 --> 00:06:05,880 wir eine Antwort haben, also setze ich isLoading hier auf false. 71 00:06:05,880 --> 00:06:08,680 Bitte beachten Sie, dass ich hier keine Fehlerbehandlung habe. Wenn 72 00:06:08,700 --> 00:06:11,050 dies fehlschlägt, behandeln wir dies nicht. Stattdessen befinden 73 00:06:11,070 --> 00:06:13,530 wir uns immer im Ladezustand. Daher sollten Sie 74 00:06:13,530 --> 00:06:18,200 möglicherweise auch eine Fehlerbehandlung in Betracht ziehen. Ich werde es hier einfach nicht tun, weil 75 00:06:18,200 --> 00:06:21,570 ich gezeigt habe, wie es funktioniert, um dieses Modul nicht zu sehr 76 00:06:21,660 --> 00:06:23,360 aufzublähen, ich werde es nicht implementieren, 77 00:06:23,370 --> 00:06:28,710 aber ich kann, aber natürlich könnten Sie hier Fehler behandeln, wenn Sie dies verwenden möchten, dann gehen Sie hier 78 00:06:28,710 --> 00:06:30,400 vor Wenn Sie auch 79 00:06:30,420 --> 00:06:32,790 catch hinzufügen, können Sie dies hier unbedingt tun. 80 00:06:33,430 --> 00:06:35,340 Ich werde 81 00:06:35,350 --> 00:06:43,000 mich jedoch auf den Ladeteil konzentrieren. Jetzt, da ich alles eingerichtet habe, können wir den 82 00:06:43,000 --> 00:06:45,560 Aktivitätsindikator und die Ansichtskomponente importieren 83 00:06:45,570 --> 00:06:55,340 und für einige Stile auch die Stylesheet-API aus React Native importieren und dann prüfen, ob wir uns im Ladezustand befinden. In diesem Fall 84 00:06:55,370 --> 00:07:04,890 ich Ich möchte meinen zentrierten Aktivitätsindikator hier mit einer Größe von groß und einer Farbe zurückgeben, bei der es sich um Farben handeln 85 00:07:04,920 --> 00:07:12,180 sollte, die Sie importieren müssen, daher primär. Stellen Sie also sicher, dass der Farbimport hinzugefügt wurde, und 86 00:07:12,220 --> 00:07:23,620 wenn dieser hinzugefügt wird, füge ich hier den gleichen Stil hinzu zu Stilen. zentriert oder wie auch immer Sie es benennen möchten und fügen Sie 87 00:07:23,620 --> 00:07:32,190 nun das Styles-Objekt hier mithilfe von Stylesheet hinzu. Erstellen und dort zentriert sollte 88 00:07:32,840 --> 00:07:44,750 die Einrichtung von Flex One haben, das Inhaltscenter begründen und das Elementcenter wie 89 00:07:44,750 --> 00:07:53,980 folgt ausrichten. Wenn wir es speichern, sehen wir uns die Bestellungen an und sehen den Spinner. Wieder wird es sehr schnell geladen, aber 90 00:07:54,010 --> 00:07:59,890 Sie können es sehen, wenn Sie genau hinschauen. Hier ist der Spinner für den Bruchteil 91 00:07:59,980 --> 00:08:06,850 einer Sekunde und danach werden die Bestellungen geladen. Das funktioniert jetzt, das Speichern und Abrufen von Bestellungen 92 00:08:07,030 --> 00:08:13,770 funktioniert auch. Damit haben wir HTTP-Anforderungen implementiert und einen Server zum Speichern der Daten in dieser App verwendet.