1
00:00:02,270 --> 00:00:07,520
Donc, le stockage est génial, la récupération serait également douce et à la fin, je veux m'assurer que lorsque nous

2
00:00:07,520 --> 00:00:10,510
visitons par exemple l'écran de présentation des produits, nous tendons simplement

3
00:00:10,580 --> 00:00:15,200
la main au serveur et obtenons tous les produits à partir de là, de sorte que sur

4
00:00:15,290 --> 00:00:16,510
cet écran , chaque

5
00:00:16,550 --> 00:00:19,390
fois que nous le visitons, nous chargeons les derniers produits.

6
00:00:19,400 --> 00:00:22,500
Maintenant, pour cela, nous devons envoyer une demande HTTP à partir de

7
00:00:22,520 --> 00:00:28,250
là et donc à la fin ce que je veux faire, c'est que je veux envoyer une nouvelle action Redux qui atteindra le serveur,

8
00:00:28,250 --> 00:00:35,590
récupérer mes produits à partir de là et ensuite définir les produits dans mon magasin. J'ai donc besoin d'une toute nouvelle action ici,

9
00:00:35,620 --> 00:00:43,060
de produits définis, dont je n'avais pas besoin auparavant parce que nous ne travaillions qu'avec des produits factices,

10
00:00:43,060 --> 00:00:50,660
mais maintenant ce n'est plus le cas, alors les produits doivent maintenant être expédiés et j'aurai besoin d'un nouveau

11
00:00:50,660 --> 00:00:58,110
créateur d'action ici que je nommerai chercher des produits. Pour cela, je n'ai pas d'identifiant car je n'enverrai jamais cela

12
00:00:58,110 --> 00:01:01,310
comme une action qui devrait atteindre le réducteur, mais

13
00:01:01,310 --> 00:01:06,110
ce sera juste mon créateur d'action avec le code asynchrone avec la requête HTTP.

14
00:01:06,110 --> 00:01:12,950
Il n'aura pas besoin d'arguments mais grâce à Redux Thunk, il retourne une fonction qui obtient cette fonction de répartition comme argument

15
00:01:13,070 --> 00:01:16,470
et là à la fin, je veux envoyer un objet

16
00:01:16,490 --> 00:01:23,460
d'action où le type est défini produits et où je veux transmettre mon produits mais bien sûr cela ne devrait pas être un

17
00:01:23,480 --> 00:01:30,490
tableau vide mais les produits que je reçois de mon API. Nous pouvons donc sorte de copie de ce code

18
00:01:30,490 --> 00:01:38,610
ici, y compris la partie de répartition asynchrone ici, jusqu'à là où nous obtenons les données de réponse, copiez cela à partir

19
00:01:38,610 --> 00:01:40,590
de la création du produit

20
00:01:40,590 --> 00:01:47,810
et remplacez cette partie ici par elle et maintenant ce que nous faisons est nous envoyons une demande à

21
00:01:47,970 --> 00:01:52,530
cette même URL qu'auparavant, ce qui est logique car c'est là que

22
00:01:52,530 --> 00:01:54,380
les produits sont stockés.

23
00:01:54,390 --> 00:01:58,650
Cependant, maintenant, je veux définir une demande get et c'est en fait la valeur par défaut lorsque nous

24
00:01:58,740 --> 00:02:04,380
utilisons la récupération, nous n'avons donc pas besoin de la définir. Pour une requête get, vous n'avez également pas besoin de définir d'en-tête

25
00:02:04,380 --> 00:02:04,860
et vous

26
00:02:04,890 --> 00:02:09,150
ne pouvez pas définir de corps, donc en fait ici, nous pouvons entièrement nous débarrasser de ce deuxième argument

27
00:02:09,150 --> 00:02:12,020
lors de la récupération, nous envoyons simplement une demande de récupération comme celle-ci.

28
00:02:12,210 --> 00:02:18,000
Maintenant, la réponse récupérera nos données, mais il y a maintenant une caractéristique importante concernant le format de

29
00:02:18,000 --> 00:02:21,880
ces données et il vaut mieux que nous voyions simplement cela.

30
00:02:21,900 --> 00:02:28,470
Alors permettez-moi de consigner les données de réponse ici et de commenter cela pour le moment ou nous pouvons les laisser là-dedans, cela

31
00:02:28,470 --> 00:02:29,680
ne fait aucun mal,

32
00:02:29,700 --> 00:02:32,050
cela ne fait rien d'utile non plus, nous

33
00:02:32,100 --> 00:02:37,200
ne traitons pas cela dans le réducteur encore, mais enregistrons cela et allons maintenant à l'écran de présentation

34
00:02:37,200 --> 00:02:44,230
des produits et assurons-nous que nous envoyons cette action d'extraction de produits. Heureusement, j'ai déjà accès à la fonction de

35
00:02:44,230 --> 00:02:48,670
répartition Redux dans la vue d'ensemble des produits, alors maintenant je dois

36
00:02:48,850 --> 00:02:55,210
juste ajouter un effet d'utilisation afin de pouvoir le déclencher chaque fois que ce composant se charge.

37
00:02:55,210 --> 00:03:04,760
Donc ici, je peux ajouter un effet d'utilisation et dans ma fonction ici, je peux appeler la répartition et maintenant atteindre

38
00:03:04,790 --> 00:03:08,510
mes actions de produit que je dois donc

39
00:03:08,510 --> 00:03:22,210
importer en tant qu'actions de produits à partir d'actions de magasin, comme ceci, qui devraient être des actions et maintenant utiliser les actions produits ici pour déclencher mon action

40
00:03:22,250 --> 00:03:29,240
fetch products qui finira par faire cette requête HTTP et cet effet devrait s'exécuter chaque

41
00:03:29,240 --> 00:03:36,260
fois que mon composant est chargé. Je peux donc ajouter un tableau vide et ajouter ma seule dépendance que

42
00:03:36,260 --> 00:03:38,300
j'ai, qui est la répartition, ici,

43
00:03:38,310 --> 00:03:44,070
c'est la seule dépendance que nous définissons à l'intérieur de notre composant, de sorte que cela ne se reproduira jamais.

44
00:03:44,150 --> 00:03:48,350
La seule fois où il s'exécutera, c'est lorsque ce composant sera chargé et c'est exactement ce

45
00:03:48,410 --> 00:03:49,830
qui devrait être le cas,

46
00:03:49,850 --> 00:03:52,950
chaque fois que je visiterai l'écran, je veux déclencher cet effet ici.

47
00:03:53,270 --> 00:03:57,410
Donc, si je sauvegarde maintenant, sauvegardons ceci et maintenant que cela se charge,

48
00:03:57,440 --> 00:04:03,780
vous voyez ici dans le journal, c'est ce qui s'est passé ici à la fois sur Android et iOS, c'est pourquoi

49
00:04:03,790 --> 00:04:05,520
je vois cela deux fois.

50
00:04:05,560 --> 00:04:07,460
C'est ce que j'ai récupéré au

51
00:04:07,510 --> 00:04:09,900
final, cet objet a été retourné par Firebase.

52
00:04:09,910 --> 00:04:15,970
C'est un objet avec tous mes produits et je n'en ai qu'un, c'est pourquoi je n'en vois qu'un ici et chaque

53
00:04:15,970 --> 00:04:18,190
objet est associé à son ID unique, mais

54
00:04:18,700 --> 00:04:19,510
c'est important.

55
00:04:19,510 --> 00:04:25,210
Nous ne revenons pas dans le tableau, nous récupérons un objet avec des ID uniques comme clés et les valeurs de

56
00:04:25,210 --> 00:04:30,760
ces clés sont alors mes données d'objet et nous avons juste besoin de savoir cela pour le gérer correctement.

57
00:04:30,760 --> 00:04:32,050
Donc, dans notre action,

58
00:04:32,050 --> 00:04:34,200
voici à quoi ressemblent les données de réponse,

59
00:04:34,270 --> 00:04:38,790
bien sûr, dans mon application, je travaille avec un tableau, j'ai donc besoin de transformer cela.

60
00:04:38,950 --> 00:04:43,980
Donc, mes produits chargés ou comment vous voulez l'appeler ici devraient être

61
00:04:44,200 --> 00:04:49,580
un tableau vide et maintenant nous pouvons parcourir cet objet pour mapper les

62
00:04:49,610 --> 00:04:54,570
données d'objet, les produits de l'objet aux produits du tableau.

63
00:04:54,570 --> 00:05:00,490
C'est relativement simple à faire, nous pouvons ajouter une boucle for / in ici avec notre clé

64
00:05:00,490 --> 00:05:09,190
où nous parcourons toutes les données de réponse que nous avons récupérées ici à la fin, puis ici, j'ajoute chaque produit à mes produits chargés avec

65
00:05:09,250 --> 00:05:13,240
push, de sorte que ce tableau grandit au fil du temps et

66
00:05:13,240 --> 00:05:19,420
ce que j'ajoute ici à la fin est juste un nouveau produit, en utilisant le modèle de produit que

67
00:05:19,420 --> 00:05:20,250
vous

68
00:05:20,260 --> 00:05:25,610
devez donc importer, alors assurez-vous d'avoir cette importation ici pointant vers votre dossier de modèles et

69
00:05:26,860 --> 00:05:28,660
là vers le fichier produit

70
00:05:29,690 --> 00:05:36,910
et moi créer un nouveau produit ici où mon ID est cette clé parce que c'est cet ID unique ici que nous

71
00:05:36,910 --> 00:05:43,820
avons dans cet objet pour lequel nous bouclons, puis cette chose utilisateur, c'est-à-dire U1 encore, des données factices parce que nous

72
00:05:43,820 --> 00:05:51,260
n'avons aucune donnée utilisateur impliquée ici et là, nous devons examiner l'objet que nous sommes revenus de Firebase pour obtenir le titre et

73
00:05:51,260 --> 00:05:52,180
ainsi de suite.

74
00:05:52,220 --> 00:05:58,720
Donc ici, notre titre pour ce nouveau produit que nous créons est simplement resData pour la clé donnée. titre et même bien sûr

75
00:05:58,760 --> 00:06:00,380
ici

76
00:06:00,380 --> 00:06:05,920
pour l'imageUrl, donc. URL de l'image. Pour la description

77
00:06:09,440 --> 00:06:19,610
et bien sûr aussi pour le prix, comme ça. Donc, cela ajoute tout aux produits chargés et maintenant les produits chargés seront

78
00:06:19,610 --> 00:06:25,570
un tableau rempli que je peux ajouter ici à l'action qui est envoyée, à l'action

79
00:06:25,580 --> 00:06:27,070
de produits définie.

80
00:06:27,230 --> 00:06:32,530
Donc, la seule chose qui manque, c'est que nous allons maintenant au réducteur et là, nous pouvons gérer les produits de set, peut-être ici

81
00:06:32,690 --> 00:06:38,080
comme premier cas, mais bien sûr la position n'a pas d'importance. Ajoutez des produits définis ici et pour

82
00:06:38,080 --> 00:06:43,660
cela, assurez-vous de l'importer à partir de votre fichier d'actions, puis là, c'est une chose très triviale

83
00:06:43,670 --> 00:06:49,230
que nous sommes sur le point de faire. En fin de compte, je dois

84
00:06:49,230 --> 00:06:59,090
juste retourner un nouvel état où les produits disponibles sont égaux à l'action. produits, donc aux produits que j'ai dérivés ici dans mon créateur

85
00:06:59,330 --> 00:07:05,810
d'action que j'ajoute à mon action envoyée. Et pour le produit

86
00:07:06,280 --> 00:07:14,210
utilisateur, c'est assez similaire, là c'est l'action. produits, juste filtré pour tous les produits qui ont mon ID utilisateur, donc comme ça et

87
00:07:15,450 --> 00:07:20,370
pour le moment en raison de mon code factice ici où je code en dur mon ID utilisateur, cela signifie

88
00:07:20,490 --> 00:07:23,670
bien sûr que tous les produits chargés sont traités comme mes produits.

89
00:07:23,670 --> 00:07:29,790
C'est quelque chose que nous changerons plus tard une fois que nous aurons ajouté l'authentification. Donc, avec cela, maintenant si cela se recharge,

90
00:07:30,080 --> 00:07:35,120
vous voyez que nous commençons avec les données factices, mais elles sont immédiatement

91
00:07:35,420 --> 00:07:39,830
remplacées par ces données chargées. Donc, le chargement des données fonctionne très

92
00:07:39,830 --> 00:07:44,370
bien, nous pouvons travailler avec cela comme nous le pourrions avec nos propres données ici.

93
00:07:44,390 --> 00:07:49,340
Bien sûr, nous ne stockons pas de commandes sur le serveur et quelque chose comme ça, mais nous pouvons charger nos données

94
00:07:49,340 --> 00:07:51,410
que nous avons précédemment stockées sur le serveur.