Um sicherzustellen, dass sie geladen werden,
müssen wir erneut zum Aktionsersteller zurückkehren und dem Aktionsersteller der Bestellung eine brandneue Aktion hinzufügen. Entschuldigen Sie.
Eine Kennung, die ich benötige, ist das Festlegen von Aufträgen, genau wie wir einen für Festlegen von Produkten zum
Festlegen der geladenen Aufträge hatten. Hier
habe ich dann den Aktionsersteller für Abrufaufträge, der keine Argumente akzeptiert, aber dank Redux Thunk und hier meine
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
meine geladenen Aufträge habe und das natürlich kein leeres Array sein sollte.
Stattdessen können wir die Logik vom Ersteller der Produktaktion ausleihen und dort Produkte abrufen. Wir können all diese Logik
übernehmen, all das hier kopieren und sie an den Ersteller der Auftragsaktion übertragen und
diese
ausführen, bevor wir sie hier versenden. Jetzt müssen wir dies natürlich fein abstimmen, zum Beispiel muss die Anfrage an
orders / U1 gesendet werden und diese wird später erneut durch einen dynamischen Wert ersetzt,
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
ist in Ordnung.
Hier habe ich
meine Antwortdaten erhalten, jetzt habe ich meine geladenen Bestellungen
erhalten, das scheint ein passenderer Name
zu sein. Trotzdem durchlaufe ich alle Daten, die ich erhalten habe, und ich möchte meine geladenen Bestellungen
dort unten festlegen, aber jetzt gibt es einen
wichtigen Unterschied. Ich erstelle hier keine neuen Produkte, die ich zu geladenen Bestellungen
hinzufüge, stattdessen muss ich hier natürlich neue Bestellungen erstellen und
dafür müssen Sie Bestellungen aus dem Bestellmodell importieren. Jetzt sehe ich auch, dass es eine
fehlende geschweifte Klammer gibt. Bevor ich übrigens damit fortfahre, muss ich sicherstellen, dass ich
auch alle Fehler abfange, die ich möglicherweise bekomme, und dort möchte ich den Fehler werfen, im Grunde genommen erneut werfen, sicherstellen es
erreicht meine Komponente
und ich brauche noch eine schließende geschweifte Klammer, aber jetzt zurück zu unserer Logik
hier, wo ich neue Bestellungen erstelle, dort ist die ID der
Schlüssel, genau wie für die Produkte, die Artikel können in meinen Antwortdaten gefunden werden, weil wir Im Grunde genommen erhalten
Sie dies hier richtig zurück, sodass die Antwortdaten beispielsweise einen Kartenelementschlüssel enthalten, der meine
Kartenelemente enthält, die ich benötige. Also Antwortdaten für den angegebenen Schlüssel und dort ,. cardItems, dort finde ich
meine Artikel, weil wir diese am Ende hier senden, um die Kartenartikel zu speichern. Dann benötigt meine Bestellung,
die ich hier erstelle, natürlich auch den Gesamtbetrag. Ich bekomme
diesen vom resData-Schlüssel und dann dort, wenn wir ihn haben Ein Blick auf Firebase,
es ist das Feld für den Gesamtbetrag hier und das Datum.
Gut dafür erstelle ich ein neues Datumsobjekt, aber ich initialisiere dies mit dem resData-Schlüssel. Datum.
Jetzt müssen wir ein neues Datenobjekt erstellen, weil resData Schlüssel. Datum ist nur diese Datumszeichenfolge hier und ich
brauche ein Datumsobjekt, keine Datumszeichenfolge, daher umschließen
wir es, diese Zeichenfolge umschließen wir mit der Datumsobjekterstellung hier und daher erhalten wir ein Datenobjekt und das
ist
die Reihenfolge, die ich hier hinzufüge Bei geladenen Bestellungen
tun wir dies für alle Bestellungen, die wir abrufen, und damit können wir diese versenden, und jetzt
müssen wir sie nur noch im Bestellungsreduzierer bearbeiten.
Wenn ich also festgelegte Aufträge abwickle und dafür natürlich diese Aktionskennung importieren muss, muss ich nur ein neues Statusobjekt zurückgeben,
bei dem Aufträge gleich Aktion sind. Bestellungen und das ist alles was
wir tun müssen, also
ganz einfach.
Warum ist es so einfach?
Denn im Action Creator erledigen wir die ganze Arbeit. Dort ordnen wir unsere Bestellungen zu und
hier habe ich nur den Bestellschlüssel für meine Aktion,
der alle zugeordneten Bestellungen enthält. Genau das muss ich hier speichern.
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
erneut hinzu, um dies zu tun. Zum Versenden müssen wir auch den Use-Dispatch aus
React Redux importieren. Hier können wir dann auf
diese Dispatch-Funktion zugreifen, indem wir den Use-Dispatch ausführen und dann hier
den Use-Effekt ausführen. Wir fügen den Versand als Abhängigkeit hinzu, da ich in dieser Effektfunktion hier versende
und jetzt meine Bestellaktionen benötige.
Lassen Sie mich also alles als Bestellaktionen aus dem Speicherordner, aus dem Aktionsordner, aus der Bestelldatei
und mit der hier importierten importieren können wir Befehle Aktionen sagen. fetchOrders so und dann werden wir fortfahren und diese Anfrage stellen. Wenn
wir dies jetzt speichern und zum Bestellbildschirm gehen, ist es zunächst leer, aber
sehr, sehr schnell und es lädt alle Bestellungen, die wir gespeichert haben und das sind diese drei Aufträge, die ich hier
habe und natürlich können wir diese wie bisher erweitern. Jetzt wäre auch ein Ladespinner nett und natürlich können
Sie das Video
auch hier pausieren und selbst ausprobieren.
Ich mache es schnell auf die gleiche Weise wie zuvor - importiere
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
und dann hier im Effekt, am Ende, den ich möchte async verwenden warten.
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
eine Hilfsfunktion einbinden.
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
wir eine Antwort haben, also setze ich isLoading hier auf false.
Bitte beachten Sie, dass ich hier keine Fehlerbehandlung habe. Wenn
dies fehlschlägt, behandeln wir dies nicht. Stattdessen befinden
wir uns immer im Ladezustand. Daher sollten Sie
möglicherweise auch eine Fehlerbehandlung in Betracht ziehen. Ich werde es hier einfach nicht tun, weil
ich gezeigt habe, wie es funktioniert, um dieses Modul nicht zu sehr
aufzublähen, ich werde es nicht implementieren,
aber ich kann, aber natürlich könnten Sie hier Fehler behandeln, wenn Sie dies verwenden möchten, dann gehen Sie hier
vor Wenn Sie auch
catch hinzufügen, können Sie dies hier unbedingt tun.
Ich werde
mich jedoch auf den Ladeteil konzentrieren. Jetzt, da ich alles eingerichtet habe, können wir den
Aktivitätsindikator und die Ansichtskomponente importieren
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
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
sollte, die Sie importieren müssen, daher primär. Stellen Sie also sicher, dass der Farbimport hinzugefügt wurde, und
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
nun das Styles-Objekt hier mithilfe von Stylesheet hinzu. Erstellen und dort zentriert sollte
die Einrichtung von Flex One haben, das Inhaltscenter begründen und das Elementcenter wie
folgt ausrichten. Wenn wir es speichern, sehen wir uns die Bestellungen an und sehen den Spinner. Wieder wird es sehr schnell geladen, aber
Sie können es sehen, wenn Sie genau hinschauen. Hier ist der Spinner für den Bruchteil
einer Sekunde und danach werden die Bestellungen geladen. Das funktioniert jetzt, das Speichern und Abrufen von Bestellungen
funktioniert auch. Damit haben wir HTTP-Anforderungen implementiert und einen Server zum Speichern der Daten in dieser App verwendet.