Avant de continuer à mettre à jour ou à modifier les données ou à les supprimer,
assurez-vous également que nous ne voyons pas les données factices ici initialement, mais que nous
voyons en fait un spinner de chargement et peut-être aussi un message s'il n'y a pas de données à charger ou un
message d'erreur si nous avons une erreur et pour cela,
commençons par le spinner de chargement. Sur l'écran de présentation des produits, je souhaite
afficher un spinner de chargement pendant que nous attendons l'arrivée des données. Pour cela, nous devons d'abord savoir
si nous chargeons ou non et nous pouvons contrôler cela avec l'état d'utilisation,
donc avec un état interne dans ce composant.
Donc là, nous pouvons ajouter isLoading et définir isLoading et ensuite simplement utiliser l'état ici comme ceci et initialement nous ne chargeons pas, donc
je mets l'état initial à faux et maintenant
ici quand nous expédions cela, donc ici en utilisation, je mets isLoading to true bien
sûr, mais une fois que nous avons terminé, je veux le remettre à false.
Maintenant, la bonne chose est d'envoyer ici envoie notre action de récupération de produits et donc cela nous donne une promesse en fait, donc
ici je peux
ajouter puis attraper plus tard pour la gestion des erreurs pour faire quelque chose une fois cela fait.
Vous pouvez également utiliser async wait mais il n'est pas autorisé de l'utiliser comme
ceci ici dans use effect, ce n'est pas simplement la façon dont use use doit être utilisé.
Donc, si vous souhaitez utiliser l'utilisation asynchrone ici, vous devez envelopper cela dans une
fonction distincte que vous devez créer dans votre effet, comme charger des produits qui est juste une fonction d'emballage
factice qui ressemble à ceci, peut-être avec set isLoading in là aussi.
Maintenant, ici, vous pouvez ajouter async et maintenant vous pouvez appeler des produits de chargement comme ça juste après, simplement un
wrapper qui est requis en raison du fonctionnement de l'effet
d'utilisation, il ne doit pas
retourner de promesse, il le ferait si vous utilisez async ici et par conséquent, en utilisant async, il n'est
pas autorisé, cela est en revanche autorisé.
Donc maintenant ici, nous
pouvons utiliser attendre ici pour attendre que cette répartition soit effectuée, ce qui signifie que cela attendra
automatiquement la promesse qui s'y trouve, donc pour la demande HTTP et ensuite nous définissons isLoading sur
false une fois cela fait.
Maintenant, pour montrer un spinner, heureusement React Native en a un pour nous, l'indicateur d'activité qui sera automatiquement
bon pour iOS et Android, donc
il obtiendra automatiquement le style de plate-forme par défaut et
maintenant nous pouvons le rendre si nous chargeons. Donc là-bas au lieu de renvoyer
la liste plate, si isLoading est vrai, je vais retourner un autre morceau de jsx, je vais retourner
une nouvelle vue ici avec mon indicateur d'activité là-dedans. Pour cela, bien sûr, vous devez également avoir la vue importée, alors assurez-vous qu'elle est également disponible.
Maintenant que nous avons renvoyé cette vue avec l'indicateur d'activité, vous pouvez configurer
la taille pour être grande et la couleur pour être Couleurs. primaire par exemple et cela nécessite bien sûr que vous importiez cette couleur constante,
alors assurez-vous qu'elle est disponible et enfin et surtout, maintenant je veux centrer cet indicateur, donc ici nous pouvons ajouter un style que
nous pourrions bien sûr définir avec une feuille de style ou ici rapide et sale, flex
on justifie le centre de contenu, aligne le centre des éléments. Cependant, en fait, j'utiliserai une feuille de style ici car
nous en aurons besoin à un autre endroit plus tard également.
Alors ici, je ferai référence aux styles disons centrés et importons la feuille de style de React Native et avec
cela, puis allez là-bas, ajoutez mon objet de styles après avoir configuré les options de navigation,
peut-être, les styles avec la feuille de style. créer, ajouter la propriété centrée là-dedans qui a ce style avec flex justifier
les éléments d'alignement de contenu et maintenant avec cela, nous devrions voir un indicateur d'activité centré pendant le chargement.
Donc, si j'enregistre ceci et ces rechargements, Firebase est très rapide, donc vous ne le voyez pas aussi longtemps, mais pendant un court
laps de temps, vous voyez ce spinner de chargement ici, avec le look différent sur iOS et Android bien sûr.
Bien sûr, le chargement est une chose, parfois vous n'avez tout simplement pas de données qui pourraient être chargées. Disons que dans un réducteur,
nous tendons la main au produit. json qui est une source où aucune donnée ne peut être récupérée
et nous nous retrouvons donc avec un écran vide.
Eh bien, c'est quelque chose que nous pouvons faire, mais ce n'est pas
la meilleure expérience utilisateur possible, donc je veux en ajouter un autre si vérifier où je vérifie si isLoading est faux, donc si
nous ne chargeons plus et mes produits ici, la longueur y est égale à zéro, ce qui signifie que nous n'avons pas de produits.
Dans ce cas, je retournerai également mon contenu centré ici mais là je veux simplement sortir un texte
où je dis aucun produit trouvé, peut-être commencer à en ajouter
et pour cela bien sûr, vous devez vous assurer que vous importez le composant texte et vous peut également y affecter vos styles de police ou créer un composant wrapper
de texte par défaut que nous avons utilisé dans les modules précédents, pour l'instant je vais juste avoir mon texte comme celui-ci
et c'est en
effet ce que nous voyons là pour l'instant. Bien sûr, dès que je reviens
à l'URL correcte où nous trouvons réellement les données, cela fonctionne. Enfin et surtout, vous pouvez également avoir une
erreur. Disons ici que je
n'en ai pas. json là, bien
sûr, c'est une erreur que nous éviterions généralement car ce n'est qu'une faute de frappe de notre
côté, mais malheureusement les serveurs Firebase sont relativement robustes. Donc, pour simuler qu'ils ont par exemple baissé ou que quelque chose s'est
mal
passé, je vais juste casser l'URL de cette manière qui est une URL invalide et maintenant ce que nous voyons est un spinner infini.
La raison en est que nous n'avons actuellement pas de réponse valide. Donc, si nous jetons un coup d'œil à notre action ici et que nous
consoles consignons ces données de réponse ici, nous voyons que pendant ce rechargement, la récupération devrait se produire
immédiatement, mais nous n'obtenons aucune
sortie là-bas, nous ne
voyons rien être enregistré à partir
de cela, nous obtenons juste un avertissement de rejet de promesse à un moment donné, il semble donc que nous
obtenons simplement une erreur et pour le moment,
nous ne traitons pas une erreur.
Maintenant, si vous utilisiez des promesses sans attente asynchrone, vous ajouteriez simplement l'instruction catch.
Ici, nous utilisons
async attendre donc ce que nous faisons est de l'envelopper dans un bloc try, tout ce code que
nous voulons finalement exécuter si tout réussit et intercepter les erreurs
ici, donc un bloc try catch. C'est là que nous obtenons une erreur potentielle
et maintenant que cette erreur est arrivée ici, nous pouvons la gérer, par
exemple l'envoyer à notre propre serveur analytique ou faire tout ce que nous voulons, puis peut-être aussi la renvoyer, bien sûr
si tout ce que vous faites est en le retournant, vous n'auriez pas eu besoin d'ajouter ce bloc
try catch mais généralement, vous voudrez peut-être faire plus ici - envoyer au serveur d'analyse personnalisé ou quelque chose comme
ça comme je l'ai mentionné.
Alors maintenant, nous renvoyons l'erreur, toujours pas mieux, nous causons toujours une
erreur et en plus de simplement essayer de le contourner, nous devrions en fait ajouter une autre
vérification ici avant de déballer le corps
de la réponse, nous devons également vérifier si la réponse ok c'est faux, si c'est faux.
OK est un champ dont vous disposez sur cet objet de réponse et cela est tout simplement vrai si la
réponse est dans la plage de codes d'état 200. Si c'est dans une plage différente, par exemple parce que vous
n'êtes pas authentifié ou quelque chose comme ça, alors l'API fetch par défaut ne générera pas d'erreur.
Cependant, je veux lancer une erreur dans ce cas afin que nous nous retrouvions toujours dans le bloc de capture si nous
avons un code d'état 400 ou 500 ou si nous avons un problème de demande réseau, par exemple si la demande ne peut même pas
quitter le dispositif.
Donc, ici et c'est chercher l'API spécifique pour gérer également les codes d'état 400 et 500 qui normalement ne provoqueraient pas d'erreur,
je vais également lancer
une nouvelle erreur ici dans ce cas où je dis que quelque chose s'est mal
passé, bien sûr, vous pouvez plonger dans le corps de réponse ici dans ce cas aussi et découvrir ce qui ne va pas
là-bas, mais je vais simplement jeter cette erreur générique et maintenant nous aurons certainement une erreur
si quelque chose ne va pas si nous ne récupérons pas nos données mais quand même, nous renvoyez l'erreur ici.
Mais l'endroit où je veux finalement le gérer est mon composant ici, mon
composant d'écran car là, je veux ensuite afficher un message d'erreur. Donc là-dedans, nous avons notre effet et tout comme nous
pourrions utiliser catch ou le gestionnaire catch si vous utilisez alors et catch ou async attendent avec try catch
dans l'action, nous
pouvons le faire ici également.
Alors ici, je veux essayer de distribuer cela, mais je veux attraper toutes les erreurs potentielles que nous pourrions obtenir.
Alors là, j'attrape toutes
les erreurs que cela pourrait produire et puisque je rejette mon erreur là-dedans, c'est ce que je viens de faire
ici, à droite, finalement, l'erreur nous atteindra ici.
Alors maintenant, nous allons finalement nous retrouver dans ce bloc catch et
maintenant pour afficher nos données d'erreur, nous pouvons ajouter un autre état - erreur et erreur de définition, vous pouvez le nommer comme vous le
souhaitez.
Au départ, cela n'est pas défini, car au départ je n'ai pas d'erreur, mais ici, j'appellerai set error et le
définirai sur error. message par exemple, donc
au message de cette erreur que je reçois.
Bien sûr, je veux définir le chargement sur false par la suite, cela ne change pas parce
que nous ne
chargeons certainement plus même si nous avons une erreur mais maintenant nous avons également cet état d'erreur que nous pouvons utiliser, nous pouvons l'utiliser
pour vérifier c'est ici. Si nous avons
une erreur, donc si c'est vrai, je n'ai même pas besoin de continuer, au lieu de cela je veux retourner mon contenu jsx centré ici
mais là, je veux juste
sortir un texte où je dis qu'une erreur s'est produite par exemple , comme ça. Si nous faisons maintenant cela, vous verrez que nous voyons
un spinner mais ensuite
nous
voyons ce texte d'erreur. Bien sûr, cela ne permet pas à l'utilisateur
de faire beaucoup de choses, nous pouvons maintenant simplement naviguer et revenir, mais
nous pourrions vouloir donner à l'utilisateur un moyen de réessayer, peut-être en ajoutant un bouton ici. Alors maintenant, ici avec le bouton importé, nous pouvons
y aller puis ajouter ici ce composant de bouton avec un titre d'essayer à nouveau et bien sûr, c'est à vous de décider comment vous
voulez laisser l'utilisateur gérer cela et là, vous pouvez ajouter un
gestionnaire onPress et maintenant pour pouvoir charger à nouveau, je vais réellement prendre cette fonction
de chargement des produits ici, la déplacer hors de
l'effet et en faire une fonction régulière de ce composant afin que je puisse l'appeler de
l'intérieur de l'effet d'utilisation.
Maintenant, cependant, il doit également être une dépendance et donc pour éviter une boucle infinie,
il doit être enveloppé dans le rappel d'utilisation, alors importons le rappel ici et enroulons cela autour de cette fonction ici où la dépendance est alors ma fonction
de répartition, vous pouvez
également add
set isLoading et set error mais
toutes ces fonctions ne changeront jamais, donc vous pouvez également les omettre
et donc cela ne sera jamais recréé ce qui est bien mais maintenant nous pouvons utiliser
les produits de chargement comme dépendance ici
en effet et maintenant puisque ce n'est pas à l'intérieur de
la fonction d'effet d'utilisation, nous pouvons utiliser des produits de chargement n'importe où ailleurs dans ce composant
et la partie n'importe où ailleurs est ici
ce bouton, si nous appuyons dessus, je veux aussi déclencher à nouveau le chargement de produits et aussi le
dernier mais non le moindre, donner le bouton couleur des couleurs. primaire. Avec cela, il semble que j'ai une erreur ici avec mes importations,
oui j'ai déjà importé un bouton, alors débarrassons-nous de la deuxième importation, ne l'importons qu'une seule fois et maintenant
ce que vous obtiendrez, c'est
que cela se rechargera finalement lancez une erreur et vous pouvez appuyer sur essayer à nouveau pour recharger cela, mais nous voyons toujours le
message d'erreur simplement parce que nous ne supprimons jamais l'erreur et si nous avons une
erreur, nous la renvoyons toujours, nous
ne la rendons même pas au chargement fileur.
Nous devons donc nous assurer que chaque fois que nous chargeons nos produits ici, nous remettons
l'erreur à zéro, nous réinitialisons donc l'erreur. Soit dit en passant, plusieurs appels d'état défini les uns à côté des autres
seront regroupés par React, donc cela ne conduira pas à plusieurs cycles de
re-rendu des composants, il est normal de l'utiliser comme ceci.
Alors maintenant, si je clique sur réessayer, nous pouvons réessayer. Évidemment, cela ne réussira jamais parce que notre
URL est cassée mais quand même, c'est ainsi que nous pourrions gérer cette erreur. Avec cela cependant, je vais revenir à mes actions et
corriger cette erreur en corrigeant à nouveau cette URL et maintenant cela devrait
également charger nos données correctement et les afficher.