1 00:00:02,130 --> 00:00:06,200 Maintenant, bien sûr, lors du stockage d'une commande, il serait également intéressant de voir 2 00:00:06,210 --> 00:00:11,640 un petit spinner ici lorsque nous cliquons sur le bouton commander maintenant jusqu'à ce que cela soit fait et que 3 00:00:11,640 --> 00:00:16,030 nous puissions également l'implémenter, nous avons juste besoin d'aller à l'écran du panier qui est où 4 00:00:16,050 --> 00:00:20,800 nous expédions cette action pour envoyer une commande, ici nous expédions et maintenant expédions ici renvoie bien 5 00:00:20,970 --> 00:00:29,020 sûr une promesse à la fin, juste parce que retirer du panier, ce qui est le cas lorsque nous cliquons sur ce bouton, et commander, ajouter une commande renverra 6 00:00:29,020 --> 00:00:33,580 un promesse à la fin grâce à notre changement, donc l'expédition renverra donc une promesse, c'est 7 00:00:33,580 --> 00:00:36,780 donc ici que nous pouvons contrôler notre état de chargement. 8 00:00:36,940 --> 00:00:41,590 Maintenant, pour rendre cela un peu plus lisible, je vais le retirer de cette 9 00:00:41,590 --> 00:00:46,150 fonction anonyme ici et créer une nouvelle fonction stockée dans une constante 10 00:00:46,160 --> 00:00:53,590 ici dans mon composant mais en dehors de l'arborescence jsx et je nommerai ce gestionnaire d'ordre d'envoi ou quelque chose comme ça. 11 00:00:53,660 --> 00:00:56,440 C'est la même fonction que j'ai utilisée auparavant, 12 00:00:56,510 --> 00:01:04,520 maintenant je m'en occuperai au gestionnaire d'envoi de commande et maintenant l'idée est simple, ici ajouter la commande retournera une promesse comme je l'ai 13 00:01:04,520 --> 00:01:10,400 dit, la répartition retourne donc une promesse, donc nous pouvons ajouter async ici donc que nous pouvons 14 00:01:10,400 --> 00:01:16,440 à nouveau utiliser async attendre et gérer le chargement et éventuellement aussi l'état d'erreur comme nous l'avons fait auparavant. 15 00:01:16,460 --> 00:01:23,940 Il nous suffit donc d'importer l'état d'utilisation de React et, bien sûr, d'initialiser à nouveau notre état. 16 00:01:23,940 --> 00:01:33,150 Nous avons donc ici isLoading et set isLoading et initialement c'est faux et si vous le souhaitez, je ne le ferai pas ici, mais si vous le souhaitez, vous pouvez 17 00:01:33,150 --> 00:01:33,800 également 18 00:01:33,810 --> 00:01:39,810 ajouter la gestion des erreurs de la même manière que nous l'avons fait auparavant avec use state error, peut-être 19 00:01:39,810 --> 00:01:43,610 utiliser effect pour ensuite afficher une alerte et ainsi de suite, je vais 20 00:01:43,650 --> 00:01:45,530 me concentrer sur la partie chargement. 21 00:01:45,690 --> 00:01:47,970 Alors maintenant, ici, dans le gestionnaire d'ordre 22 00:01:48,000 --> 00:01:50,970 d'envoi, j'appellerai set isLoading et le définirai sur true, 23 00:01:51,210 --> 00:01:56,610 puis nous attendons cette répartition, alors nous attendons que cette promesse soit terminée et encore une 24 00:01:56,610 --> 00:02:02,760 fois, cela enveloppe de manière invisible les pièces par la suite dans un bloc puis parce que par la 25 00:02:02,760 --> 00:02:04,290 suite je va redéfinir 26 00:02:04,290 --> 00:02:10,160 le chargement sur faux, nous ne chargeons plus et nous pouvons maintenant l'utiliser pour afficher un indicateur d'activité. 27 00:02:10,250 --> 00:02:19,880 Importons donc ici l'indicateur d'activité de React Native et ce que je veux faire est ici au lieu du 28 00:02:19,910 --> 00:02:22,170 bouton commander maintenant, je 29 00:02:22,190 --> 00:02:30,320 veux montrer cet indicateur pendant que je charge. Donc, ici, je peux vérifier si isLoading est vrai, si c'est 30 00:02:30,320 --> 00:02:40,100 le cas, je vais montrer mon indicateur d'activité avec une taille disons petite et une couleur de couleurs, dont vous devez vous assurer qu'il est importé, principal et 31 00:02:40,150 --> 00:02:45,200 qu'il se ferme automatiquement et sinon, si nous ne chargeons pas, eh bien je vais 32 00:02:45,240 --> 00:02:47,260 montrer ce bouton bien sûr. 33 00:02:47,340 --> 00:02:53,690 Alors ici, je veux rendre ce bouton dans le cas contraire et maintenant essayons. 34 00:02:53,720 --> 00:02:55,370 Enregistrons cela, ajoutons cela 35 00:02:55,430 --> 00:02:59,030 à la carte peut-être deux fois, cliquez sur commander maintenant, nous 36 00:02:59,150 --> 00:03:06,560 avons vu le spinner pendant une fraction de seconde ici et maintenant si nous jetons un coup d'œil aux commandes, voici notre commande. 37 00:03:06,560 --> 00:03:10,250 Maintenant, assurons-nous que les commandes se chargent également lorsque nous visitons l'écran.