Comment pouvons-nous utiliser notre magasin?
Eh bien, gardez à l'esprit qu'en fin de compte ici, je gère mes repas, pas mes catégories parce que nous n'avons aucune action prévue
qui changerait quoi que ce soit là-bas, mais
je gère mes repas ici.
Donc, une grande tâche serait d'aller partout dans notre application où nous importons des repas à partir des données factices et de nous débarrasser de cette importation
et à la place, de récupérer les données de notre magasin, car la
différence sera que nous pourrons plus tard ajouter de la logique pour changer les données dans notre magasin alors que nos
données factices ne changeront jamais.
Nous devons donc importer les données de notre magasin, afin de pouvoir ensuite ajouter de la logique
pour manipuler ces données, par exemple pour restreindre les repas que nous affichons.
Alors, où avons-nous besoin des repas alors? Sur l'écran des catégories,
nous n'importons pas de repas. Nous avons obtenu quelques autres importations dont nous pouvons nous débarrasser, mais ce
n'est
qu'une remarque, nous n'importons pas de repas.
Les catégories peuvent y rester car, encore une fois, nous n'aurons aucune
logique qui changera cela, nous pouvons donc continuer. L'écran des repas de catégorie est une autre histoire, nous importons des repas et
maintenant l'objectif est de se débarrasser de cette importation et de sortir les repas du magasin
Redux et la question est bien sûr, comment faire? Encore une fois, le package React Redux nous y aide. À partir de ce
package React Redux, nous pouvons importer quelque chose, nous pouvons importer un hook, le hook de sélection d'utilisation.
Cela nous permet de sélectionner une tranche de notre état, de notre état géré globalement et de l'utiliser dans ce composant.
Maintenant, j'utilise le crochet ici parce que cela nous permet d'utiliser cela dans un composant fonctionnel, vous
pourriez également être au courant d'une autre approche où vous importez réellement la fonction de connexion et enveloppez votre exportation avec cela
et utilisez l'état de la carte dans les accessoires, la répartition de la carte pour les accessoires, c'est
quelque chose que vous pouvez également
utiliser, cela fonctionnera absolument, mais c'est un peu plus léger,
donc je vais utiliser le sélecteur d'utilisation ici. Avec cela ajouté, maintenant lorsque nous
utilisons nos repas, nous ne les utilisons pas comme ça,
mais maintenant nous pouvons les obtenir à l'aide du sélecteur d'utilisation. Donc, pour dériver nos repas affichés, ce que je ferai
ici, c'est que je vais créer une nouvelle constante, des repas disponibles peut-être, le nom est à vous et utilisez le sélecteur ici comme ceci
car cela me récupérera des données hors de l'état et reviendra c'est donc ce
que je vais ensuite stocker ici dans cette constante, la valeur retournée et le sélecteur d'utilisation prennent
une fonction, une fonction qui sera exécutée pour nous par React Redux.
Une fonction qui obtient automatiquement l'état comme argument, React Redux qui exécute la fonction pour nous fournira l'état
actuel, l'état Redux actuel à cette fonction et il est alors en mesure de renvoyer toutes les données que nous voulons de
cet état, de cet global magasin, de l'état mondial et j'utilise ces termes
de manière interchangeable ici.
Alors, comment pouvons-nous récupérer les données de cet état ici dans le corps
de la fonction et j'utilise la notation de flèche de raccourci ici où sur le côté droit de la
flèche, cela est automatiquement renvoyé s'il n'est pas entouré d'accolades. Eh bien, pour avoir accès à quelque chose de l'État,
nous devons retourner à l'endroit où nous créons le magasin, là je passe dans un réducteur de racine qui est créé
en combinant tous les réducteurs.
Encore une fois, nous n'en avons qu'un, mais j'ai expliqué pourquoi je l'avais fait.
Maintenant, nous avons cette clé, les repas qui vous appartiennent, vous pouvez
nommer ce que vous voulez.
Cela donne à cette tranche de notre état qui est gérée par ce réducteur un identifiant et
nous pouvons maintenant utiliser cet identifiant pour mettre la
main sur la partie de notre état dont ce réducteur est responsable.
Donc à la fin, un état qui ressemblera à ceci, comme cet état initial. Donc dans l'écran de repas de
catégorie, ici j'accède à l'état. les repas ou tout ce que vous avez choisi
comme identifiant dans les réducteurs combinés, puis ici, j'accède aux repas filtrés. Pas des repas que j'aurais aussi là-bas, nous avons
aussi des repas ici mais je veux respecter tous les filtres qui sont fixés.
En ce moment, nous n'avons pas de logique pour les
définir mais avec cela nous changerons à l'avenir, alors ici je veux obtenir mes repas filtrés afin que je reçoive
toujours les repas que je devrais vraiment pouvoir afficher, les repas qui respectent les filtres mis
en place par l'utilisateur et maintenant ce sont les repas disponibles que je veux filtrer encore plus ici pour trouver le repas pour la
catégorie ID que j'ai sélectionnée ou les repas pour la catégorie que j'ai sélectionnée. Avec cela, il n'y a plus de repas en majuscules
dans
ce fichier, c'est tout simplement en minuscules ici et nous nous sommes débarrassés
de cette importation avec succès, maintenant passons. Dans l'écran préféré, nous importons également des
repas
et, comme auparavant, nous devrions nous en débarrasser, alors faisons-le. Au lieu de cela, également comme auparavant, j'utiliserai le sélecteur d'utilisation
de React Redux pour obtenir mes repas dans le magasin et donc ici où j'utilise les repas, j'obtiendrai réellement mes repas disponibles
avec le sélecteur d'utilisation.
Encore une fois, cela me donne un état et je peux accéder à l'état. repas. repas filtrés mais maintenant en fait ici
pour les
favoris, je ne veux pas respecter les filtres qui ont été définis parce qu'à mon avis, il
est logique que lorsque nous voulons voir nos favoris, nous voyons toujours tous les favoris.
Vous pourriez bien sûr avoir une logique différente et opter pour les repas filtrés mais je n'utiliserai que des
repas ici, donc. repas. les repas
peuvent sembler étranges, cela sélectionne la tranche de notre état, puis dans cette tranche, ce truc de repas accède ici à cette propriété de repas
dans notre tranche
d'état, mais bien sûr, si vous regardez votre réducteur, cela n'a de sens que parce que
nous avoir une propriété de repas préférés ici et en effet nous le faisons.
Donc en fait, nous n'avons plus besoin de filtrer nos favoris comme ça et ce n'était qu'un filtre factice de
toute façon, il a toujours pris les repas avec m1 et m2 comme ID, à la place pour nos
repas préférés, nous pouvons simplement les obtenir en accédant à ici, sur nos repas, déclinez vos
plats préférés, donc cette propriété, car nous gérerons plus tard les repas préférés dans un tableau séparé dans notre
magasin, donc c'est
encore plus facile ici, code très court. Donc, avec cela, nous nous sommes débarrassés de l'importation des
repas ici également, passons à l'écran des filtres.
Il n'y a pas d'importation de
repas ici, l'écran de détail des repas en a un.
Alors là, je veux m'en
débarrasser et maintenant ici, nous aurons
besoin de cette autre propriété de repas que j'ai montrée il y a une seconde car ici encore, nous pouvons utiliser
le sélecteur de React Redux pour sélectionner nos repas parce qu'ici, nous avons maintenant notre composant ici où nous utilisons nos repas et là-bas, je veux avoir un tableau avec tous les repas parce que j'essaie
de charger un seul repas par ID et donc ma base, mon tableau dans lequel je cherche cet ID doit bien sûr être un
tableau avec tous les repas et non filtré parce que je ne me soucie d'aucun filtre
défini, ici je cherche un repas spécifique avec une ID spécifique et je veux obtenir une liste
complète des repas et c'est donc là que nous aurons besoin de ce non filtré liste des repas que nous
gérons ici.
Donc donc ici, nous pouvons maintenant obtenir nos repas disponibles avec le sélecteur d'utilisation et là
encore, nous utilisons les repas d'État. les repas maintenant pour de vrai et maintenant nous pouvons
utiliser les repas disponibles ici pour trouver le repas avec cette ID. Avec cela, nous nous débarrassons également de cette importation ici, nous pouvons également supprimer l'importation de
bouton maintenant que je le vois, mais nous aurons en fait un problème.
Vous remarquerez peut-être que dans l'en-tête, j'essaie également de trouver un repas dans le tableau des repas et
nous supprimons cette importation.
Maintenant, le problème est également ici dans les options de navigation, nous ne pouvons pas utiliser le crochet de sélection d'utilisation parce
que vous ne pouvez utiliser que des crochets à l'intérieur d'autres crochets ou à l'intérieur de composants fonctionnels et ce n'est ni
plus ni moins, c'est une fonction normale, pas une fonction composant et aussi pas un crochet.
Nous ne pouvons donc pas utiliser le sélecteur d'utilisation ici, donc cela ne fonctionnera pas.
Maintenant, bien sûr, nous pourrions ramener l'importation de repas, mais ce serait un peu bon marché car dans les applications réelles,
vous aurez parfois cette situation où vous aurez besoin de données de votre magasin Redux dans vos données de navigation
et
donc dans la prochaine conférence, nous allons aborder cela et nous assurer que nous pouvons également y accéder ici.