Nachdem wir nun das Speichern, Abrufen, Aktualisieren und Löschen und damit alle Funktionen
hinzugefügt haben und einen Lade-Spinner angezeigt und Fehler behandelt
haben, fehlen zwei Dinge.
Eine davon ist, dass wir, wenn wir tatsächlich eine Bestellung aufgeben, diese Bestellung auch an einen Server senden und die Bestellung dort auch
speichern und nicht nur lokal, denn gerade jetzt,
wenn wir etwas bestellen, sehen wir sie hier, aber sobald Wir laden die App neu, da wir
sie nicht auf einem Server speichern, der verloren geht. Das
ist also eine Sache.
Die andere Sache ist natürlich, dass wir hier nur einen Ladespinner
zeigen und auch hier nur Fehler behandeln. Wenn auf dem Admin-Bildschirm etwas schief
geht, wird kein Fehler angezeigt. Auch hier sehen wir keinen Lade-Spinner, wenn wir dies
bearbeiten und einreichen. Während wir darauf warten, dass dies übermittelt wird.
Das ist auch etwas, das wir verbessern könnten,
und das ist eigentlich der Teil, mit dem ich beginnen möchte.
Hier auf dem Bildschirm zum Bearbeiten von Produkten, wenn wir die Aktualisierung oder Erstellung versenden, dauert
dies in beiden Fällen natürlich eine Weile, und wir erhalten hier tatsächlich ein Versprechen zurück, da wir sowohl beim Aktualisieren
als auch beim Erstellen der Produktaktion die Redux Thunk-Funktion von verwenden Hier wird eine asynchrone Versandfunktion zurückgegeben,
die daher ein Versprechen zurückgibt, das daher im Rahmen unseres Versandfunktionsaufrufs hier zurückgegeben wird.
Daher erhalten wir tatsächlich die Informationen, ob wir auf die Antwort warten, ob wir einen
Fehler erhalten haben oder ob
wir fertig sind, wir
müssen sie nur verwenden und natürlich können wir sie auf ähnliche Weise wie zuvor verwenden. mit aus React importiertem
Nutzungsstatus und anschließendem Verwalten des Lade- und Fehlerstatus hier. Nebenbei bemerkt, Sie können natürlich auch mit einem
Reduzierer arbeiten, bei dem Sie beide Zustände zusammenführen, wenn Sie dies mithilfe des Reduzierhakens verwenden möchten.
Hier bleibe ich jedoch bei isLoading und setze isLoading und anfangs ist dies natürlich falsch und habe auch den Fehler und
setze hier Fehlervariablen mit einem Verwendungsstatus wie diesem, der anfangs undefiniert ist und jetzt müssen wir dies nur so einstellen, wie wir es
tun. ' Aktionen erneut versenden oder wenn wir Fehler bekommen.
Wenn wir dies also versenden möchten, egal ob wir es bearbeiten oder
erstellen, möchte ich isLoading auf true setzen und meinen Fehler hier auf false oder nicht auf false, auf null setzen , Setzen Sie es zurück.
Sobald wir fertig sind, möchte ich etwas anderes tun, aber dafür müssen wir zunächst warten, bis
der Versand abgeschlossen ist.
Jetzt können wir dies wieder in eine asynchrone Funktion umwandeln, nur damit ich dort auf das
Schlüsselwort warten kann. Die Alternative wäre, dies nicht in eine asynchrone Funktion umzuwandeln und dann einfach hinzuzufügen und danach
zu fangen,
das würde aber auch funktionieren Ich benutze gerne Async Wait. Jetzt können wir also darauf warten, dass beide Versendungen abgeschlossen sind.
Natürlich wird nur einer der beiden ausgeführt, da dies eine if-Bedingung ist, aber wir können
warten, bis dies abgeschlossen ist, und daher wissen wir
nach diesem if-Block, dass der Versand abgeschlossen ist kann isLoading wieder auf false setzen. Das ist also der Ladezustand. Um Fehler zu behandeln,
müssen wir dies nur mit einem try catch-Block umschließen, und wir können den gesamten if-Block hier mit try
catch umschließen. Nehmen wir das also, verschieben Sie es hierher und fangen Sie dann jedes Potenzial ab Fehler, die wir
möglicherweise hier und jetzt hier bekommen. Ich möchte meinen Fehler natürlich auf den Fehler setzen,
den
ich hier bekomme, oder auf die Fehlermeldung, die ich hier bekomme. Jetzt setzen wir den Fehler, wir
setzen das Laden Zustand, natürlich hat dies hier auf diesem Bildschirm keine Auswirkung. Um einen Ladespinner anzuzeigen, müssen wir den Aktivitätsindikator aus React Native
und den Aktivitätsindikator aus React Native importieren.
Um einen Fehler anzuzeigen, möchte ich auch eine Warnung auslösen.
Dazu müssen Sie sicherstellen, dass Sie importieren die Warnung, die wir bereits machen. Als nächsten Schritt, um den Ladezustand zu handhaben, werde ich möglicherweise dort unten,
bevor ich mein Formular zurückschicke, prüfen, ob isLoading wahr ist, und wenn dies der Fall ist, werde ich meine Ansicht
hier mit dem Aktivitätsindikator dort und dort zurückgeben. Wenn Sie die Größe auf groß und die Farbe auf Farben einstellen, müssen Sie
sicherstellen, dass Sie diese Farben als Primärkonstante importieren. Stellen Sie also sicher, dass Sie diese Farbkonstante hier
importiert haben, das ist erforderlich, und jetzt werde ich das Stylesheet hier auch verwenden, um einen neuen Stil
hinzuzufügen, genauer gesagt diesen zentrierten Stil. Hier werde ich zentriert hinzufügen und ja, wir könnten dies
daher auch in einen auslagern separate Verpackungskomponente, wenn Sie möchten.
Dort setze ich Flex auf Eins, begründe das Zentrieren von Inhalten und richte Elemente wie folgt auf Zentrieren aus.
Jetzt können wir diesen zentrierten Stil hier auf die Ansicht anwenden, die ich um meinen Aktivitätsindikator wickle, indem wir
den Stil hier auf Stile setzen. zentriert.
Jetzt sollten wir dies sehen, während wir laden, und nebenbei bemerkt, wir sollten jetzt auch nicht zurück navigieren, bevor
wir fertig sind.
Wenn ich also dieses Ausrufezeichen hinzufüge oder entferne und diese Eingabe dann belasse, damit diese übermittelt wird und ich auf Speichern
klicke, haben Sie
den Ladespinner gesehen, und wir navigieren erst zurück, wenn dies erledigt ist.
Jetzt ist Firebase super schnell, aber genau das ist passiert.
Um nun einen Fehler zu simulieren, gehe ich zu den Produktaktionen und dort im Update-Produkt hier unten werde ich das hier wieder entfernen, um einen Fehler zu erzwingen, und ich werde noch
etwas hinzufügen. Ich werde jetzt die Antwort hier in einem speichern konstant, weil es mich jetzt
wirklich interessiert, ich möchte sicherstellen, dass wenn die Antwort nicht in Ordnung ist. Wenn
wir also einen 400- oder 500-Statuscode haben, wirf ich auch einen neuen
Fehler, wenn ich sage, dass etwas schief gelaufen ist oder wenn Sie einen Fehler machen Behandlung, die Sie tun möchten, damit
wir auch in diesem Fall einen Fehler auslösen. Übrigens mache ich dasselbe beim
Löschen, bevor wir diesen erzwungenen Fehler testen, den ich implementiert habe.
Hier zum Löschen möchte ich dies auch überprüfen und dafür muss ich natürlich
auch hier meine Antwort erhalten, indem ich auf das Abrufen hier warte. Okay, mal sehen, ob dieser erzwungene Fehler
beim Aktualisieren aufgrund des Entlassens von s hier
ist, wenn dies Auswirkungen hat. Wenn ich jetzt zurück zum Administrator gehe, füge ich
dies hinzu, füge
ein Ausrufezeichen hinzu und klicke darauf. Jetzt sehen Sie, dass das Update einfach verworfen wird, sodass wir das Ausrufezeichen
hier nicht sehen, aber wir auch bekomme keine Fehlermeldung, was Sinn macht, weil ich keine Logik dafür habe.
Wie können wir damit umgehen?
Wie gesagt, ich möchte einen Alarm
auslösen und werde daher den Use-Effekt verwenden, so dass der Use-Effekt-Hook, den React anbietet, den wir
hier finden, ich möchte das verwenden und ich kann das hier einfach implementieren, nachdem ich
den Reduzierer initialisiert habe. Die genaue Position spielt keine Rolle. Der hier verwendete Effekt sollte wiederholt werden, wenn sich der
Fehler ändert. Wenn wir also festlegen, dass dieser Fehler
kein Fehler ist, überprüfe ich hier, ob der Fehler wahr ist. Wenn wir also einen
Fehler haben und wenn wir diesen haben, dann ich kann eine Warnung
auslösen, ist ein Fehler aufgetreten.
Ich möchte meinen Fehler hier ausgeben und das sollte die Fehlermeldung sein, da ich dies hier einstelle. Ich setze meinen
Fehler
auf die Meldung, sodass dies eine Zeichenfolge sein sollte, die ich ausgeben kann, und füge dann
eine Schaltfläche hinzu wo ich OK sage, was dies einfach ablehnt. Jetzt auch wichtig, wenn wir einen Fehler bekommen,
möchte ich nicht weg navigieren. Um dies zu vermeiden, möchte ich
sicherstellen, dass hier, diese Requisiten, diese Navigation hier tatsächlich nur ausgeführt wird, wenn wir nicht in diesem Fangblock landen.
Also im Grunde hier nach dem if else-Block, aber immer noch im try-Block, dort möchte ich weg navigieren.
Versuchen wir es jetzt noch einmal, gehen wir
zurück, bearbeiten dies, fügen ein
Ausrufezeichen hinzu, klicken auf eine andere Stelle, klicken auf Speichern und jetzt erhalte
ich hier meine Fehlermeldung und bleibe auf dieser Seite und sie wird auch zurückgesetzt. Ich kann das nochmal hinzufügen, hier klicken
und es ist weg.
Auf der anderen Seite, wenn wir diesen Fehler jetzt hier in den Aktionen beheben, indem wir ihn hier lesen, und wir
gehen jetzt zurück und schauen uns das noch einmal
an. Wenn ich das bearbeite, füge mein Ausrufezeichen hinzu, klicke woanders hin und klicke
jetzt auf Speichern Alles funktioniert wie es sollte.
Jetzt funktioniert das wirklich und jetzt verhält es sich so, wie es sich verhalten sollte.
Jetzt können Sie hier natürlich auch einen Ladespinner und einen Fehlerbehandler zum Benutzerproduktbildschirm hinzufügen, wenn
Sie möchten.
Wenn Sie dies löschen, was ich hier nicht tun werde, aber wenn Sie dies löschen würden, würden Sie
derzeit keinen Spinner erhalten, keinen
Ladespinner, und Sie erhalten auch keinen Fehler, wenn dies fehlschlägt. Um Zeit zu sparen, werde ich dies hier nicht implementieren,
aber Sie können es im Grunde genauso implementieren, wie wir es zuvor getan haben, wenn Sie wollten.
Das können Sie also definitiv auch tun.