1 00:00:02,200 --> 00:00:06,570 Avant de continuer à mettre à jour ou à modifier les données ou à les supprimer, 2 00:00:06,680 --> 00:00:10,810 assurez-vous également que nous ne voyons pas les données factices ici initialement, mais que nous 3 00:00:10,810 --> 00:00:16,660 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 4 00:00:16,840 --> 00:00:19,810 message d'erreur si nous avons une erreur et pour cela, 5 00:00:19,810 --> 00:00:23,400 commençons par le spinner de chargement. Sur l'écran de présentation des produits, je souhaite 6 00:00:23,470 --> 00:00:28,270 afficher un spinner de chargement pendant que nous attendons l'arrivée des données. Pour cela, nous devons d'abord savoir 7 00:00:28,270 --> 00:00:32,430 si nous chargeons ou non et nous pouvons contrôler cela avec l'état d'utilisation, 8 00:00:32,440 --> 00:00:34,850 donc avec un état interne dans ce composant. 9 00:00:35,140 --> 00:00:42,910 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 10 00:00:42,910 --> 00:00:45,890 je mets l'état initial à faux et maintenant 11 00:00:46,630 --> 00:00:51,610 ici quand nous expédions cela, donc ici en utilisation, je mets isLoading to true bien 12 00:00:51,610 --> 00:00:56,130 sûr, mais une fois que nous avons terminé, je veux le remettre à false. 13 00:00:56,170 --> 00:01:03,610 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 14 00:01:03,610 --> 00:01:04,780 ici je peux 15 00:01:04,840 --> 00:01:10,690 ajouter puis attraper plus tard pour la gestion des erreurs pour faire quelque chose une fois cela fait. 16 00:01:10,870 --> 00:01:15,670 Vous pouvez également utiliser async wait mais il n'est pas autorisé de l'utiliser comme 17 00:01:15,670 --> 00:01:20,910 ceci ici dans use effect, ce n'est pas simplement la façon dont use use doit être utilisé. 18 00:01:20,910 --> 00:01:25,910 Donc, si vous souhaitez utiliser l'utilisation asynchrone ici, vous devez envelopper cela dans une 19 00:01:25,910 --> 00:01:32,720 fonction distincte que vous devez créer dans votre effet, comme charger des produits qui est juste une fonction d'emballage 20 00:01:32,720 --> 00:01:37,350 factice qui ressemble à ceci, peut-être avec set isLoading in là aussi. 21 00:01:37,350 --> 00:01:43,530 Maintenant, ici, vous pouvez ajouter async et maintenant vous pouvez appeler des produits de chargement comme ça juste après, simplement un 22 00:01:43,530 --> 00:01:46,530 wrapper qui est requis en raison du fonctionnement de l'effet 23 00:01:46,530 --> 00:01:48,260 d'utilisation, il ne doit pas 24 00:01:48,300 --> 00:01:54,030 retourner de promesse, il le ferait si vous utilisez async ici et par conséquent, en utilisant async, il n'est 25 00:01:54,030 --> 00:01:55,940 pas autorisé, cela est en revanche autorisé. 26 00:01:55,950 --> 00:01:57,520 Donc maintenant ici, nous 27 00:01:57,540 --> 00:02:03,060 pouvons utiliser attendre ici pour attendre que cette répartition soit effectuée, ce qui signifie que cela attendra 28 00:02:03,060 --> 00:02:08,670 automatiquement la promesse qui s'y trouve, donc pour la demande HTTP et ensuite nous définissons isLoading sur 29 00:02:08,670 --> 00:02:10,300 false une fois cela fait. 30 00:02:10,710 --> 00:02:16,380 Maintenant, pour montrer un spinner, heureusement React Native en a un pour nous, l'indicateur d'activité qui sera automatiquement 31 00:02:16,380 --> 00:02:18,810 bon pour iOS et Android, donc 32 00:02:18,840 --> 00:02:21,950 il obtiendra automatiquement le style de plate-forme par défaut et 33 00:02:22,320 --> 00:02:27,630 maintenant nous pouvons le rendre si nous chargeons. Donc là-bas au lieu de renvoyer 34 00:02:27,630 --> 00:02:34,740 la liste plate, si isLoading est vrai, je vais retourner un autre morceau de jsx, je vais retourner 35 00:02:34,740 --> 00:02:42,040 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. 36 00:02:44,480 --> 00:02:49,370 Maintenant que nous avons renvoyé cette vue avec l'indicateur d'activité, vous pouvez configurer 37 00:02:49,380 --> 00:02:58,310 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, 38 00:02:58,310 --> 00:03:05,830 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 39 00:03:05,830 --> 00:03:10,960 nous pourrions bien sûr définir avec une feuille de style ou ici rapide et sale, flex 40 00:03:11,020 --> 00:03:18,880 on justifie le centre de contenu, aligne le centre des éléments. Cependant, en fait, j'utiliserai une feuille de style ici car 41 00:03:18,880 --> 00:03:23,010 nous en aurons besoin à un autre endroit plus tard également. 42 00:03:23,110 --> 00:03:33,450 Alors ici, je ferai référence aux styles disons centrés et importons la feuille de style de React Native et avec 43 00:03:33,450 --> 00:03:41,640 cela, puis allez là-bas, ajoutez mon objet de styles après avoir configuré les options de navigation, 44 00:03:41,640 --> 00:03:50,890 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 45 00:03:50,890 --> 00:03:57,450 les éléments d'alignement de contenu et maintenant avec cela, nous devrions voir un indicateur d'activité centré pendant le chargement. 46 00:03:57,570 --> 00:04:03,790 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 47 00:04:03,790 --> 00:04:09,580 laps de temps, vous voyez ce spinner de chargement ici, avec le look différent sur iOS et Android bien sûr. 48 00:04:12,900 --> 00:04:19,110 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, 49 00:04:19,110 --> 00:04:25,740 nous tendons la main au produit. json qui est une source où aucune donnée ne peut être récupérée 50 00:04:25,740 --> 00:04:28,750 et nous nous retrouvons donc avec un écran vide. 51 00:04:29,150 --> 00:04:32,920 Eh bien, c'est quelque chose que nous pouvons faire, mais ce n'est pas 52 00:04:33,060 --> 00:04:39,540 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 53 00:04:41,530 --> 00:04:48,190 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. 54 00:04:48,190 --> 00:04:54,340 Dans ce cas, je retournerai également mon contenu centré ici mais là je veux simplement sortir un texte 55 00:04:54,340 --> 00:04:58,230 où je dis aucun produit trouvé, peut-être commencer à en ajouter 56 00:04:58,240 --> 00:05:08,530 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 57 00:05:08,530 --> 00:05:15,880 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 58 00:05:15,880 --> 00:05:17,140 et c'est en 59 00:05:17,140 --> 00:05:22,900 effet ce que nous voyons là pour l'instant. Bien sûr, dès que je reviens 60 00:05:22,900 --> 00:05:31,360 à l'URL correcte où nous trouvons réellement les données, cela fonctionne. Enfin et surtout, vous pouvez également avoir une 61 00:05:31,360 --> 00:05:33,680 erreur. Disons ici que je 62 00:05:33,700 --> 00:05:35,850 n'en ai pas. json là, bien 63 00:05:35,860 --> 00:05:41,610 sûr, c'est une erreur que nous éviterions généralement car ce n'est qu'une faute de frappe de notre 64 00:05:41,620 --> 00:05:48,010 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 65 00:05:48,010 --> 00:05:48,520 mal 66 00:05:48,550 --> 00:05:54,850 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. 67 00:05:55,120 --> 00:06:04,340 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 68 00:06:04,340 --> 00:06:10,490 consoles consignons ces données de réponse ici, nous voyons que pendant ce rechargement, la récupération devrait se produire 69 00:06:14,420 --> 00:06:16,220 immédiatement, mais nous n'obtenons aucune 70 00:06:19,170 --> 00:06:20,950 sortie là-bas, nous ne 71 00:06:21,060 --> 00:06:23,130 voyons rien être enregistré à partir 72 00:06:23,160 --> 00:06:29,760 de cela, nous obtenons juste un avertissement de rejet de promesse à un moment donné, il semble donc que nous 73 00:06:29,970 --> 00:06:32,470 obtenons simplement une erreur et pour le moment, 74 00:06:32,820 --> 00:06:34,870 nous ne traitons pas une erreur. 75 00:06:34,890 --> 00:06:39,990 Maintenant, si vous utilisiez des promesses sans attente asynchrone, vous ajouteriez simplement l'instruction catch. 76 00:06:39,990 --> 00:06:41,720 Ici, nous utilisons 77 00:06:41,720 --> 00:06:48,660 async attendre donc ce que nous faisons est de l'envelopper dans un bloc try, tout ce code que 78 00:06:48,660 --> 00:06:52,960 nous voulons finalement exécuter si tout réussit et intercepter les erreurs 79 00:06:52,960 --> 00:06:57,340 ici, donc un bloc try catch. C'est là que nous obtenons une erreur potentielle 80 00:06:57,340 --> 00:07:00,820 et maintenant que cette erreur est arrivée ici, nous pouvons la gérer, par 81 00:07:00,820 --> 00:07:06,460 exemple l'envoyer à notre propre serveur analytique ou faire tout ce que nous voulons, puis peut-être aussi la renvoyer, bien sûr 82 00:07:06,670 --> 00:07:11,740 si tout ce que vous faites est en le retournant, vous n'auriez pas eu besoin d'ajouter ce bloc 83 00:07:11,740 --> 00:07:17,080 try catch mais généralement, vous voudrez peut-être faire plus ici - envoyer au serveur d'analyse personnalisé ou quelque chose comme 84 00:07:17,080 --> 00:07:18,930 ça comme je l'ai mentionné. 85 00:07:19,150 --> 00:07:23,800 Alors maintenant, nous renvoyons l'erreur, toujours pas mieux, nous causons toujours une 86 00:07:23,860 --> 00:07:29,890 erreur et en plus de simplement essayer de le contourner, nous devrions en fait ajouter une autre 87 00:07:29,890 --> 00:07:32,890 vérification ici avant de déballer le corps 88 00:07:32,890 --> 00:07:38,770 de la réponse, nous devons également vérifier si la réponse ok c'est faux, si c'est faux. 89 00:07:38,770 --> 00:07:44,670 OK est un champ dont vous disposez sur cet objet de réponse et cela est tout simplement vrai si la 90 00:07:44,680 --> 00:07:50,800 réponse est dans la plage de codes d'état 200. Si c'est dans une plage différente, par exemple parce que vous 91 00:07:50,800 --> 00:07:55,360 n'êtes pas authentifié ou quelque chose comme ça, alors l'API fetch par défaut ne générera pas d'erreur. 92 00:07:55,360 --> 00:08:01,000 Cependant, je veux lancer une erreur dans ce cas afin que nous nous retrouvions toujours dans le bloc de capture si nous 93 00:08:01,450 --> 00:08:07,780 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 94 00:08:07,780 --> 00:08:08,790 quitter le dispositif. 95 00:08:08,980 --> 00:08:15,250 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, 96 00:08:15,250 --> 00:08:16,590 je vais également lancer 97 00:08:16,600 --> 00:08:21,350 une nouvelle erreur ici dans ce cas où je dis que quelque chose s'est mal 98 00:08:21,370 --> 00:08:27,850 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 99 00:08:28,150 --> 00:08:32,910 là-bas, mais je vais simplement jeter cette erreur générique et maintenant nous aurons certainement une erreur 100 00:08:32,920 --> 00:08:38,750 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. 101 00:08:38,770 --> 00:08:43,020 Mais l'endroit où je veux finalement le gérer est mon composant ici, mon 102 00:08:43,030 --> 00:08:50,640 composant d'écran car là, je veux ensuite afficher un message d'erreur. Donc là-dedans, nous avons notre effet et tout comme nous 103 00:08:50,830 --> 00:08:58,330 pourrions utiliser catch ou le gestionnaire catch si vous utilisez alors et catch ou async attendent avec try catch 104 00:08:58,330 --> 00:08:59,860 dans l'action, nous 105 00:08:59,920 --> 00:09:01,800 pouvons le faire ici également. 106 00:09:01,840 --> 00:09:09,380 Alors ici, je veux essayer de distribuer cela, mais je veux attraper toutes les erreurs potentielles que nous pourrions obtenir. 107 00:09:09,400 --> 00:09:10,830 Alors là, j'attrape toutes 108 00:09:10,840 --> 00:09:16,810 les erreurs que cela pourrait produire et puisque je rejette mon erreur là-dedans, c'est ce que je viens de faire 109 00:09:16,840 --> 00:09:19,370 ici, à droite, finalement, l'erreur nous atteindra ici. 110 00:09:19,400 --> 00:09:22,750 Alors maintenant, nous allons finalement nous retrouver dans ce bloc catch et 111 00:09:23,080 --> 00:09:29,740 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 112 00:09:29,740 --> 00:09:30,250 souhaitez. 113 00:09:30,340 --> 00:09:38,690 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 114 00:09:38,690 --> 00:09:41,540 définirai sur error. message par exemple, donc 115 00:09:41,540 --> 00:09:43,670 au message de cette erreur que je reçois. 116 00:09:46,500 --> 00:09:51,330 Bien sûr, je veux définir le chargement sur false par la suite, cela ne change pas parce 117 00:09:51,330 --> 00:09:52,330 que nous ne 118 00:09:52,350 --> 00:09:58,920 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 119 00:09:58,920 --> 00:10:01,490 pour vérifier c'est ici. Si nous avons 120 00:10:01,500 --> 00:10:08,820 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 121 00:10:08,820 --> 00:10:10,130 mais là, je veux juste 122 00:10:10,140 --> 00:10:18,620 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 123 00:10:18,650 --> 00:10:20,290 un spinner mais ensuite 124 00:10:20,320 --> 00:10:21,370 nous 125 00:10:21,380 --> 00:10:24,990 voyons ce texte d'erreur. Bien sûr, cela ne permet pas à l'utilisateur 126 00:10:24,990 --> 00:10:27,800 de faire beaucoup de choses, nous pouvons maintenant simplement naviguer et revenir, mais 127 00:10:29,820 --> 00:10:36,820 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 128 00:10:36,820 --> 00:10:45,860 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 129 00:10:45,870 --> 00:10:49,810 voulez laisser l'utilisateur gérer cela et là, vous pouvez ajouter un 130 00:10:49,920 --> 00:10:55,260 gestionnaire onPress et maintenant pour pouvoir charger à nouveau, je vais réellement prendre cette fonction 131 00:10:55,350 --> 00:10:58,770 de chargement des produits ici, la déplacer hors de 132 00:10:58,770 --> 00:11:04,290 l'effet et en faire une fonction régulière de ce composant afin que je puisse l'appeler de 133 00:11:04,290 --> 00:11:06,030 l'intérieur de l'effet d'utilisation. 134 00:11:06,090 --> 00:11:10,740 Maintenant, cependant, il doit également être une dépendance et donc pour éviter une boucle infinie, 135 00:11:10,800 --> 00:11:19,350 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 136 00:11:19,350 --> 00:11:20,920 de répartition, vous pouvez 137 00:11:20,980 --> 00:11:21,870 également add 138 00:11:21,870 --> 00:11:23,760 set isLoading et set error mais 139 00:11:23,800 --> 00:11:27,600 toutes ces fonctions ne changeront jamais, donc vous pouvez également les omettre 140 00:11:27,640 --> 00:11:32,440 et donc cela ne sera jamais recréé ce qui est bien mais maintenant nous pouvons utiliser 141 00:11:32,440 --> 00:11:34,480 les produits de chargement comme dépendance ici 142 00:11:34,630 --> 00:11:37,930 en effet et maintenant puisque ce n'est pas à l'intérieur de 143 00:11:37,960 --> 00:11:43,120 la fonction d'effet d'utilisation, nous pouvons utiliser des produits de chargement n'importe où ailleurs dans ce composant 144 00:11:43,120 --> 00:11:45,750 et la partie n'importe où ailleurs est ici 145 00:11:45,750 --> 00:11:51,700 ce bouton, si nous appuyons dessus, je veux aussi déclencher à nouveau le chargement de produits et aussi le 146 00:11:52,000 --> 00:12:02,260 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, 147 00:12:02,260 --> 00:12:07,590 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 148 00:12:07,780 --> 00:12:09,480 ce que vous obtiendrez, c'est 149 00:12:09,520 --> 00:12:16,450 que cela se rechargera finalement lancez une erreur et vous pouvez appuyer sur essayer à nouveau pour recharger cela, mais nous voyons toujours le 150 00:12:16,460 --> 00:12:20,810 message d'erreur simplement parce que nous ne supprimons jamais l'erreur et si nous avons une 151 00:12:20,840 --> 00:12:22,850 erreur, nous la renvoyons toujours, nous 152 00:12:22,850 --> 00:12:25,220 ne la rendons même pas au chargement fileur. 153 00:12:25,220 --> 00:12:31,010 Nous devons donc nous assurer que chaque fois que nous chargeons nos produits ici, nous remettons 154 00:12:31,010 --> 00:12:36,780 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 155 00:12:36,800 --> 00:12:39,550 seront regroupés par React, donc cela ne conduira pas à plusieurs cycles de 156 00:12:39,560 --> 00:12:41,730 re-rendu des composants, il est normal de l'utiliser comme ceci. 157 00:12:41,750 --> 00:12:46,490 Alors maintenant, si je clique sur réessayer, nous pouvons réessayer. Évidemment, cela ne réussira jamais parce que notre 158 00:12:46,490 --> 00:12:53,540 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 159 00:12:53,540 --> 00:12:57,610 corriger cette erreur en corrigeant à nouveau cette URL et maintenant cela devrait 160 00:12:57,740 --> 00:13:00,560 également charger nos données correctement et les afficher.