Commençons par gérer l'état de chargement ici sur l'écran d'authentification, car je veux évidemment donner
à l'utilisateur des commentaires lorsque nous attendons actuellement une réponse.
Pour cela, nous pouvons importer l'indicateur d'activité que vous connaissez déjà et gérer l'état de chargement
ici en ajoutant un autre état ici, isLoading et définissez isLoading que nous initialisons sur false car initialement nous ne chargeons pas et
maintenant ici quand nous sommes dans cette authentification gestionnaire, je peux ajouter async ici car bien sûr, inscrivez-vous ici renvoie une promesse, la même
chose pour la connexion, donc
ces fonctions de création d'actions renvoient des promesses. Nous pouvons donc attendre le résultat de
l'envoi qui utilise finalement ces promesses que nous obtenons et démarre essentiellement tout ce processus et avant d'attendre
cela, je peux définir isLoading sur true, donc lorsque nous commençons
tout ce processus, avant d'envoyer une demande puis définissez isLoading sur false une fois que
nous avons terminé cette demande, qu'elle échoue ou non.
Et maintenant isLoading peut être utilisé pour afficher une filière
de chargement, c'est à vous de décider où vous l'afficher, par exemple, vous pouvez dire que vous souhaitez remplacer ce
bouton d'inscription par la filière de chargement.
Donc, ici, nous pourrions dire si isLoading est vrai, je
veux montrer l'indicateur d'activité comme ça, sinon je montrerai le
bouton, donc c'est la syntaxe que nous
pourrions utiliser, définissez la taille
ici sur petit et la couleur sur Couleurs. disons primaire. Maintenant, si nous essayons et que nous
revenons, ici sur iOS si j'essaie de me connecter, en effet je vois le spinner de chargement et puis je suis de retour,
donc
ça marche, maintenant pour la gestion des erreurs. Pour la gestion des erreurs, vous apprenez également comment cela fonctionne.
Vous pouvez bien sûr également gérer votre état d'erreur ici,
vous pouvez également utiliser use reducer pour fusionner le chargement et l'état d'erreur en un
seul objet,
mais je le ferai comme ceci, erreur et définir l'erreur à l'aide
de l'état d'utilisation qui ne le fait pas initialement N'attribuez pas de valeur de sorte que cela ne soit pas défini au départ, puis ici, nous
pouvons envelopper la capture autour de cette répartition ici où nous obtenons une
erreur potentielle et définir notre erreur sur ce message d'erreur que nous recevons et avant d'envoyer la demande, Je
veux également remettre mon erreur à null. Alors maintenant, nous stockons une erreur potentielle ici dans set error et
je veux simplement lancer une alerte, afficher une alerte à l'utilisateur si nous obtenons une erreur.
Donc, pour cela, vous devez vous assurer que vous importez l'alerte à partir de React Native
et que vous utilisez également l'effet de react car use effect nous permet de réagir aux modifications
de l'état d'erreur et d'afficher l'alerte d'erreur si nous avons une erreur. Alors peut-être qu'ici après avoir configuré le réducteur, nous pouvons ajouter un effet d'utilisation et
ma dépendance ici est la variable d'état d'erreur ou constante et si nous avons une
erreur, donc si c'est vrai, alors je veux afficher une alerte avec l'alerte API où je dis qu'une erreur s'est produite et mon message est
l'erreur qui devrait être une chaîne et j'ajouterai un bouton où j'ai un texte OK et bien
sûr vous pourriez ajouter plus de boutons où vous faites des choses différentes.
Maintenant, nous pouvons simuler cela dans le créateur d'action en allant là-bas et pour vous connecter, disons que nous supprimons ce D ici,
afin que ce soit une URL incorrecte à la fin. Si nous essayons maintenant de nous connecter
ici, j'obtiens cette erreur.
C'est
bien, mais il y a aussi d'autres types d'erreurs que je veux gérer, par exemple si je
me connecte avec une adresse e-mail qui n'existe pas? Bien sûr, je veux aussi montrer une erreur à l'utilisateur et
je le fais, mais je montre seulement que quelque chose s'est mal passé, ce qui n'est pas exactement l'erreur que je voudrais montrer.
Maintenant, je montre cette erreur parce que dans le créateur d'action ici, si la réponse n'est pas correcte, je lance quelque chose qui
a mal tourné.
Maintenant, le problème est lorsque nous envoyons un e-mail incorrect ou un mot de passe incorrect, également en
passant pour vous inscrire si nous envoyons quelque chose qui n'est pas un e-mail ou un mot de passe trop court, si cela se produit, alors
nous récupérer une réponse avec un code d'état de 400 quelque chose et nous obtenons des détails d'erreur dans le cadre de la réponse et en
ce moment
avec notre gestion des erreurs, nous ne les voyons
pas, nous devons donc changer cela. Au lieu de lancer immédiatement une
erreur ici si la réponse n'est pas correcte, je veux toujours l'examiner.
Je vais donc avoir mes données de réponse
d'erreur que j'obtiens en attendant la réponse JSON ici. Je fais donc la même chose que dans le cas de réussite, mais je l'extrait dans un
champ différent et maintenant ici, je veux consigner les données de réponse d'erreur
afin que nous ayons une idée de ce à quoi cela ressemble.
Alors maintenant essayons d'entrer une adresse e-mail qui n'existe plus et maintenant nous obtenons notre étrange erreur que vous venez de voir mais maintenant nous avons cette
sortie intéressante ici et vous voyez que c'est l'objet d'erreur que Firebase m'a renvoyé et bien sûr
cela dépend de l'API
à laquelle vous parlez, du type d'erreur que vous obtenez, du
moment où vous l'obtenez et des détails qu'il contient. Comme vous le voyez, c'est un objet
qui a une clé d'erreur qui est encore un autre objet qui a un code d'erreur, quelques détails sur les
erreurs et ensuite ce message qui est par exemple un email non trouvé et
c'est la partie qui m'intéresse. D'ailleurs, dans les documents officiels, vous trouverez plus d'identificateurs d'erreur
potentiels que vous pourriez obtenir. Donc à
la fin, c'est ce que je veux vérifier maintenant. Je veux obtenir mon ID d'erreur, disons à partir des données de réponse
d'erreur en accédant au champ d'erreur qui est ce champ qui me donne accès à cet objet qui a ensuite
ce champ de message.
Donc donc ici, j'accède ensuite au message pour obtenir ce message et maintenant nous pouvons le vérifier, nous pouvons
vérifier si l'ID d'erreur est égal à l'e-mail introuvable. Si c'est le cas, je veux définir mon propre message
personnalisé, alors ici je vais ajouter un message variable qui est juste quelque chose qui a mal tourné
par défaut mais ici si nous savons que le problème est que nous n'avons pas trouvé
d'e-mail adresse, nous pourrions dire que cet e-mail est introuvable et j'ajouterai plus si vérifie dans une seconde.
C'est donc quelque chose que je veux vérifier ici et à la fin, j'ai donc un message que je veux maintenant lancer,
donc
maintenant je vais lancer une nouvelle erreur avec mon propre message personnalisé. Donc, une autre vérification que
je veux ajouter avec une instruction else / if ici est de savoir si l'ID d'erreur
est pour la connexion à un mot de passe invalide, disons. Je peux donc vérifier cela et définir le message égal à ce mot de passe n'est pas valide et
maintenant, essayons à nouveau.
Revenons en arrière et entrez une adresse e-mail qui n'existe pas, connexion rapide et nous obtenons cette
adresse e-mail introuvable ou cet e-mail introuvable.
Essayons maintenant une adresse e-mail valide mais en fait un mot de passe non valide, comme celui-ci et nous obtenons ce mot de passe
n'est pas valide, alors
maintenant nous donnons à l'utilisateur une meilleure rétroaction.
Maintenant, implémentons la même chose pour l'inscription, donc je vais copier cela et aller dans mon cas d'inscription ici et là J'ai
juste des codes d'erreur différents, là j'ai
des codes comme le courrier électronique existe, si
cette adresse e-mail existe déjà.
J'extrais donc mon ID d'erreur de la même manière, mais je vérifie qu'il existe un e-mail et si c'est l'erreur, je dis que
cet e-mail existe déjà.
Maintenant, c'est en fait la
seule chose que je veux vérifier ici, il y a aussi d'autres erreurs que vous pourriez obtenir et vous pouvez par exemple
simplement désactiver votre validation ici et voir quelle erreur vous obtenez si vous envoyez un e- adresse
e-mail en enregistrant cet ID d'erreur et
vous pouvez également le vérifier, ici je vais simplement implémenter ce message et donc maintenant si j'essaie de m'inscrire ici avec
une adresse e-mail que j'ai déjà utilisée, comme celle-ci, j'obtiens cet e-mail existe déjà. D'un autre côté, si j'utilise une adresse e-mail valide,
bien sûr, cela passe par et sur Firebase, alors en effet, si vous allez à l'authentification et
actualisez cela, vous verrez ce deuxième utilisateur.
Voici donc comment ajouter un spinner de chargement et une gestion des erreurs avec authentification.
C'est très bien, mais maintenant, ce serait enfin bien de quitter cet écran et d'aller sur notre application, puis de commencer
à travailler avec ce jeton que nous obtenons.