Beginnen wir mit der Verwaltung des Ladezustands hier auf dem Authentifizierungsbildschirm, da ich dem Benutzer natürlich ein
Feedback geben möchte, wenn wir gerade auf eine Antwort warten.
Dazu können wir den Aktivitätsindikator, den Sie bereits kennen, importieren und den Ladezustand hier verwalten, indem
wir hier einen weiteren Zustand hinzufügen, isLoading, und isLoading setzen, das wir auf false initialisieren, da wir anfänglich nicht laden und jetzt hier,
wenn wir uns in dieser Authentifizierung befinden Handler, ich kann hier asynchron hinzufügen, da die Anmeldung hier natürlich ein Versprechen zurückgibt, das gleiche gilt
für die Anmeldung. Daher geben
diese Funktionen des Erstellers von Aktionen Versprechen zurück. Wir können also auf das Ergebnis des Versands
warten, das letztendlich diese Versprechen verwendet, die wir erhalten, und im Grunde genommen den gesamten Prozess einleitet. Bevor wir darauf
warten, kann ich isLoading auf true setzen. Wenn wir also den gesamten
Prozess starten, bevor wir eine Anfrage senden und setzen Sie danach isLoading auf false, sobald wir mit dieser
Anforderung fertig sind, unabhängig davon, ob sie fehlgeschlagen ist oder nicht.
Und jetzt kann isLoading verwendet werden, um einen
Ladespinner anzuzeigen. Es liegt an Ihnen, wo Sie dies anzeigen. Sie können beispielsweise sagen, dass Sie diese
Anmeldeschaltfläche durch den Ladespinner ersetzen möchten.
Hier könnten wir also sagen, wenn isLoading wahr ist, möchte ich
den Aktivitätsindikator so anzeigen, andernfalls werde ich die Schaltfläche anzeigen,
also ist dies die Syntax, die wir
verwenden könnten, setzen Sie die
Größe hier auf klein und die Farbe auf Farben. primär sagen wir mal. Wenn wir das versuchen und
zurückgehen, hier auf iOS, wenn ich mich einlogge, sehe ich tatsächlich den Ladespinner und dann bin ich zurück,
damit das funktioniert, jetzt für die Fehlerbehandlung.
Für die Fehlerbehandlung erfahren Sie auch, wie das funktioniert.
Natürlich können Sie Ihren Fehlerstatus auch hier verwalten. Sie
können auch wieder den Reduzierer verwenden, um das Laden und den Fehlerstatus in
einem
Objekt zusammenzuführen. Ich mache das jedoch so: Fehler und setze Fehler
mithilfe des Verwendungsstatus, der anfangs nicht funktioniert Weisen Sie keinen Wert zu, damit dieser anfangs undefiniert ist. Dann können wir hier versuchen,
diesen Versand hier abzufangen, wo wir einen potenziellen Fehler erhalten, und
unseren Fehler auf diese Fehlermeldung setzen, die wir zurückerhalten, und bevor wir die Anfrage senden. Ich
möchte meinen Fehler auch auf null zurücksetzen. Jetzt speichern wir hier einen potenziellen Fehler in Set Error und ich
möchte nur eine Warnung auslösen und dem Benutzer eine Warnung anzeigen, wenn wir einen Fehler erhalten.
Dazu müssen Sie sicherstellen, dass Sie eine Warnung aus React Native importieren und auch
den Effekt aus "Reagieren" verwenden, da wir mit dem Verwendungseffekt auf Änderungen im Fehlerstatus
reagieren und die Fehlerwarnung anzeigen können, wenn ein Fehler auftritt. Vielleicht können wir hier nach dem Einrichten des Reduzierers den Verwendungseffekt hinzufügen, und meine Abhängigkeit
hier ist die Fehlerzustandsvariable oder -konstante. Wenn wir einen Fehler haben, wenn dies wahr ist,
möchte ich eine Warnung mit der Warnung anzeigen API, bei der ich sage, dass ein Fehler aufgetreten ist und meine Nachricht der Fehler ist, der
eine Zeichenfolge sein sollte, und ich werde eine Schaltfläche hinzufügen, in der ich den Text OK habe,
und natürlich können Sie weitere Schaltflächen hinzufügen, in denen Sie verschiedene Dinge tun.
Jetzt können wir dies im Aktionsersteller simulieren, indem wir dorthin gehen und uns anmelden. Nehmen wir an, wir entfernen das D
hier, sodass dies am Ende eine falsche URL ist. Wenn wir uns jetzt hier anmelden, wird
dieser Fehler angezeigt.
Das
ist gut so, aber es gibt auch andere Arten von Fehlern, die ich behandeln möchte, zum Beispiel, wenn
ich mich mit einer E-Mail-Adresse anmelde, die es nicht gibt. Natürlich möchte ich dem Benutzer auch einen Fehler anzeigen,
aber ich zeige nur, dass etwas schief gelaufen ist, was nicht genau der Fehler ist, den ich anzeigen möchte.
Jetzt zeige ich diesen Fehler, weil im Aktionsersteller hier, wenn die Antwort nicht in Ordnung ist, etwas schief
gelaufen ist.
Das Problem ist jetzt, wenn wir eine falsche E-Mail oder ein falsches Passwort senden, auch
übrigens für die Anmeldung, wenn wir etwas senden, das keine E-Mail oder ein zu kurzes Passwort ist. Wenn dies passiert, werden
wir es tun Erhalten Sie eine Antwort mit einem Statuscode von 400 zurück und wir erhalten einige Fehlerdetails als Teil der
Antwort. Im
Moment sehen wir diese bei unserer Fehlerbehandlung nicht,
daher müssen wir dies ändern. Anstatt hier sofort einen Fehler zu werfen,
wenn die Antwort nicht in Ordnung ist, möchte ich ihn trotzdem untersuchen.
Ich werde also meine Fehlerantwortdaten haben, die ich
erhalte, wenn ich hier auf die Antwort JSON warte. Also mache ich dasselbe wie im Erfolgsfall, aber ich extrahiere es in ein
anderes Feld und jetzt möchte ich hier die Fehlerantwortdaten konsolidieren,
damit wir ein Gefühl dafür bekommen, wie dies aussieht.
Versuchen wir nun, eine E-Mail-Adresse einzugeben, die nicht mehr existiert. Jetzt erhalten wir unseren seltsamen Fehler, den Sie gerade gesehen haben. Jetzt haben wir diese interessante Ausgabe hier
und Sie sehen, dass dies das Fehlerobjekt ist, das Firebase mir und natürlich zurückgegeben hat Dies hängt
von der API ab,
mit der Sie sprechen, welche Art von Fehler Sie erhalten und
wann Sie ihn erhalten und welche Details er enthält. Wie Sie sehen, handelt es sich um ein
Objekt mit einem Fehlerschlüssel, bei dem es sich um ein weiteres Objekt handelt, das einen Fehlercode, einige Details zu den Fehlern
und dann die Meldung enthält, dass beispielsweise eine E-Mail nicht gefunden wurde, und das ist
der Teil, der mich interessiert. In den offiziellen Dokumenten finden Sie übrigens weitere potenzielle
Fehlerkennungen, die Sie möglicherweise erhalten. Am
Ende möchte ich das jetzt überprüfen. Ich möchte meine Fehler-ID aus den Fehlerantwortdaten abrufen, indem ich auf
das Fehlerfeld dort zugreife, das dieses Feld ist, das mir Zugriff auf dieses Objekt gibt, das dann
dieses Nachrichtenfeld hat.
Daher greife ich hier auf die Nachricht zu, um diese Nachricht zu erhalten, und jetzt können wir dies überprüfen. Wir können
überprüfen, ob die Fehler-ID gleich der nicht gefundenen E-Mail ist. Wenn dies der Fall ist, möchte ich meine eigene angepasste
Nachricht festlegen. Daher füge ich hier eine variable Nachricht hinzu, bei der standardmäßig nur ein Fehler aufgetreten ist.
Wenn wir jedoch wissen, dass das Problem darin besteht, dass wir keine E-Mail gefunden haben Adresse,
wir könnten sagen, dass diese E-Mail nicht gefunden wurde und ich werde mehr hinzufügen, wenn in einer Sekunde überprüft.
Dies ist also etwas, das ich hier überprüfen möchte, und am Ende habe ich daher eine Nachricht, die ich jetzt werfen möchte.
Jetzt
werde ich jedoch einen neuen Fehler mit meiner eigenen angepassten Nachricht auslösen. Eine weitere Überprüfung, die
ich hier mit einer else / if-Anweisung hinzufügen möchte, ist, ob die Fehler-ID
für die Anmeldung eines ungültigen Kennworts bestimmt ist. Also kann ich das überprüfen und die Nachricht gleich setzen, dass dieses Passwort ungültig ist. Jetzt versuchen
wir es noch einmal.
Gehen wir zurück und geben eine E-Mail-Adresse ein, die nicht existiert. Melden Sie sich schnell an und wir erhalten, dass diese E-Mail-Adresse
nicht gefunden wurde oder diese E-Mail nicht gefunden wurde.
Versuchen wir nun eine gültige E-Mail-Adresse, aber tatsächlich ist ein Passwort, das ungültig ist, wie dieses, und wir erhalten, dass dieses Passwort nicht
gültig ist, also
geben wir dem Benutzer jetzt ein besseres Feedback.
Lassen Sie uns jetzt dasselbe für die Anmeldung implementieren, also kopiere ich das und gehe hier und da zu meinem
Anmeldefall. Ich habe nur verschiedene Fehlercodes.
Dort habe ich Codes wie E-Mail, wenn
diese E-Mail-Adresse bereits vorhanden ist.
Also extrahiere ich meine Fehler-ID auf die gleiche Weise, aber dann überprüfe ich, ob E-Mails vorhanden sind. Wenn dies der Fehler ist, sage ich, dass diese
E-Mail bereits vorhanden ist.
Dies ist eigentlich das
einzige, was ich hier überprüfen möchte. Es gibt auch andere Fehler, die auftreten können. Sie können beispielsweise einfach Ihre
Validierung hier deaktivieren und sehen, welchen Fehler Sie erhalten, wenn Sie eine ungültige E-Mail senden. E-Mail-Adresse
durch Protokollieren dieser Fehler-ID und dann können
Sie auch danach suchen. Hier implementiere ich nur diese Nachricht. Wenn ich mich jetzt hier mit einer E-Mail-Adresse anmelde,
die ich bereits verwendet habe, erhalte ich diese Diese E-Mail existiert bereits. Auf der anderen Seite, wenn ich natürlich eine gültige
E-Mail-Adresse verwende, geht dies nur durch und auf Firebase. Wenn Sie zur Authentifizierung gehen und diese
aktualisieren, sehen Sie tatsächlich diesen zweiten Benutzer.
Auf diese Weise können Sie einen Ladespinner und eine Fehlerbehandlung mit Authentifizierung hinzufügen.
Das ist alles schön, aber jetzt wäre es endlich schön, auch diesen Bildschirm zu verlassen und zu unserer App zu gehen und
dann mit dem Token zu arbeiten, das wir bekommen.