Donc, dans le créateur d'action de création de produit, qui est actuellement une fonction qui ne fait que renvoyer
une action, nous pouvons maintenant peaufiner cela un peu. Au lieu de renvoyer une action, nous pouvons maintenant
y
retourner une autre fonction grâce à Redux Thunk, grâce à ce paquet, nous pouvons le faire maintenant et ce sera
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
simplement besoin
de ne pas retourner cela mais d'envoyer cette action,
c'est la différence importante et il me manque une accolade ici.
Alors, qu'est-ce-qu'il s'est passé?
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
mais qui peut maintenant fonctionner comme avant,
nous n'avons donc pas besoin de changer tous ces créateurs d'actions, vous pouvez donc vous en
tenir à l'ancienne syntaxe, mais maintenant grâce à Redux Thunk, une syntaxe alternative pour
ainsi dire est également prise en charge où cette fonction de créateur d'action ne renvoie pas immédiatement un objet
d'action mais à la place, où elle renvoie une fonction et si c'est le cas, Redux Thunk
interviendra et s'assurera que tout reste encore fonctionne et s'il retourne une fonction, alors c'est une fonction
qui doit recevoir un argument, la fonction de répartition qui sera transmise automatiquement par Redux Thunk, donc Redux
Thunk
appellera finalement cette fonction pour vous et donc vous pourrez puis distribuez une nouvelle action et ici, distribuez
l'objet d'action réel que nous voulions précédemment distribuer mais avant de le
faire, vous pouvez maintenant exécuter le code asynchrone que vous voulez et qui sera autorisé et ne cassera pas votre Redux parce
que Redux Thunk s'en occupera et vous pouvez en apprendre plus à ce sujet dans
mon React Course par exemple ou bien sûr dans la
documentation officielle de Redux Thunk, également dans les documents officiels de Redux.
Alors maintenant, ici, nous pouvons envoyer une demande HTTP et dans React Native, nous pouvons utiliser l'API
fetch qui est intégrée et fetch
ici fonctionne essentiellement comme l'API fetch dans le navigateur où cela est également disponible.
Il faut une URL à laquelle vous souhaitez envoyer la demande et c'est cette URL que nous
avons ici, donc je vais simplement copier cette URL depuis Firebase et l'entrer ici.
Maintenant, la récupération sonne comme si elle récupérait toujours des
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é
pour obtenir des données, vous pouvez également l'utiliser pour envoyer une demande de
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
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
vous pouvez ajouter n'importe quel nœud que vous voulez ici, n'importe
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
stockeront vos données.
Important et c'est juste une chose spécifique à Firebase, vous devez ajouter. json ici.
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
juste une chose spécifique à Firebase. Par défaut, cela enverrait une requête
get mais pour stocker des données, Firebase veut une requête post et pour l'envoyer, nous devons passer un
deuxième argument à récupérer qui devrait être un objet Javascript. Dans ce deuxième argument, vous pouvez configurer la
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.
et ici, elle devrait être postée qui ajoute ce produit que nous sommes sur le point d'envoyer à ce nœud
qui sera créé là-bas.
Maintenant, vous pouvez également configurer des en-têtes là-bas et nous devons définir un
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
avez des paires clé-valeur avec vos identifiants d'en-tête comme clés et les valeurs comme valeurs et ici la valeur
est application / json pour faire savoir à Firebase que nous sommes sur le point d'envoyer des données
JSON et que nous devons le faire.
Nous devons ajouter un corps avec les données que nous voulons ajouter à cette demande et les données doivent être
au format JSON.
Heureusement, React Native prend en charge l'objet JSON que Javascript côté navigateur prend également en charge et là,
nous pouvons appeler stringify pour transformer un tableau ou un objet Javascript au format JSON, donc en une chaîne
à la fin
et là, je veux ajouter mon produit. Donc, à la fin, je veux
stringifier ici un objet qui contient mon titre, ma description, mon
imageUrl et mon prix, pas l'ID car
en fait Firebase va générer un ID pour nous ici, ce qui est vraiment pratique.
Maintenant, cela enverra la demande, mais bien sûr, je ne veux créer le produit localement
que si cette demande a réussi, car je peux également utiliser cet ID créé automatiquement que
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
valeur dans le futur ou générera une erreur dans le futur.
Donc, pour attendre cette réponse, nous pouvons ensuite ajouter ici après récupération, donc sur cette promesse
et nous obtiendrons notre réponse ici afin que nous puissions faire quoi que ce soit avec la réponse.
Vous pouvez également écouter les erreurs avec catch et c'est quelque chose que vous devriez
déjà savoir car les promesses
ne sont pas spécifiques à React Native, c'est du vanilla Javascript et React Native prend également en charge la syntaxe
d'attente asynchrone plus moderne au lieu de then et catch. Pour l'utiliser, vous ajoutez ici async devant votre fonction,
ce mot-clé async et maintenant vous pouvez attendre votre réponse ici et la stocker dans une constante avec cette syntaxe,
avec le mot-clé wait.
Maintenant, dans les coulisses, cela transforme cela en ancienne syntaxe avec then, donc
c'est comme si vous ajoutiez alors ici et que vous utilisiez votre réponse dans un rappel que vous y êtes arrivé.
Mais c'est un peu plus facile à lire, c'est pourquoi j'utiliserai cette syntaxe
d'attente asynchrone, sachez simplement que c'est comme ajouter ensuite, juste plus lisible. Au fait, lorsque vous utilisez async wait, cette
fonction retournera toujours automatiquement une promesse, donc toute cette fonction create
product
retourne maintenant une promesse.
Il n'a pas fait ça
avant, maintenant il
le fera, vous voyez qu'ici, il retourne maintenant une promesse. Voilà donc notre réponse, cette
réponse peut maintenant être décompressée pour y introduire les données, donc les
données de réponse, cela se fait en appelant response. json, c'est une méthode qui est disponible sur cet
objet de réponse que nous obtenons. C'est encore une tâche asynchrone que nous
devons attendre et maintenant cela nous donnera finalement les données retournées par Firebase lorsque nous ajouterons un produit.
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
toujours mon action ici, mais comme nous avons attendu ici et donc c'est comme si c'était dans
plusieurs blocs, cela ne sera envoyé qu'une fois ces opérations ici terminé.
Donc avec ça, sauvegardons ceci et ajoutons un nouveau produit en allant dans la section
admin ici et ensuite j'ajouterai une
chemise blanche, j'ai choisi une belle imageUrl pour
ça, la voici.
Disons que cela coûte 39. 99, c'est une chemise blanche qui est assez élégante.
Si je l'enregistre maintenant, je dois d'abord le charger, maintenant il est ajouté, le voici et maintenant
si vous regardez Firebase,
nous voyons
également qu'il y a maintenant un nœud de produits. Là, c'est cet ID unique et là nous
avons les données que nous avons soumises et si vous regardez votre console, vous
voyez que c'est ce que nous avons récupéré, ce sont
ces données de réponse ici.
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,
nous pouvons réellement ajouter une clé ID ici et ajouter resData. nom pour accéder à cette clé de nom
sur le retour de réponse par Firebase pour transmettre l'ID généré côté serveur à notre
réducteur de création de produit à la fin ou à la logique qui s'exécute dans le réducteur.
Alors maintenant, dans le réducteur de produits, nous ne pouvons pas utiliser cet identifiant factice ici, mais à
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é
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
est et donc, nous l'utilisons sur le frontend également, ce qui sera important pour plus tard, lorsque nous
supprimerons également des éléments, etc.
Cela ajoute donc un produit, mais bien sûr, dès que nous rechargeons l'application, elle disparaît car dans l'application,
elle n'était stockée qu'en mémoire.
Maintenant, nous le stockons également sur un serveur, mais nous ne le récupérons jamais depuis un
serveur, alors assurons-nous de le faire également.