1
00:00:02,060 --> 00:00:07,190
Donc, dans le créateur d'action de création de produit, qui est actuellement une fonction qui ne fait que renvoyer

2
00:00:07,550 --> 00:00:12,560
une action, nous pouvons maintenant peaufiner cela un peu. Au lieu de renvoyer une action, nous pouvons maintenant

3
00:00:12,560 --> 00:00:13,050
y

4
00:00:13,070 --> 00:00:18,890
retourner une autre fonction grâce à Redux Thunk, grâce à ce paquet, nous pouvons le faire maintenant et ce sera

5
00:00:18,890 --> 00:00:29,650
une fonction qui reçoit la fonction de répartition comme argument, puis à son tour doit distribuer un action. Donc ici, dans cette fonction de retour, j'ai maintenant

6
00:00:29,650 --> 00:00:31,100
simplement besoin

7
00:00:31,180 --> 00:00:36,310
de ne pas retourner cela mais d'envoyer cette action,

8
00:00:36,310 --> 00:00:42,090
c'est la différence importante et il me manque une accolade ici.

9
00:00:42,130 --> 00:00:43,110
Alors, qu'est-ce-qu'il s'est passé?

10
00:00:43,360 --> 00:00:50,230
Je change le produit de création pour qu'il soit une fonction que nous pouvons encore distribuer de l'intérieur de nos composants

11
00:00:50,740 --> 00:00:53,500
mais qui peut maintenant fonctionner comme avant,

12
00:00:53,530 --> 00:00:58,870
nous n'avons donc pas besoin de changer tous ces créateurs d'actions, vous pouvez donc vous en

13
00:00:58,870 --> 00:01:03,770
tenir à l'ancienne syntaxe, mais maintenant grâce à Redux Thunk, une syntaxe alternative pour

14
00:01:03,970 --> 00:01:10,180
ainsi dire est également prise en charge où cette fonction de créateur d'action ne renvoie pas immédiatement un objet

15
00:01:10,180 --> 00:01:15,970
d'action mais à la place, où elle renvoie une fonction et si c'est le cas, Redux Thunk

16
00:01:16,510 --> 00:01:22,180
interviendra et s'assurera que tout reste encore fonctionne et s'il retourne une fonction, alors c'est une fonction

17
00:01:22,390 --> 00:01:28,390
qui doit recevoir un argument, la fonction de répartition qui sera transmise automatiquement par Redux Thunk, donc Redux

18
00:01:28,390 --> 00:01:28,900
Thunk

19
00:01:29,620 --> 00:01:35,560
appellera finalement cette fonction pour vous et donc vous pourrez puis distribuez une nouvelle action et ici, distribuez

20
00:01:35,560 --> 00:01:39,680
l'objet d'action réel que nous voulions précédemment distribuer mais avant de le

21
00:01:39,850 --> 00:01:47,170
faire, vous pouvez maintenant exécuter le code asynchrone que vous voulez et qui sera autorisé et ne cassera pas votre Redux parce

22
00:01:47,200 --> 00:01:52,240
que Redux Thunk s'en occupera et vous pouvez en apprendre plus à ce sujet dans

23
00:01:52,240 --> 00:01:56,020
mon React Course par exemple ou bien sûr dans la

24
00:01:56,110 --> 00:02:00,340
documentation officielle de Redux Thunk, également dans les documents officiels de Redux.

25
00:02:00,350 --> 00:02:05,900
Alors maintenant, ici, nous pouvons envoyer une demande HTTP et dans React Native, nous pouvons utiliser l'API

26
00:02:05,900 --> 00:02:08,120
fetch qui est intégrée et fetch

27
00:02:08,120 --> 00:02:12,590
ici fonctionne essentiellement comme l'API fetch dans le navigateur où cela est également disponible.

28
00:02:12,590 --> 00:02:17,210
Il faut une URL à laquelle vous souhaitez envoyer la demande et c'est cette URL que nous

29
00:02:17,210 --> 00:02:21,180
avons ici, donc je vais simplement copier cette URL depuis Firebase et l'entrer ici.

30
00:02:21,380 --> 00:02:24,440
Maintenant, la récupération sonne comme si elle récupérait toujours des

31
00:02:24,440 --> 00:02:30,440
données, donc si elle obtient des données mais en fait le nom est un peu déroutant ici, il n'est pas seulement utilisé

32
00:02:30,440 --> 00:02:33,950
pour obtenir des données, vous pouvez également l'utiliser pour envoyer une demande de

33
00:02:34,040 --> 00:02:40,640
publication ou une demande de vente, donc tout type de requête HTTP. Maintenant, nous n'envoyons pas seulement une demande à cette URL, mais comme

34
00:02:40,640 --> 00:02:47,930
je l'ai dit, Firebase traduit vos demandes en une sorte de requête de base de données et une structure de base de données, de sorte que

35
00:02:47,930 --> 00:02:50,990
vous pouvez ajouter n'importe quel nœud que vous voulez ici, n'importe

36
00:02:50,990 --> 00:02:57,230
quel segment que vous voulez, comme par exemple, les produits et Firebase créeront un dossier ici dans la base de données et y

37
00:02:57,230 --> 00:02:58,410
stockeront vos données.

38
00:02:58,700 --> 00:03:03,800
Important et c'est juste une chose spécifique à Firebase, vous devez ajouter. json ici.

39
00:03:03,830 --> 00:03:11,140
Donc, ce n'est pas nécessaire à cause de React Native ou à cause de Javascript ou parce que c'est une requête HTTP, c'est

40
00:03:11,140 --> 00:03:15,690
juste une chose spécifique à Firebase. Par défaut, cela enverrait une requête

41
00:03:15,700 --> 00:03:21,280
get mais pour stocker des données, Firebase veut une requête post et pour l'envoyer, nous devons passer un

42
00:03:21,280 --> 00:03:27,610
deuxième argument à récupérer qui devrait être un objet Javascript. Dans ce deuxième argument, vous pouvez configurer la

43
00:03:27,610 --> 00:03:34,480
clé de méthode et décrire la méthode HTTP de cette demande et qui peut être récupérée, placée, etc.

44
00:03:34,480 --> 00:03:42,070
et ici, elle devrait être postée qui ajoute ce produit que nous sommes sur le point d'envoyer à ce nœud

45
00:03:42,070 --> 00:03:44,130
qui sera créé là-bas.

46
00:03:44,140 --> 00:03:47,760
Maintenant, vous pouvez également configurer des en-têtes là-bas et nous devons définir un

47
00:03:47,920 --> 00:03:53,530
en-tête, nous devons ajouter l'en-tête de type de contenu et vous ajoutez simplement des en-têtes en tant qu'objet, puis vous

48
00:03:53,530 --> 00:03:58,950
avez des paires clé-valeur avec vos identifiants d'en-tête comme clés et les valeurs comme valeurs et ici la valeur

49
00:03:59,200 --> 00:04:04,290
est application / json pour faire savoir à Firebase que nous sommes sur le point d'envoyer des données

50
00:04:04,360 --> 00:04:06,530
JSON et que nous devons le faire.

51
00:04:06,580 --> 00:04:11,680
Nous devons ajouter un corps avec les données que nous voulons ajouter à cette demande et les données doivent être

52
00:04:11,680 --> 00:04:12,730
au format JSON.

53
00:04:12,730 --> 00:04:19,240
Heureusement, React Native prend en charge l'objet JSON que Javascript côté navigateur prend également en charge et là,

54
00:04:19,240 --> 00:04:26,440
nous pouvons appeler stringify pour transformer un tableau ou un objet Javascript au format JSON, donc en une chaîne

55
00:04:26,440 --> 00:04:28,040
à la fin

56
00:04:28,040 --> 00:04:33,210
et là, je veux ajouter mon produit. Donc, à la fin, je veux

57
00:04:33,210 --> 00:04:37,420
stringifier ici un objet qui contient mon titre, ma description, mon

58
00:04:39,100 --> 00:04:42,100
imageUrl et mon prix, pas l'ID car

59
00:04:42,100 --> 00:04:47,830
en fait Firebase va générer un ID pour nous ici, ce qui est vraiment pratique.

60
00:04:49,070 --> 00:04:54,610
Maintenant, cela enverra la demande, mais bien sûr, je ne veux créer le produit localement

61
00:04:54,820 --> 00:05:00,490
que si cette demande a réussi, car je peux également utiliser cet ID créé automatiquement que

62
00:05:00,490 --> 00:05:08,410
Firebase me renverra et récupérera de manière pratique une promesse, qui est cet objet Javascript qui finira par se résoudre à une

63
00:05:08,410 --> 00:05:12,620
valeur dans le futur ou générera une erreur dans le futur.

64
00:05:12,940 --> 00:05:19,290
Donc, pour attendre cette réponse, nous pouvons ensuite ajouter ici après récupération, donc sur cette promesse

65
00:05:19,290 --> 00:05:26,170
et nous obtiendrons notre réponse ici afin que nous puissions faire quoi que ce soit avec la réponse.

66
00:05:26,190 --> 00:05:31,200
Vous pouvez également écouter les erreurs avec catch et c'est quelque chose que vous devriez

67
00:05:31,200 --> 00:05:33,290
déjà savoir car les promesses

68
00:05:33,300 --> 00:05:39,900
ne sont pas spécifiques à React Native, c'est du vanilla Javascript et React Native prend également en charge la syntaxe

69
00:05:39,900 --> 00:05:46,270
d'attente asynchrone plus moderne au lieu de then et catch. Pour l'utiliser, vous ajoutez ici async devant votre fonction,

70
00:05:46,290 --> 00:05:53,700
ce mot-clé async et maintenant vous pouvez attendre votre réponse ici et la stocker dans une constante avec cette syntaxe,

71
00:05:53,700 --> 00:05:55,400
avec le mot-clé wait.

72
00:05:55,410 --> 00:05:59,520
Maintenant, dans les coulisses, cela transforme cela en ancienne syntaxe avec then, donc

73
00:05:59,580 --> 00:06:05,640
c'est comme si vous ajoutiez alors ici et que vous utilisiez votre réponse dans un rappel que vous y êtes arrivé.

74
00:06:05,640 --> 00:06:09,480
Mais c'est un peu plus facile à lire, c'est pourquoi j'utiliserai cette syntaxe

75
00:06:09,480 --> 00:06:17,160
d'attente asynchrone, sachez simplement que c'est comme ajouter ensuite, juste plus lisible. Au fait, lorsque vous utilisez async wait, cette

76
00:06:17,160 --> 00:06:22,770
fonction retournera toujours automatiquement une promesse, donc toute cette fonction create

77
00:06:22,770 --> 00:06:23,780
product

78
00:06:23,820 --> 00:06:25,880
retourne maintenant une promesse.

79
00:06:26,010 --> 00:06:27,330
Il n'a pas fait ça

80
00:06:27,330 --> 00:06:28,300
avant, maintenant il

81
00:06:28,350 --> 00:06:33,040
le fera, vous voyez qu'ici, il retourne maintenant une promesse. Voilà donc notre réponse, cette

82
00:06:34,280 --> 00:06:38,960
réponse peut maintenant être décompressée pour y introduire les données, donc les

83
00:06:39,140 --> 00:06:45,430
données de réponse, cela se fait en appelant response. json, c'est une méthode qui est disponible sur cet

84
00:06:45,430 --> 00:06:50,730
objet de réponse que nous obtenons. C'est encore une tâche asynchrone que nous

85
00:06:51,050 --> 00:06:56,910
devons attendre et maintenant cela nous donnera finalement les données retournées par Firebase lorsque nous ajouterons un produit.

86
00:06:56,920 --> 00:07:03,620
Maintenant, nous pouvons pour l'instant simplement enregistrer ces données de réponse pour voir ce qu'il y a dedans et j'envoie

87
00:07:03,620 --> 00:07:09,320
toujours mon action ici, mais comme nous avons attendu ici et donc c'est comme si c'était dans

88
00:07:09,320 --> 00:07:13,520
plusieurs blocs, cela ne sera envoyé qu'une fois ces opérations ici terminé.

89
00:07:13,520 --> 00:07:19,190
Donc avec ça, sauvegardons ceci et ajoutons un nouveau produit en allant dans la section

90
00:07:19,190 --> 00:07:21,580
admin ici et ensuite j'ajouterai une

91
00:07:21,830 --> 00:07:24,820
chemise blanche, j'ai choisi une belle imageUrl pour

92
00:07:24,820 --> 00:07:26,320
ça, la voici.

93
00:07:26,320 --> 00:07:34,510
Disons que cela coûte 39. 99, c'est une chemise blanche qui est assez élégante.

94
00:07:34,510 --> 00:07:39,110
Si je l'enregistre maintenant, je dois d'abord le charger, maintenant il est ajouté, le voici et maintenant

95
00:07:39,110 --> 00:07:40,130
si vous regardez Firebase,

96
00:07:40,130 --> 00:07:41,130
nous voyons

97
00:07:41,210 --> 00:07:46,310
également qu'il y a maintenant un nœud de produits. Là, c'est cet ID unique et là nous

98
00:07:46,310 --> 00:07:50,430
avons les données que nous avons soumises et si vous regardez votre console, vous

99
00:07:50,620 --> 00:07:53,440
voyez que c'est ce que nous avons récupéré, ce sont

100
00:07:53,440 --> 00:07:55,100
ces données de réponse ici.

101
00:07:55,120 --> 00:08:01,780
Cela contient une clé de nom et contient également cet ID généré par Firebase, cela signifie que lorsque nous envoyons nos données ici,

102
00:08:01,780 --> 00:08:08,670
nous pouvons réellement ajouter une clé ID ici et ajouter resData. nom pour accéder à cette clé de nom

103
00:08:08,720 --> 00:08:14,800
sur le retour de réponse par Firebase pour transmettre l'ID généré côté serveur à notre

104
00:08:14,800 --> 00:08:21,330
réducteur de création de produit à la fin ou à la logique qui s'exécute dans le réducteur.

105
00:08:21,340 --> 00:08:28,960
Alors maintenant, dans le réducteur de produits, nous ne pouvons pas utiliser cet identifiant factice ici, mais à

106
00:08:28,960 --> 00:08:36,530
la place, attendez-le sur nos données de produit. Là, nous obtenons maintenant un champ ID qui est l'ID généré côté

107
00:08:36,530 --> 00:08:43,430
serveur, je vais m'en tenir à l'ID utilisateur factice pour l'instant, mais nous obtiendrons cet ID généré côté serveur ici et ici il

108
00:08:43,430 --> 00:08:48,910
est et donc, nous l'utilisons sur le frontend également, ce qui sera important pour plus tard, lorsque nous

109
00:08:48,920 --> 00:08:50,600
supprimerons également des éléments, etc.

110
00:08:50,630 --> 00:08:55,460
Cela ajoute donc un produit, mais bien sûr, dès que nous rechargeons l'application, elle disparaît car dans l'application,

111
00:08:55,460 --> 00:08:56,810
elle n'était stockée qu'en mémoire.

112
00:08:56,810 --> 00:09:01,190
Maintenant, nous le stockons également sur un serveur, mais nous ne le récupérons jamais depuis un

113
00:09:01,220 --> 00:09:03,170
serveur, alors assurons-nous de le faire également.