Cominciamo con la gestione dello stato di caricamento qui nella schermata di autenticazione perché ovviamente voglio
dare un feedback all'utente quando stiamo attualmente aspettando una risposta.
Per questo, possiamo importare l'indicatore di attività che già conosci e gestire qui lo
stato di caricamento aggiungendo qui un altro stato, isLoading e impostando isLoading che inizializziamo su false perché inizialmente non stiamo caricando
e ora qui quando siamo in questa autenticazione gestore, posso aggiungere asincrono qui perché ovviamente iscriversi qui restituisce una promessa, lo stesso
per il login, quindi queste
funzioni del creatore di azioni restituiscono promesse. Quindi possiamo aspettare il risultato dell'invio che
alla fine usa queste promesse che otteniamo e fondamentalmente dà il via a questo intero processo e prima
di aspettare questo, posso impostare isLoading su true, quindi quando iniziamo
l'intero processo, prima di inviare una richiesta e successivamente impostare isLoading su false una volta terminata
questa richiesta, indipendentemente dal fatto che abbia fallito o meno.
E ora isLoading può essere utilizzato per visualizzare uno
spinner di caricamento, dipende da te dove lo visualizzi, ad esempio potresti dire che vuoi sostituire questo pulsante di
iscrizione con lo spinner di caricamento.
Quindi qui potremmo dire se isLoading è vero, voglio mostrare
l'indicatore di attività in questo modo, altrimenti mostrerò il pulsante,
quindi questa è la sintassi che
potremmo usare, impostare qui le
dimensioni su small e il colore su Colors. primario diciamo. Ora se ci proviamo e torniamo
indietro, qui su iOS se provo ad accedere, in effetti vedo lo spinner di caricamento e poi sono tornato, quindi
funziona, ora per la gestione degli errori.
Per la gestione degli errori, impari anche come funziona.
Ovviamente puoi anche gestire il tuo stato di errore
qui, puoi utilizzare nuovamente il riduttore per unire il caricamento e lo stato di
errore in
un oggetto, ma lo farò in questo modo, errore e impostazione dell'errore
con l'aiuto dello stato d'uso che inizialmente non assegnare un valore in modo che inizialmente non sia definito e quindi qui, possiamo concludere provare
a aggirare questo dispacciamento qui dove otteniamo un potenziale errore e impostiamo
il nostro errore su questo messaggio di errore che stiamo tornando e prima di inviare la richiesta, Voglio
anche riportare il mio errore su null. Quindi ora stiamo memorizzando un potenziale errore qui nell'errore impostato
e voglio solo lanciare un avviso, mostrare un avviso all'utente se otteniamo un errore.
Pertanto, per questo è necessario assicurarsi di importare l'avviso da React Native e anche di
usare effect from reply perché use effect ci consente di reagire ai cambiamenti nello stato di
errore e di mostrare l'avviso di errore se si verifica un errore. Quindi forse qui dopo aver impostato il riduttore, possiamo aggiungere l'effetto use e la mia
dipendenza qui è la variabile o la costante dello stato di errore e se abbiamo un
errore, quindi se questo è vero, allora voglio mostrare un avviso con l'avviso API in cui dico che si è verificato un errore e il mio
messaggio è l'errore che dovrebbe essere una stringa e aggiungerò un pulsante in cui ho un testo
di OK e ovviamente potresti aggiungere più pulsanti in cui fai cose diverse.
Ora possiamo simularlo nel creatore dell'azione andando lì e per il login, supponiamo di rimuovere quella D qui, in
modo che alla fine questo sia un URL errato. Se ora proviamo ad accedere qui,
visualizzo questo errore.
Ora
va bene, ma ci sono anche altri tipi di errori che voglio gestire, ad esempio se
accedo con un indirizzo e-mail che non esiste? Ovviamente voglio mostrare anche un errore all'utente e
lo faccio, ma mostro solo qualcosa che è andato storto, che non è esattamente l'errore che vorrei mostrare.
Ora sto mostrando questo errore perché nel creatore dell'azione qui, se la risposta non è OK, lancio qualcosa è
andato storto.
Ora il problema è quando inviamo un'e-mail errata o una password errata, anche per la
registrazione se inviamo qualcosa che non è un'e-mail o una password che è troppo breve, se ciò accade, allora lo faremo ottenere
una risposta con un codice di stato di 400 qualcosa e otteniamo alcuni dettagli di errore come parte della risposta e
in questo
momento con la nostra gestione degli errori, non
li vediamo, quindi dobbiamo cambiarlo. Invece di lanciare immediatamente un errore
qui se la risposta non va bene, voglio ancora esaminarlo.
Quindi avrò i miei dati di risposta
all'errore che ottengo aspettando la risposta JSON qui. Quindi faccio lo stesso come nel caso del successo, ma lo estraggo in un
campo diverso e ora qui voglio consolare i dati di risposta
dell'errore in modo da avere un'idea di come appare.
Quindi ora proviamo a inserire un indirizzo e-mail che non esiste più e ora otteniamo il nostro strano errore che hai appena visto ma ora abbiamo questo
output interessante qui e vedi che questo è l'oggetto di errore che Firebase mi ha restituito e,
naturalmente, dipende dall'API
con cui stai parlando, dal tipo di errore che stai riscontrando,
da quando lo ricevi e dai dettagli che include. Questo come vedi è un oggetto che
ha una chiave di errore che è ancora un altro oggetto che ha un codice di errore, alcuni dettagli sugli
errori e quindi questo messaggio che è ad esempio l'email non trovata ed è
la parte che mi interessa. A proposito, nei documenti ufficiali troverai più potenziali identificatori
di errori che potresti ottenere. Quindi alla
fine, è quello che voglio controllare ora. Voglio ottenere il mio ID errore, diciamo dai dati di risposta dell'errore accedendo
al campo di errore lì che è questo campo che mi dà accesso a questo oggetto che quindi ha
questo campo di messaggio.
Quindi quindi qui, accedo quindi al messaggio per ottenere questo messaggio e ora possiamo verificarlo, possiamo verificare
se l'ID errore è uguale all'email non trovata. In tal caso, voglio impostare il mio messaggio personalizzato, quindi
qui aggiungerò un messaggio variabile che è solo qualcosa che è andato storto per impostazione predefinita, ma
qui se sappiamo che il problema è che non abbiamo trovato un'e-mail indirizzo, potremmo dire
che questa e-mail non è stata trovata e ne aggiungerò altre in caso di controlli in un secondo.
Quindi questo è qualcosa che voglio controllare qui e alla fine, quindi, ho un messaggio che ora voglio lanciare,
quindi
ora lancerò un nuovo errore con il mio messaggio personalizzato. Quindi un altro controllo
che voglio aggiungere con un'istruzione else / if qui è se l'ID errore
è per l'accesso con password non valida, diciamo. Quindi posso verificarlo e impostare il messaggio uguale a questa password non è valido e ora
proviamo un altro tentativo.
Torniamo indietro e immettiamo un indirizzo e-mail che non esiste, non è possibile trovare questo indirizzo e-mail o
non è possibile trovare questo indirizzo e-mail.
Ora proviamo un indirizzo e-mail valido ma in realtà una password non valida, in questo modo e otteniamo che questa password
non sia valida,
quindi ora forniamo all'utente un feedback migliore.
Ora implementiamo lo stesso per la registrazione, quindi lo copierò e andrò al mio caso di registrazione qui e
là ho solo diversi codici di
errore, lì ho codici come l'e-mail esiste,
se l'indirizzo e-mail esiste già.
Quindi estraggo il mio ID errore allo stesso modo, ma poi controllo la presenza di email e se questo è l'errore, dico che
questa email esiste già.
Ora questa è in
realtà l'unica cosa che voglio controllare qui, ci sono anche altri errori che potresti ottenere e puoi ad esempio semplicemente disattivare
la convalida qui e vedere quale errore stai ricevendo se stai inviando un e- non valido
indirizzo di posta elettronica registrando quell'ID errore
e quindi puoi verificarlo anche qui, qui implementerò solo questo messaggio e quindi ora se provo a registrarmi qui con
un indirizzo e-mail che ho già usato, come questo, ottengo questa e-mail esiste già. D'altra parte, se uso un indirizzo e-mail valido,
ovviamente, questo passa attraverso e su Firebase, quindi, se vai all'autenticazione e aggiorni
questo, vedrai quel secondo utente.
Quindi è così che puoi aggiungere un filatore di caricamento e la gestione degli errori con l'autenticazione.
Va tutto bene, ma ora sarebbe finalmente bello lasciare anche quella schermata e andare sulla nostra app e quindi iniziare
a lavorare con quel token che stiamo ottenendo.