1
00:00:02,110 --> 00:00:07,990
Alors maintenant que nous avons ajouté le stockage, la récupération, la mise à jour et la suppression et donc toutes les fonctionnalités

2
00:00:07,990 --> 00:00:12,070
de crud et que nous avons regardé montrer un spinner de chargement et des erreurs

3
00:00:12,070 --> 00:00:14,020
de gestion, il manque deux choses.

4
00:00:14,020 --> 00:00:20,560
La première est que lorsque nous passons une commande, que nous envoyons également cette commande à un serveur et que nous y stockons également

5
00:00:20,560 --> 00:00:22,900
la commande et pas seulement localement, car en

6
00:00:22,900 --> 00:00:27,760
ce moment, bien sûr, lorsque nous commandons quelque chose, nous le voyons ici, mais dès que nous rechargeons

7
00:00:27,760 --> 00:00:30,650
l'application car nous ne la stockons pas sur un serveur, c'est

8
00:00:30,660 --> 00:00:32,160
perdu, c'est donc une chose.

9
00:00:32,170 --> 00:00:35,130
L'autre chose est bien sûr que nous ne montrons qu'un spinner de chargement ici

10
00:00:35,200 --> 00:00:39,570
et que nous ne gérons que les erreurs ici. Sur l'écran d'administration, si quelque chose ne va

11
00:00:39,610 --> 00:00:43,970
pas, nous n'obtenons aucune erreur, également ici si nous modifions cela et que nous le soumettons, nous ne

12
00:00:44,080 --> 00:00:47,320
voyons aucun spinner de chargement pendant que nous attendons que cela soit soumis.

13
00:00:47,320 --> 00:00:49,120
C'est aussi quelque chose que nous pourrions améliorer

14
00:00:49,150 --> 00:00:51,310
et c'est en fait la partie que je veux commencer.

15
00:00:52,210 --> 00:00:57,670
Donc, ici, sur l'écran d'édition du produit lorsque nous envoyons la mise à jour ou la création, dans les deux

16
00:00:57,670 --> 00:01:04,210
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

17
00:01:04,600 --> 00:01:10,270
de création de produit, nous utilisons la fonctionnalité Redux Thunk de renvoyant ici une fonction de répartition asynchrone qui renvoie donc

18
00:01:10,270 --> 00:01:15,340
une promesse qui est donc renvoyée dans le cadre de notre appel de fonction de répartition ici.

19
00:01:15,520 --> 00:01:20,680
Donc, par conséquent, nous obtenons réellement les informations, que nous attendions la réponse, que nous ayons

20
00:01:20,710 --> 00:01:22,470
une erreur ou que nous ayons

21
00:01:22,630 --> 00:01:24,380
terminé, nous devons simplement

22
00:01:24,520 --> 00:01:31,300
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

23
00:01:31,300 --> 00:01:37,650
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

24
00:01:37,650 --> 00:01:43,080
où vous fusionnez les deux états ensemble si vous le souhaitez à l'aide du crochet d'utilisation du réducteur.

25
00:01:43,380 --> 00:01:52,750
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

26
00:01:52,750 --> 00:02:02,510
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 ''

27
00:02:02,880 --> 00:02:07,470
concernant la répartition des actions ou lorsque nous obtenons des erreurs.

28
00:02:07,470 --> 00:02:13,530
Donc, ici, lorsque nous sommes sur le point de distribuer cela, peu importe si nous

29
00:02:13,530 --> 00:02:25,000
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.

30
00:02:25,190 --> 00:02:30,420
Maintenant, une fois que nous avons terminé, je veux faire autre chose, mais pour cela, nous devons d'abord attendre

31
00:02:30,420 --> 00:02:31,840
la fin de l'envoi.

32
00:02:31,860 --> 00:02:37,350
Maintenant, nous pouvons donc à nouveau transformer cela en une fonction asynchrone, juste pour que je puisse

33
00:02:37,350 --> 00:02:37,770
utiliser

34
00:02:37,770 --> 00:02:44,720
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

35
00:02:44,770 --> 00:02:45,810
de rattraper par

36
00:02:45,810 --> 00:02:52,620
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,

37
00:02:52,620 --> 00:02:57,230
une seule des deux s'exécutera car c'est une condition if mais nous pouvons attendre que cela

38
00:02:57,330 --> 00:03:00,380
se termine et donc après ce bloc if, nous

39
00:03:00,370 --> 00:03:08,370
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

40
00:03:08,370 --> 00:03:15,420
erreurs, nous avons juste besoin d'envelopper avec un bloc try catch et nous pouvons réellement envelopper le bloc

41
00:03:15,420 --> 00:03:23,250
if entier ici avec try catch, alors saisissons cela, déplaçons-le ici et attrapons tout potentiel les erreurs que nous pourrions

42
00:03:23,250 --> 00:03:29,400
obtenir ici et maintenant ici, je veux bien sûr définir mon erreur sur l'erreur que

43
00:03:29,400 --> 00:03:30,000
je

44
00:03:33,030 --> 00:03:39,720
reçois ici ou sur le message d'erreur que je reçois Maintenant, nous définissons l'erreur, nous définissons

45
00:03:39,780 --> 00:03:50,380
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

46
00:03:50,410 --> 00:03:54,120
React Native, l'indicateur d'activité de React Native et

47
00:03:54,130 --> 00:03:58,930
pour afficher une erreur, je veux également lancer une alerte et

48
00:03:58,930 --> 00:04:10,540
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

49
00:04:10,540 --> 00:04:19,930
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é

50
00:04:19,930 --> 00:04:30,010
ici et là, je '' ll définissez la taille sur grand et définissez la couleur sur couleurs et pour cela, vous devez vous

51
00:04:30,310 --> 00:04:38,980
assurer que vous importez ces couleurs constantes primaires. Assurez-vous donc que cette constante de couleurs est

52
00:04:38,980 --> 00:04:47,480
importée ici, c'est obligatoire et maintenant j'utiliserai également la feuille de style ici pour ajouter un nouveau style,

53
00:04:47,500 --> 00:04:55,120
ce style centré pour être précis, ici j'ajouterai centré et oui nous pourrions donc aussi l'externaliser

54
00:04:55,120 --> 00:04:59,910
dans un composant d'emballage séparé si vous le souhaitez.

55
00:05:00,010 --> 00:05:08,300
Là, je vais définir flex sur un, justifier le contenu au centre et aligner également les éléments au centre, comme ceci.

56
00:05:08,410 --> 00:05:15,250
Maintenant, nous pouvons appliquer ce style centré ici à la vue que j'enveloppe autour de mon indicateur d'activité en définissant

57
00:05:15,250 --> 00:05:19,990
le style ici sur les styles. centré.

58
00:05:20,040 --> 00:05:26,460
Maintenant, nous devrions voir cela pendant le chargement et sur une note latérale, nous ne devrions pas non plus revenir en arrière

59
00:05:26,460 --> 00:05:27,480
avant d'avoir terminé.

60
00:05:27,840 --> 00:05:33,700
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

61
00:05:33,700 --> 00:05:34,640
sur Enregistrer, vous

62
00:05:34,770 --> 00:05:38,400
avez vu le spinner de chargement et nous ne revenons en arrière qu'après cela.

63
00:05:38,400 --> 00:05:42,180
Maintenant, Firebase est super rapide, mais c'est ce qui s'est passé.

64
00:05:42,330 --> 00:05:52,970
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

65
00:05:52,970 --> 00:05:58,310
autre chose, je vais maintenant stocker la réponse ici dans un constante parce que maintenant je m'en

66
00:05:58,400 --> 00:06:03,130
soucie vraiment, je veux m'assurer que si la réponse n'est pas correcte, donc si nous

67
00:06:03,200 --> 00:06:07,240
avons un code d'état 400 ou 500, je lance également une nouvelle erreur

68
00:06:07,250 --> 00:06:14,360
où je dis que quelque chose s'est mal passé ou où vous faites une erreur la manipulation que vous voulez faire, de sorte

69
00:06:14,360 --> 00:06:20,200
que nous lançons également une erreur dans ce cas. Au fait, je ferai de même

70
00:06:20,210 --> 00:06:25,620
pour la suppression avant de tester cette erreur forcée que j'ai implémentée.

71
00:06:25,670 --> 00:06:29,150
Donc, ici pour la suppression, je veux également vérifier ceci et pour cela bien

72
00:06:29,360 --> 00:06:36,120
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

73
00:06:36,120 --> 00:06:40,400
mise à jour en raison du rejet de s

74
00:06:40,470 --> 00:06:46,680
ici, si cela a un effet. Si je reviens maintenant ici à l'administrateur, je commence à ajouter ceci,

75
00:06:46,680 --> 00:06:48,010
j'ajoute un point d'exclamation et

76
00:06:48,030 --> 00:06:54,150
je clique dessus, maintenant ce que vous verrez est que la mise à jour est simplement rejetée, donc nous ne voyons pas le point

77
00:06:54,240 --> 00:07:00,230
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.

78
00:07:00,310 --> 00:07:01,700
Maintenant, comment pouvons-nous gérer cela?

79
00:07:01,720 --> 00:07:04,310
Comme je l'ai dit, je veux

80
00:07:04,330 --> 00:07:10,610
lancer une alerte et donc j'utiliserai use effect, pour utiliser le crochet d'effet que React propose que

81
00:07:10,690 --> 00:07:16,690
nous trouvons ici, je veux l'utiliser et je peux simplement l'implémenter ici après avoir initialisé

82
00:07:16,710 --> 00:07:24,490
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

83
00:07:24,880 --> 00:07:28,670
change, donc si nous définissons cela comme une erreur pour

84
00:07:28,750 --> 00:07:34,510
ne pas être une erreur, alors ici je vérifie si l'erreur est vraie, donc si nous

85
00:07:34,510 --> 00:07:39,010
avons une erreur et si nous l'avons, alors je peut lancer une

86
00:07:39,010 --> 00:07:41,380
alerte, une erreur s'est produite.

87
00:07:41,380 --> 00:07:48,920
Je veux sortir mon erreur ici et ça devrait être le message d'erreur parce que c'est ce que je mets ici,

88
00:07:48,920 --> 00:07:49,350
je

89
00:07:49,370 --> 00:07:55,270
mets mon erreur sur le message donc ça devrait être une chaîne que je peux sortir et

90
00:07:55,270 --> 00:08:04,610
ensuite j'ajouterai un bouton où je dis OK qui rejette simplement cela. Maintenant aussi important, si nous obtenons une erreur,

91
00:08:04,610 --> 00:08:11,180
je ne veux pas m'éloigner. Donc, pour éviter que cela se produise, je

92
00:08:11,210 --> 00:08:19,670
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.

93
00:08:19,700 --> 00:08:27,390
Donc, fondamentalement, ici après le bloc if else mais toujours dans le bloc try, là, je veux m'éloigner.

94
00:08:27,410 --> 00:08:29,300
Alors maintenant, essayons à nouveau, revenons ici,

95
00:08:29,300 --> 00:08:30,710
modifions cela, ajoutons un point

96
00:08:30,710 --> 00:08:33,920
d'exclamation, cliquez ailleurs, cliquez sur enregistrer et maintenant je reçois mon message

97
00:08:33,920 --> 00:08:40,730
d'erreur ici et je reste sur cette page et il est également réinitialisé. Je peux ajouter ceci à nouveau, cliquez

98
00:08:40,760 --> 00:08:43,430
ici et c'est parti.

99
00:08:43,700 --> 00:08:50,150
D'un autre côté, si nous corrigeons maintenant cette erreur ici dans les actions en lisant cela ici et que

100
00:08:50,150 --> 00:08:52,960
nous revenons maintenant et revoyons cela, si je

101
00:08:52,970 --> 00:08:57,170
le modifie, ajoutez mon point d'exclamation, cliquez ailleurs et cliquez sur enregistrer, maintenant

102
00:08:57,170 --> 00:08:59,880
que tout fonctionne comme il se doit.

103
00:08:59,900 --> 00:09:04,200
Alors maintenant, cela fonctionne vraiment et maintenant cela se comporte comme il devrait se comporter.

104
00:09:04,220 --> 00:09:09,890
Maintenant, vous pouvez bien sûr également ajouter un spinner de chargement et un gestionnaire d'erreurs à l'écran du produit utilisateur si

105
00:09:09,890 --> 00:09:10,840
vous le souhaitez.

106
00:09:10,850 --> 00:09:15,800
Donc, si vous supprimez cela, ce que je ne ferai pas ici, mais si vous le supprimez, vous n'obtiendrez actuellement

107
00:09:15,800 --> 00:09:17,300
pas de spinner, un spinner

108
00:09:17,300 --> 00:09:22,610
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,

109
00:09:22,610 --> 00:09:26,590
mais vous pouvez l'implémenter de la même manière que nous l'avons fait auparavant si vous le vouliez.

110
00:09:26,600 --> 00:09:28,670
C'est donc quelque chose que vous pouvez certainement faire aussi.