Donc, le stockage est génial, la récupération serait également douce et à la fin, je veux m'assurer que lorsque nous
visitons par exemple l'écran de présentation des produits, nous tendons simplement
la main au serveur et obtenons tous les produits à partir de là, de sorte que sur
cet écran , chaque
fois que nous le visitons, nous chargeons les derniers produits.
Maintenant, pour cela, nous devons envoyer une demande HTTP à partir de
là et donc à la fin ce que je veux faire, c'est que je veux envoyer une nouvelle action Redux qui atteindra le serveur,
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,
de produits définis, dont je n'avais pas besoin auparavant parce que nous ne travaillions qu'avec des produits factices,
mais maintenant ce n'est plus le cas, alors les produits doivent maintenant être expédiés et j'aurai besoin d'un nouveau
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
comme une action qui devrait atteindre le réducteur, mais
ce sera juste mon créateur d'action avec le code asynchrone avec la requête HTTP.
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
et là à la fin, je veux envoyer un objet
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
tableau vide mais les produits que je reçois de mon API. Nous pouvons donc sorte de copie de ce code
ici, y compris la partie de répartition asynchrone ici, jusqu'à là où nous obtenons les données de réponse, copiez cela à partir
de la création du produit
et remplacez cette partie ici par elle et maintenant ce que nous faisons est nous envoyons une demande à
cette même URL qu'auparavant, ce qui est logique car c'est là que
les produits sont stockés.
Cependant, maintenant, je veux définir une demande get et c'est en fait la valeur par défaut lorsque nous
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
et vous
ne pouvez pas définir de corps, donc en fait ici, nous pouvons entièrement nous débarrasser de ce deuxième argument
lors de la récupération, nous envoyons simplement une demande de récupération comme celle-ci.
Maintenant, la réponse récupérera nos données, mais il y a maintenant une caractéristique importante concernant le format de
ces données et il vaut mieux que nous voyions simplement cela.
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
ne fait aucun mal,
cela ne fait rien d'utile non plus, nous
ne traitons pas cela dans le réducteur encore, mais enregistrons cela et allons maintenant à l'écran de présentation
des produits et assurons-nous que nous envoyons cette action d'extraction de produits. Heureusement, j'ai déjà accès à la fonction de
répartition Redux dans la vue d'ensemble des produits, alors maintenant je dois
juste ajouter un effet d'utilisation afin de pouvoir le déclencher chaque fois que ce composant se charge.
Donc ici, je peux ajouter un effet d'utilisation et dans ma fonction ici, je peux appeler la répartition et maintenant atteindre
mes actions de produit que je dois donc
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
fetch products qui finira par faire cette requête HTTP et cet effet devrait s'exécuter chaque
fois que mon composant est chargé. Je peux donc ajouter un tableau vide et ajouter ma seule dépendance que
j'ai, qui est la répartition, ici,
c'est la seule dépendance que nous définissons à l'intérieur de notre composant, de sorte que cela ne se reproduira jamais.
La seule fois où il s'exécutera, c'est lorsque ce composant sera chargé et c'est exactement ce
qui devrait être le cas,
chaque fois que je visiterai l'écran, je veux déclencher cet effet ici.
Donc, si je sauvegarde maintenant, sauvegardons ceci et maintenant que cela se charge,
vous voyez ici dans le journal, c'est ce qui s'est passé ici à la fois sur Android et iOS, c'est pourquoi
je vois cela deux fois.
C'est ce que j'ai récupéré au
final, cet objet a été retourné par Firebase.
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
objet est associé à son ID unique, mais
c'est important.
Nous ne revenons pas dans le tableau, nous récupérons un objet avec des ID uniques comme clés et les valeurs de
ces clés sont alors mes données d'objet et nous avons juste besoin de savoir cela pour le gérer correctement.
Donc, dans notre action,
voici à quoi ressemblent les données de réponse,
bien sûr, dans mon application, je travaille avec un tableau, j'ai donc besoin de transformer cela.
Donc, mes produits chargés ou comment vous voulez l'appeler ici devraient être
un tableau vide et maintenant nous pouvons parcourir cet objet pour mapper les
données d'objet, les produits de l'objet aux produits du tableau.
C'est relativement simple à faire, nous pouvons ajouter une boucle for / in ici avec notre clé
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
push, de sorte que ce tableau grandit au fil du temps et
ce que j'ajoute ici à la fin est juste un nouveau produit, en utilisant le modèle de produit que
vous
devez donc importer, alors assurez-vous d'avoir cette importation ici pointant vers votre dossier de modèles et
là vers le fichier produit
et moi créer un nouveau produit ici où mon ID est cette clé parce que c'est cet ID unique ici que nous
avons dans cet objet pour lequel nous bouclons, puis cette chose utilisateur, c'est-à-dire U1 encore, des données factices parce que nous
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
ainsi de suite.
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
ici
pour l'imageUrl, donc. URL de l'image. Pour la description
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
un tableau rempli que je peux ajouter ici à l'action qui est envoyée, à l'action
de produits définie.
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
comme premier cas, mais bien sûr la position n'a pas d'importance. Ajoutez des produits définis ici et pour
cela, assurez-vous de l'importer à partir de votre fichier d'actions, puis là, c'est une chose très triviale
que nous sommes sur le point de faire. En fin de compte, je dois
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
d'action que j'ajoute à mon action envoyée. Et pour le produit
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
pour le moment en raison de mon code factice ici où je code en dur mon ID utilisateur, cela signifie
bien sûr que tous les produits chargés sont traités comme mes produits.
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,
vous voyez que nous commençons avec les données factices, mais elles sont immédiatement
remplacées par ces données chargées. Donc, le chargement des données fonctionne très
bien, nous pouvons travailler avec cela comme nous le pourrions avec nos propres données ici.
Bien sûr, nous ne stockons pas de commandes sur le serveur et quelque chose comme ça, mais nous pouvons charger nos données
que nous avons précédemment stockées sur le serveur.