1
00:00:02,550 --> 00:00:04,670
Pour vous assurer qu'ils se chargent, encore

2
00:00:04,710 --> 00:00:10,260
une fois, nous devons revenir au créateur d'action et ajouter une toute nouvelle action dans le créateur d'action des ordres, excusez-moi.

3
00:00:11,590 --> 00:00:18,880
Un identifiant dont j'ai besoin est de définir des commandes, tout comme nous en avions un pour définir des produits pour définir

4
00:00:18,880 --> 00:00:21,340
les commandes chargées, puis ici j'ai

5
00:00:21,340 --> 00:00:28,120
mon créateur d'action de récupération de commandes qui ne prend aucun argument mais qui renvoie ensuite ma fonction de répartition

6
00:00:28,140 --> 00:00:36,580
asynchrone ici, grâce à Redux Thunk et là, finalement, j'envoie ou j'envoie une nouvelle action où le type est des commandes définies et où j'ai

7
00:00:36,580 --> 00:00:41,250
mes commandes chargées et bien sûr, cela ne devrait pas être un tableau vide.

8
00:00:41,290 --> 00:00:47,050
Au lieu de cela, nous pouvons emprunter la logique du créateur d'action des produits, de récupérer les produits là-bas. Nous pouvons prendre toute cette

9
00:00:47,110 --> 00:00:55,850
logique, copier tout cela ici et le déplacer vers le créateur d'action des commandes

10
00:00:55,850 --> 00:00:57,180
et

11
00:00:57,410 --> 00:01:04,000
l'exécuter avant de l'envoyer, ici. Maintenant, bien sûr, nous devons affiner cela, par exemple, la demande doit être envoyée à

12
00:01:04,190 --> 00:01:07,940
commandes / U1 et à nouveau qui sera remplacée plus tard par une valeur dynamique, pour l'instant

13
00:01:07,940 --> 00:01:13,880
il est codé en dur pour récupérer les commandes pour cet utilisateur. Ce devrait être une demande d'obtention, je veux vérifier

14
00:01:13,880 --> 00:01:14,930
cela, ça va.

15
00:01:14,930 --> 00:01:16,250
Ici, j'ai obtenu

16
00:01:16,250 --> 00:01:19,450
mes données de réponse, maintenant ici, j'ai reçu mes commandes chargées,

17
00:01:19,460 --> 00:01:21,550
qui semble être un nom plus approprié,

18
00:01:21,560 --> 00:01:27,170
je continue à parcourir toutes les données que j'ai obtenues et je veux définir mes commandes chargées là-bas, mais

19
00:01:27,230 --> 00:01:30,050
maintenant il y a une différence importante, Je ne crée

20
00:01:30,050 --> 00:01:34,210
pas de nouveaux produits ici que j'ajoute aux commandes chargées, au lieu bien sûr,

21
00:01:34,340 --> 00:01:37,680
je dois créer de nouvelles commandes ici et pour cela, vous devez

22
00:01:37,890 --> 00:01:43,510
importer la commande à partir du modèle de commande. Maintenant, je vois aussi qu'il manque une

23
00:01:43,520 --> 00:01:48,990
accolade, maintenant avant de continuer, je dois m'assurer que j'attrape également toutes les erreurs que

24
00:01:49,020 --> 00:01:57,550
je pourrais avoir et là, je veux jeter l'erreur, essentiellement la repousser, assurez-vous il atteint mon composant et j'ai besoin d'un bouclier de

25
00:01:57,550 --> 00:01:59,220
fermeture de plus mais

26
00:01:59,260 --> 00:02:04,530
maintenant revenons à notre logique ici où je crée de nouvelles commandes, là l'ID

27
00:02:07,350 --> 00:02:11,480
est la clé, tout comme pour les produits, les articles peuvent

28
00:02:11,490 --> 00:02:18,920
être trouvés dans mes données de réponse parce que nous en gros, récupérez cela ici correctement, de sorte que les

29
00:02:18,920 --> 00:02:24,420
données de réponse contiendront une clé d'éléments de carte, par exemple, qui contient les éléments

30
00:02:24,420 --> 00:02:30,360
de carte dont j'ai besoin. Donc, les données de réponse pour la clé donnée et là,. cardItems, c'est là que

31
00:02:30,360 --> 00:02:38,200
je trouve mes articles parce que c'est ce que nous envoyons ici à la fin pour stocker les articles de la

32
00:02:38,200 --> 00:02:42,610
carte, alors ma commande que je crée ici a également besoin du

33
00:02:42,640 --> 00:02:48,700
montant total, je l'obtiens de la clé resData et puis là si nous avons jetez un œil

34
00:02:48,700 --> 00:02:53,290
à Firebase, c'est le champ du montant total ici et la date.

35
00:02:53,330 --> 00:03:00,520
Eh bien pour cela, je crée un nouvel objet date mais je l'initialise avec la clé resData. Date.

36
00:03:00,540 --> 00:03:05,760
Maintenant, nous devons créer un nouvel objet de données car la clé resData. la date est juste cette chaîne de date ici et

37
00:03:05,850 --> 00:03:08,190
j'ai besoin d'un objet de date, pas d'une chaîne

38
00:03:08,190 --> 00:03:13,800
de date, donc nous l'enveloppons, cette chaîne nous l'enveloppons avec la création de l'objet de date ici et donc nous obtenons un

39
00:03:13,800 --> 00:03:14,220
objet

40
00:03:14,250 --> 00:03:17,130
de données et c'est l'ordre que j'ajoute ici aux commandes chargées, nous

41
00:03:17,130 --> 00:03:22,470
faisons cela pour toutes les commandes que nous recherchons et avec cela, nous pouvons expédier cela et maintenant nous avons juste

42
00:03:22,470 --> 00:03:24,950
besoin de le gérer dans le réducteur de commandes.

43
00:03:25,080 --> 00:03:32,230
Donc là, si je gère les commandes définies et pour cela, vous devez bien sûr importer cet identifiant d'action, la seule chose que je dois faire est que je dois retourner

44
00:03:32,290 --> 00:03:37,500
un nouvel objet d'état où les commandes sont égales à l'action. commandes et c'est tout ce que

45
00:03:37,570 --> 00:03:39,280
nous devons faire, donc

46
00:03:39,280 --> 00:03:40,640
vraiment simple.

47
00:03:40,720 --> 00:03:42,250
Maintenant, pourquoi est-ce si simple?

48
00:03:42,280 --> 00:03:47,530
Parce que dans le créateur d'action, nous faisons tout le travail. Là, nous mappons nos commandes, puis ici, j'ai juste

49
00:03:47,530 --> 00:03:50,290
la clé des commandes sur mon action qui contient toutes

50
00:03:50,440 --> 00:03:53,740
les commandes mappées, c'est donc juste ce que je dois stocker ici.

51
00:03:54,150 --> 00:04:03,570
Maintenant, l'étape restante est que nous expédions les commandes de récupération ici dans notre écran de commandes. Alors allons-y et ajoutons à nouveau un effet d'utilisation pour

52
00:04:03,840 --> 00:04:10,560
le faire et pour distribuer, nous devons également importer la répartition de l'utilisation de React

53
00:04:10,560 --> 00:04:14,470
Redux, puis ici, nous pouvons accéder à cette fonction

54
00:04:14,730 --> 00:04:20,050
de répartition en exécutant la répartition de l'utilisation, puis ici en effet,

55
00:04:20,250 --> 00:04:28,420
nous ajoutons l'expédition comme dépendance car dans cet effet, ici, j'expédie et maintenant j'ai besoin de mes actions

56
00:04:28,420 --> 00:04:31,640
de commande, alors laissez-moi tout importer

57
00:04:31,660 --> 00:04:39,730
en tant qu'actions de commande à partir du dossier de magasin, du dossier d'actions, du fichier de commandes

58
00:04:39,730 --> 00:04:50,840
et avec celui importé ici , on peut dire ordonner des actions fetchOrders comme ça et ensuite nous irons de l'avant et ferons cette demande et

59
00:04:51,110 --> 00:04:56,690
donc maintenant si nous l'enregistrons et nous allons à l'écran des commandes, il est initialement

60
00:04:56,690 --> 00:05:05,790
vide mais très très rapide et il charge toutes les commandes que nous avons stockées et ce sont ces trois les commandes que j'ai

61
00:05:05,790 --> 00:05:14,260
ici et bien sûr, nous pouvons développer cela comme avant. Maintenant, un spinner de chargement serait bien aussi et bien sûr, vous

62
00:05:14,260 --> 00:05:15,790
pouvez également mettre la

63
00:05:15,790 --> 00:05:18,830
vidéo en pause ici et essayer par vous-même.

64
00:05:18,830 --> 00:05:24,830
Je vais rapidement le faire de la même manière qu'avant -

65
00:05:24,900 --> 00:05:36,120
importez l'état d'utilisation de React, puis configurez ici l'état isLoading et définissez isLoading en exécutant l'état d'utilisation et en le définissant initialement faux,

66
00:05:36,120 --> 00:05:42,540
puis ici dans l'effet, à la fin je veux pour utiliser asynchrone attendre.

67
00:05:42,550 --> 00:05:50,920
Maintenant, j'ai dit que vous ne pouvez pas ou ne devez pas ajouter asynchrone ici, donc nous pouvons soit l'utiliser alors simplement ici, soit l'envelopper dans

68
00:05:50,920 --> 00:05:52,150
une fonction d'aide.

69
00:05:52,150 --> 00:06:01,320
Maintenant, je vais simplement utiliser l'appel then, je vais donc définir isLoading sur true ici et ensuite ajouter ici ici et une fois que cela est fait, je sais

70
00:06:01,320 --> 00:06:05,880
que nous avons une réponse, alors ici, je vais définir isLoading sur false.

71
00:06:05,880 --> 00:06:08,680
Maintenant, veuillez noter que je n'ai pas de gestion des erreurs ici, donc

72
00:06:08,700 --> 00:06:11,050
si cela échoue, nous ne gérons pas cela, à la

73
00:06:11,070 --> 00:06:13,530
place, nous serons toujours en état de chargement, donc bien sûr,

74
00:06:13,530 --> 00:06:18,200
vous voudrez peut-être également ajouter la gestion des erreurs. Je ne vais pas le faire ici parce

75
00:06:18,200 --> 00:06:21,570
que j'ai montré comment cela fonctionne, pour ne pas trop gonfler ce

76
00:06:21,660 --> 00:06:23,360
module, je ne vais pas l'implémenter

77
00:06:23,370 --> 00:06:28,710
mais je peux, mais bien sûr, vous pouvez gérer les erreurs ici si vous souhaitez l'utiliser, puis l'approche ici

78
00:06:28,710 --> 00:06:30,400
en ajoutant également des captures,

79
00:06:30,420 --> 00:06:32,790
c'est quelque chose que vous pouvez absolument faire ici.

80
00:06:33,430 --> 00:06:35,340
Je vais

81
00:06:35,350 --> 00:06:43,000
cependant me concentrer sur la partie chargement. Maintenant que j'ai tout configuré, nous pouvons importer l'indicateur

82
00:06:43,000 --> 00:06:45,560
d'activité et importer le composant

83
00:06:45,570 --> 00:06:55,340
de vue et pour certains styles, importer également l'API de feuille de style à partir de React Native, puis vérifier si nous sommes dans

84
00:06:55,370 --> 00:07:04,890
l'état de chargement, auquel cas je Je veux renvoyer mon indicateur d'activité centré ici avec une taille grande et une couleur qui devrait

85
00:07:04,920 --> 00:07:12,180
être les couleurs que vous devez importer, donc principale, alors assurez-vous que l'importation de couleurs est ajoutée

86
00:07:12,220 --> 00:07:23,620
et avec celle ajoutée, ici je vais ajouter un style égal aux styles. centré ou comme vous voulez le nommer et ajoutez maintenant cet objet de

87
00:07:23,620 --> 00:07:32,190
styles ici à l'aide de la feuille de style. créer et y centrer devrait avoir

88
00:07:32,840 --> 00:07:44,750
la configuration de flex one, justifier le centre de contenu et aligner le centre des

89
00:07:44,750 --> 00:07:53,980
éléments, comme ceci. Avec ça si on l'enregistre, on regarde les commandes, on voit le spinner. Encore une fois, le chargement est très rapide,

90
00:07:54,010 --> 00:07:59,890
mais vous pouvez le voir si vous regardez attentivement, voici le spinner pendant une fraction de

91
00:07:59,980 --> 00:08:06,850
seconde et par la suite, les commandes sont chargées. Donc, cela fonctionne maintenant, le stockage et la récupération des commandes

92
00:08:07,030 --> 00:08:13,770
fonctionnent également et avec cela, nous avons implémenté des requêtes HTTP et utilisé un serveur pour stocker les données dans cette application.