Pour vous assurer qu'ils se chargent, encore
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.
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
les commandes chargées, puis ici j'ai
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
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
mes commandes chargées et bien sûr, cela ne devrait pas être un tableau vide.
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
logique, copier tout cela ici et le déplacer vers le créateur d'action des commandes
et
l'exécuter avant de l'envoyer, ici. Maintenant, bien sûr, nous devons affiner cela, par exemple, la demande doit être envoyée à
commandes / U1 et à nouveau qui sera remplacée plus tard par une valeur dynamique, pour l'instant
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
cela, ça va.
Ici, j'ai obtenu
mes données de réponse, maintenant ici, j'ai reçu mes commandes chargées,
qui semble être un nom plus approprié,
je continue à parcourir toutes les données que j'ai obtenues et je veux définir mes commandes chargées là-bas, mais
maintenant il y a une différence importante, Je ne crée
pas de nouveaux produits ici que j'ajoute aux commandes chargées, au lieu bien sûr,
je dois créer de nouvelles commandes ici et pour cela, vous devez
importer la commande à partir du modèle de commande. Maintenant, je vois aussi qu'il manque une
accolade, maintenant avant de continuer, je dois m'assurer que j'attrape également toutes les erreurs que
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
fermeture de plus mais
maintenant revenons à notre logique ici où je crée de nouvelles commandes, là l'ID
est la clé, tout comme pour les produits, les articles peuvent
ê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
données de réponse contiendront une clé d'éléments de carte, par exemple, qui contient les éléments
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
je trouve mes articles parce que c'est ce que nous envoyons ici à la fin pour stocker les articles de la
carte, alors ma commande que je crée ici a également besoin du
montant total, je l'obtiens de la clé resData et puis là si nous avons jetez un œil
à Firebase, c'est le champ du montant total ici et la date.
Eh bien pour cela, je crée un nouvel objet date mais je l'initialise avec la clé resData. Date.
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
j'ai besoin d'un objet de date, pas d'une chaîne
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
objet
de données et c'est l'ordre que j'ajoute ici aux commandes chargées, nous
faisons cela pour toutes les commandes que nous recherchons et avec cela, nous pouvons expédier cela et maintenant nous avons juste
besoin de le gérer dans le réducteur de commandes.
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
un nouvel objet d'état où les commandes sont égales à l'action. commandes et c'est tout ce que
nous devons faire, donc
vraiment simple.
Maintenant, pourquoi est-ce si simple?
Parce que dans le créateur d'action, nous faisons tout le travail. Là, nous mappons nos commandes, puis ici, j'ai juste
la clé des commandes sur mon action qui contient toutes
les commandes mappées, c'est donc juste ce que je dois stocker ici.
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
le faire et pour distribuer, nous devons également importer la répartition de l'utilisation de React
Redux, puis ici, nous pouvons accéder à cette fonction
de répartition en exécutant la répartition de l'utilisation, puis ici en effet,
nous ajoutons l'expédition comme dépendance car dans cet effet, ici, j'expédie et maintenant j'ai besoin de mes actions
de commande, alors laissez-moi tout importer
en tant qu'actions de commande à partir du dossier de magasin, du dossier d'actions, du fichier de commandes
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
donc maintenant si nous l'enregistrons et nous allons à l'écran des commandes, il est initialement
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
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
pouvez également mettre la
vidéo en pause ici et essayer par vous-même.
Je vais rapidement le faire de la même manière qu'avant -
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,
puis ici dans l'effet, à la fin je veux pour utiliser asynchrone attendre.
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
une fonction d'aide.
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
que nous avons une réponse, alors ici, je vais définir isLoading sur false.
Maintenant, veuillez noter que je n'ai pas de gestion des erreurs ici, donc
si cela échoue, nous ne gérons pas cela, à la
place, nous serons toujours en état de chargement, donc bien sûr,
vous voudrez peut-être également ajouter la gestion des erreurs. Je ne vais pas le faire ici parce
que j'ai montré comment cela fonctionne, pour ne pas trop gonfler ce
module, je ne vais pas l'implémenter
mais je peux, mais bien sûr, vous pouvez gérer les erreurs ici si vous souhaitez l'utiliser, puis l'approche ici
en ajoutant également des captures,
c'est quelque chose que vous pouvez absolument faire ici.
Je vais
cependant me concentrer sur la partie chargement. Maintenant que j'ai tout configuré, nous pouvons importer l'indicateur
d'activité et importer le composant
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
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
être les couleurs que vous devez importer, donc principale, alors assurez-vous que l'importation de couleurs est ajoutée
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
styles ici à l'aide de la feuille de style. créer et y centrer devrait avoir
la configuration de flex one, justifier le centre de contenu et aligner le centre des
é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,
mais vous pouvez le voir si vous regardez attentivement, voici le spinner pendant une fraction de
seconde et par la suite, les commandes sont chargées. Donc, cela fonctionne maintenant, le stockage et la récupération des commandes
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.