Alors maintenant que nous avons ajouté le stockage, la récupération, la mise à jour et la suppression et donc toutes les fonctionnalités
de crud et que nous avons regardé montrer un spinner de chargement et des erreurs
de gestion, il manque deux choses.
La première est que lorsque nous passons une commande, que nous envoyons également cette commande à un serveur et que nous y stockons également
la commande et pas seulement localement, car en
ce moment, bien sûr, lorsque nous commandons quelque chose, nous le voyons ici, mais dès que nous rechargeons
l'application car nous ne la stockons pas sur un serveur, c'est
perdu, c'est donc une chose.
L'autre chose est bien sûr que nous ne montrons qu'un spinner de chargement ici
et que nous ne gérons que les erreurs ici. Sur l'écran d'administration, si quelque chose ne va
pas, nous n'obtenons aucune erreur, également ici si nous modifions cela et que nous le soumettons, nous ne
voyons aucun spinner de chargement pendant que nous attendons que cela soit soumis.
C'est aussi quelque chose que nous pourrions améliorer
et c'est en fait la partie que je veux commencer.
Donc, ici, sur l'écran d'édition du produit lorsque nous envoyons la mise à jour ou la création, dans les deux
cas, cela prend bien sûr un certain temps et en effet, nous obtenons une promesse ici, car dans la mise à jour et l'action
de création de produit, nous utilisons la fonctionnalité Redux Thunk de renvoyant ici une fonction de répartition asynchrone qui renvoie donc
une promesse qui est donc renvoyée dans le cadre de notre appel de fonction de répartition ici.
Donc, par conséquent, nous obtenons réellement les informations, que nous attendions la réponse, que nous ayons
une erreur ou que nous ayons
terminé, nous devons simplement
l'utiliser et bien sûr, nous pouvons l'utiliser de la même manière que nous l'avons fait auparavant, avec un état d'utilisation importé de
React puis en gérant le chargement et l'état d'erreur ici. Remarque, vous pouvez bien sûr également travailler avec un réducteur
où vous fusionnez les deux états ensemble si vous le souhaitez à l'aide du crochet d'utilisation du réducteur.
Ici cependant, je m'en tiendrai à isLoading et définirai isLoading et initialement bien sûr, cela est faux et j'ai également les variables error et
set error ici avec un état d'utilisation comme celui-ci, qui est initialement indéfini et maintenant nous devons simplement le définir comme nous le faisons ''
concernant la répartition des actions ou lorsque nous obtenons des erreurs.
Donc, ici, lorsque nous sommes sur le point de distribuer cela, peu importe si nous
modifions ou si nous créons, je veux définir isLoading sur true et je veux également définir mon erreur ici sur false ou non sur false, sur null , réinitialisez-le.
Maintenant, une fois que nous avons terminé, je veux faire autre chose, mais pour cela, nous devons d'abord attendre
la fin de l'envoi.
Maintenant, nous pouvons donc à nouveau transformer cela en une fonction asynchrone, juste pour que je puisse
utiliser
pour attendre le mot-clé là-dedans, l'alternative serait de ne pas le transformer en une fonction asynchrone et simplement d'ajouter puis et
de rattraper par
la suite, cela fonctionnerait aussi mais J'aime utiliser l'attente asynchrone. Alors maintenant, nous pouvons attendre la fin des deux dépêches, bien sûr,
une seule des deux s'exécutera car c'est une condition if mais nous pouvons attendre que cela
se termine et donc après ce bloc if, nous
savons que la répartition sera effectuée, alors ici nous peut redéfinir isLoading sur false. Voilà donc l'état de chargement, maintenant pour gérer les
erreurs, nous avons juste besoin d'envelopper avec un bloc try catch et nous pouvons réellement envelopper le bloc
if entier ici avec try catch, alors saisissons cela, déplaçons-le ici et attrapons tout potentiel les erreurs que nous pourrions
obtenir ici et maintenant ici, je veux bien sûr définir mon erreur sur l'erreur que
je
reçois ici ou sur le message d'erreur que je reçois Maintenant, nous définissons l'erreur, nous définissons
le chargement état, bien sûr, cela n'a aucun effet ici sur cet écran. Donc, pour afficher un spinner de chargement, nous devons importer l'indicateur d'activité de
React Native, l'indicateur d'activité de React Native et
pour afficher une erreur, je veux également lancer une alerte et
pour cela, vous devez vous assurer que vous importez l'alerte que nous faisons déjà. Maintenant, dans une prochaine étape, pour gérer l'état de chargement, peut-être là-bas avant
de retourner mon formulaire, je vérifierai si isLoading est vrai et si c'est le cas, je reviendrai ici avec l'indicateur d'activité
ici et là, je '' ll définissez la taille sur grand et définissez la couleur sur couleurs et pour cela, vous devez vous
assurer que vous importez ces couleurs constantes primaires. Assurez-vous donc que cette constante de couleurs est
importée ici, c'est obligatoire et maintenant j'utiliserai également la feuille de style ici pour ajouter un nouveau style,
ce style centré pour être précis, ici j'ajouterai centré et oui nous pourrions donc aussi l'externaliser
dans un composant d'emballage séparé si vous le souhaitez.
Là, je vais définir flex sur un, justifier le contenu au centre et aligner également les éléments au centre, comme ceci.
Maintenant, nous pouvons appliquer ce style centré ici à la vue que j'enveloppe autour de mon indicateur d'activité en définissant
le style ici sur les styles. centré.
Maintenant, nous devrions voir cela pendant le chargement et sur une note latérale, nous ne devrions pas non plus revenir en arrière
avant d'avoir terminé.
Donc, si j'ajoute ou si je supprime ce point d'exclamation, puis laisse cette entrée pour que celle-ci soit soumise et que je clique
sur Enregistrer, vous
avez vu le spinner de chargement et nous ne revenons en arrière qu'après cela.
Maintenant, Firebase est super rapide, mais c'est ce qui s'est passé.
Maintenant, pour simuler une erreur, je vais passer aux actions sur les produits et là, dans la mise à jour du produit ici, je supprimerai cela à nouveau pour forcer une erreur et j'ajouterai également
autre chose, je vais maintenant stocker la réponse ici dans un constante parce que maintenant je m'en
soucie vraiment, je veux m'assurer que si la réponse n'est pas correcte, donc si nous
avons un code d'état 400 ou 500, je lance également une nouvelle erreur
où je dis que quelque chose s'est mal passé ou où vous faites une erreur la manipulation que vous voulez faire, de sorte
que nous lançons également une erreur dans ce cas. Au fait, je ferai de même
pour la suppression avant de tester cette erreur forcée que j'ai implémentée.
Donc, ici pour la suppression, je veux également vérifier ceci et pour cela bien
sûr ici, j'ai également besoin d'obtenir ma réponse en attendant la récupération ici. D'accord, voyons si cette erreur forcée de
mise à jour en raison du rejet de s
ici, si cela a un effet. Si je reviens maintenant ici à l'administrateur, je commence à ajouter ceci,
j'ajoute un point d'exclamation et
je clique dessus, maintenant ce que vous verrez est que la mise à jour est simplement rejetée, donc nous ne voyons pas le point
d'exclamation ici mais nous aussi ne reçois aucun message d'erreur qui a du sens car je n'ai pas de logique pour le faire.
Maintenant, comment pouvons-nous gérer cela?
Comme je l'ai dit, je veux
lancer une alerte et donc j'utiliserai use effect, pour utiliser le crochet d'effet que React propose que
nous trouvons ici, je veux l'utiliser et je peux simplement l'implémenter ici après avoir initialisé
le réducteur, disons, la position exacte n'a pas trop d'importance. L'effet d'utilisation ici devrait être réexécuté chaque fois que l'erreur
change, donc si nous définissons cela comme une erreur pour
ne pas être une erreur, alors ici je vérifie si l'erreur est vraie, donc si nous
avons une erreur et si nous l'avons, alors je peut lancer une
alerte, une erreur s'est produite.
Je veux sortir mon erreur ici et ça devrait être le message d'erreur parce que c'est ce que je mets ici,
je
mets mon erreur sur le message donc ça devrait être une chaîne que je peux sortir et
ensuite j'ajouterai un bouton où je dis OK qui rejette simplement cela. Maintenant aussi important, si nous obtenons une erreur,
je ne veux pas m'éloigner. Donc, pour éviter que cela se produise, je
veux m'assurer qu'ici, ces accessoires, cette navigation ici n'est réellement effectuée que si nous ne nous retrouvons pas dans ce bloc de capture.
Donc, fondamentalement, ici après le bloc if else mais toujours dans le bloc try, là, je veux m'éloigner.
Alors maintenant, essayons à nouveau, revenons ici,
modifions cela, ajoutons un point
d'exclamation, cliquez ailleurs, cliquez sur enregistrer et maintenant je reçois mon message
d'erreur ici et je reste sur cette page et il est également réinitialisé. Je peux ajouter ceci à nouveau, cliquez
ici et c'est parti.
D'un autre côté, si nous corrigeons maintenant cette erreur ici dans les actions en lisant cela ici et que
nous revenons maintenant et revoyons cela, si je
le modifie, ajoutez mon point d'exclamation, cliquez ailleurs et cliquez sur enregistrer, maintenant
que tout fonctionne comme il se doit.
Alors maintenant, cela fonctionne vraiment et maintenant cela se comporte comme il devrait se comporter.
Maintenant, vous pouvez bien sûr également ajouter un spinner de chargement et un gestionnaire d'erreurs à l'écran du produit utilisateur si
vous le souhaitez.
Donc, si vous supprimez cela, ce que je ne ferai pas ici, mais si vous le supprimez, vous n'obtiendrez actuellement
pas de spinner, un spinner
de chargement, vous n'obtiendrez pas non plus d'erreur s'il échoue. Pour gagner du temps, je ne vais pas l'implémenter ici,
mais vous pouvez l'implémenter de la même manière que nous l'avons fait auparavant si vous le vouliez.
C'est donc quelque chose que vous pouvez certainement faire aussi.