Commençons par les favoris.
Je veux m'assurer que lorsque je suis dans une recette, je peux cliquer sur cette étoile et qui l'ajoute en tant que favori et l'affiche ici dans
l'écran des favoris où je ne vois actuellement rien parce que j'ai supprimé ces favoris factices.
Pour cela
je vais commencer dans le dossier store, dans le dossier actions et ajouter un nouveau dossier que je nommerai également repas. js, vous pouvez le nommer différemment si cela vous porte
à confusion mais oui, ces deux fichiers repas. js ici en actions et
en repas. js en réducteurs et en actions repas. fichier js, je
vais mettre en place des actions Redux qui commencent généralement par la mise en place de
certains identifiants uniques que je stocke dans les constantes et qui seront basculer favoris.
Vous pouvez utiliser ce que vous
voulez ici, la valeur que vous stockez ici est généralement le même
identifiant, c'est donc la valeur de l'identifiant et qui est simplement stockée dans une constante afin que nous n'ayons pas à la
taper manuellement plus tard, mais nous pouvons toujours importer cette constante et éviter les
fautes de frappe.
Encore une fois, si
c'est nouveau pour vous, consultez d'abord une ressource React Redux dédiée.
Maintenant, j'utiliserai également le modèle de créateur d'action ici, ce
qui signifie que j'ai cet identifiant ici, mais maintenant j'exporterai également une fonction qui me crée une action car une action n'est pas
souvent un identifiant souvent et dans ce cas, c'est le cas, c'est aussi le cas a
besoin d'une charge utile supplémentaire et donc nous avons en fait une action qui est un objet avec identifiant et
charge utile et donc ici, j'ajouterai une fonction qui me crée un tel objet d'action et je nommerai cette bascule préférée comme
ceci, sélectionnez l'identifiant mais dans
le cas du chameau et c'est une fonction qui peut recevoir des données parce que je serai celui qui
l'appelle et qui devrait retourner un objet Javascript qui décrit cette action, donc qui a disons un type, c'est
généralement comme ça que vous appelez
ce champ identifiant mais vous êtes généralement libre d'utiliser tout ce que vous voulez là-bas et
dans
mon cas, ce sera le favori,
donc je pointe cet identifiant, j'utilise cette chaîne comme identifiant et ensuite toutes les données supplémentaires que vous voulez, par exemple ici
je ' ll faudra faire de la pub d l'ID de repas du repas qui doit être basculé et cela
signifie que cette fonction doit également obtenir cet ID et une entrée car sinon je ne peux pas
le stocker dans l'action que j'ai créée.
Donc, c'est mon créateur d'action pour l'action préférée à bascule, maintenant dans le réducteur,
je veux agir quand j'obtiens une telle action préférée à bascule et pour cela, je vais utiliser un modèle que vous avez
probablement
vu si vous avez travaillé avec Redux auparavant , Je vais utiliser une instruction switch ici et activer
mon type d'action car gardez à l'esprit que l'action sera un objet avec une propriété type qui identifie l'action qui s'est produite.
J'active donc ce type d'action, puis je gère différents cas pour les différentes actions
que je pourrais avoir.
Donc, ici, j'ai l'action de bascule préférée et pour cela, vous devez importer le bascule favori des repas d'actions et c'est pourquoi je
le stocke dans la constante séparée parce que maintenant je n'ai plus à taper manuellement les bascules favorites où
je pourrais avoir un typo là-dedans, à
la place j'utilise juste cette constante dans laquelle la chaîne est stockée. Et maintenant ici, je lance la logique que je veux exécuter pour
ensuite travailler avec cette action et changer mon état de telle sorte que le repas avec l'ID de repas qui fait partie de
mon action soit ajouté aux repas préférés ou retiré de là s'il faisait déjà partie parce que c'est une action de bascule ici,
je veux ajouter des
éléments qui ne sont pas encore favoris, je veux supprimer des éléments qui le sont. Note latérale, dans l'instruction switch, j'ajouterai également un
cas par défaut où je renvoie simplement l'état inchangé.
Nous ne devrions pas vraiment atteindre cela, mais au cas où nous le ferions, eh bien c'est ce
que nous faisons, mais revenons à l'affaire préférée. Là-bas, je veux maintenant savoir
si mon repas avec l'ID qui fait partie de l'action parce que j'ajoute l'ID de repas à
l'action, si ce repas fait
déjà partie des repas préférés, si
oui je
veux supprimez-le, si ce n'est pas le cas, je veux l'ajouter. Donc pour cela, je vais commencer par trouver l'index du repas dans le tableau
des repas préférés car si c'est alors -1, je sais que je n'ai pas trouvé d'index donc il ne faisait pas partie, s'il est supérieur
ou
égal à zéro, je sais que l'article en faisait partie. Je vais donc avoir mon index existant ici
et je l'obtiens en utilisant les plats préférés de l'État et là, j'ai entré un signe égal et l'état est simplement mon instantané d'état actuel que
j'obtiens et là, nous aurons une propriété de repas préférés et je peux utiliser la méthode find
index, une méthode Javascript normale que je peux utiliser sur des tableaux pour obtenir l'index d'un élément qui correspond
à certains critères que j'ai mis en place ici dans une fonction que je passe pour trouver index,
cette fonction s'exécute à chaque repas dans le tableau et s'il retourne vrai, alors il me donne l'index de l'élément pour
lequel il a traversé.
Alors là, je veux revenir vrai si le repas. id est égal à l'action. repasId. Cela signifie simplement que le repas que
je regarde dans mes plats préférés a la même idée que le repas pour lequel cette action
se produit et cela signifie que si cela est vrai pour n'importe quel élément des plats préférés, que le repas que
nous essayons de basculer fait déjà partie des favoris, nous devrons donc le supprimer car cela
va
maintenant nous renvoyer l'index de l'élément, donc l'index existant sera supérieur à -1 et donc, nous pouvons ensuite utiliser cet index
pour le supprimer.
Si cela retourne vrai pour aucun article, donc si cela revient à
la fin -1, je sais que l'article ne fait pas encore partie des plats préférés. L'index existant contient donc des informations très importantes et
je vais donc l'utiliser ici dans une instruction if et vérifier si l'index existant
est supérieur ou égal à 0, ce qui signifie que nous avons déjà ce repas dans le cadre des
repas préférés ou non.
Maintenant, dans le cas où, si l'article fait déjà partie des plats préférés, je veux le supprimer.
Donc ici, je vais finalement retourner un nouvel état parce que dans votre réducteur, à la fin,
vous devez retourner un nouvel état qui est un nouvel objet où je copie d'abord l'état existant avec l'opérateur de propagation ici pour le retirer toutes
les
paires clé-valeur de l'état existant, afin que je ne perde aucun état et que je
ne remplace aucun
état que je ne veux pas remplacer et que je ne remplace que les plats préférés, donc je
vais ajouter ceci à nouveau pour remplacer les plats préférés existants par mes nouveaux plats préférés qui devraient en fin
de compte être les anciens repas préférés sans l'élément de cet index.
Et maintenant, ici pour obtenir mes plats préférés mis à jour, je vais créer une nouvelle constante,
mise à jourFavMeals, là je vais d'abord créer un nouveau tableau et le remplir avec mes repas existants, alors déplacez mes plats préférés existants comme ça et
je le fais pour créer une copie de ce tableau afin que je ne manipule pas le tableau d'origine si
je commence maintenant à travailler dessus parce que maintenant je veux prendre mes mises à jourFavMeals, appeler l'épissure ici,
puis supprimer l'élément à l'index existant et uniquement cet élément.
Donc, cela va finalement prendre cet index UpdatedFavMeals, le modifier et supprimer l'élément de cet index et modifier ce tableau,
c'est pourquoi je l'ai copié
afin de ne pas modifier le tableau d'origine et maintenant nous pouvons utiliser ce tableau UpdatedFavMeals ici et stockez-le
en tant que repas préféré dans notre magasin, car ce sera la gamme de repas préférée
sans le repas que nous venons de retirer.
Dans le cas contraire, ce qui est bien sûr pertinent si nous ne trouvons pas de
produit, nous voulons donc l'ajouter, ici, je veux également retourner un nouvel état où je copie d'abord l'ancien
état, puis je remplacerai les plats préférés par être essentiellement mes anciens plats préférés et
maintenant je peux appeler concat, une méthode Javascript intégrée à Javascript qui renvoie un nouveau tableau
qui prend l'ancien tableau et ajoute un nouvel élément et là, je veux ajouter le repas pour cet ID
ici et bien sûr Je peux trouver ce repas sur mon état, là sur les repas, c'est cette propriété, l'état ici se réfère toujours juste
à cette structure d'état ici en passant et maintenant
ici, je peux trouver le repas que je veux ajouter et puisque cela devient
très longtemps, je vais en fait externaliser cela dans une
nouvelle ligne, donc mon repas que je veux ajouter peut être trouvé avec la méthode find qui fonctionne sur tous les repas et là,
si repasId est égal à l'action. mealId, alors j'ai le repas que je veux ajouter et c'est ce repas
que je concatène à mes repas préférés, de sorte que j'ajoute ceci à ce tableau. Cela devrait être une
logique qui fonctionne et qui gère nos favoris.
Maintenant, nous devons nous assurer que nous envoyons réellement cette action chaque fois que nous cliquons sur cette icône en forme d'étoile dans notre
en-tête.
Pour envoyer l'action,
allons à l'écran de détail du repas car c'est là que nous avons
notre icône étoile ici et quand j'appuie sur ce bouton, je veux finalement envoyer une action.
La bonne nouvelle est que la répartition des actions est
très facile, nous avons
obtenu le sélecteur d'utilisation, nous avons également obtenu la répartition de l'utilisation qui, au final, nous permet de lancer facilement une fonction.
La mauvaise nouvelle est que cela ne peut bien sûr être utilisé que dans le corps du composant ici, dans notre composant fonctionnel et non
dans les options de navigation.
Nous devrons donc à nouveau travailler avec des paramètres définis pour communiquer entre les options de navigation et le composant, mais c'est
quelque chose que nous pouvons bien sûr faire. Donc, ici, dans l'écran des détails du repas,
je vais simplement commencer par appeler use dispatch et ce que cela fait, c'est qu'il nous donne une fonction de répartition, une fonction que nous pouvons
appeler pour distribuer de nouvelles actions et je stocke dans une constante nommée répartition. Ensuite, je veux créer un gestionnaire de
bascule préféré qui est une fonction qui, à la fin, devrait envoyer cette action.
Alors ici, je veux appeler la répartition dont je dispose grâce à ce crochet et maintenant
pour répartir, je dois transmettre l'action que je veux répartir et pour
cela, je vais utiliser cette action créateur bascule préférée ici.
Il nous suffit donc d'importer cela, d'importer depuis le dossier du magasin,
là depuis les actions et là depuis les repas. fichier js, à partir de là, je veux importer la
bascule préférée, pas l'identifiant dans toutes les majuscules mais cette fonction de créateur d'action. Avec cela importé ici, en expédition, nous pouvons appeler
toggle favorite comme ceci et maintenant ici, nous devons transmettre l'ID
et c'est bien sûr le repasId que nous extrayons
déjà là-haut ou selectedMeal. Ça marcherait aussi, quoi que
vous vouliez, j'irai simplement pour le repas comme ça.
Maintenant, nous pouvons réactiver l'utilisation de l'effet pour communiquer avec notre en-tête, non pas avec cette ligne mais avec les paramètres
de navigation des accessoires et maintenant ici, je vais nommer cette bascule fav, le nom dépend de vous
et pointe mon bascule gestionnaire préféré.
Maintenant, basculer le gestionnaire favori devrait donc être ajouté comme dépendance ici et pour éviter les
boucles infinies, je vais à nouveau utiliser le rappel d'utilisation que j'importe de React pour encapsuler cette fonction ici.
Donc, ici, l'utilisation du rappel est enroulée autour de cette fonction et nous devons spécifier les dépendances ici et la dépendance numéro
un est la répartition, React Redux s'assurera que cela
ne change jamais, donc c'est une dépendance qui ne changera jamais, la dépendance deux est
repasId, cela aussi ne
devrait pas changer pendant que nous sommes
sur cette page, elle aura toujours la même valeur. Donc, avec cela, cette fonction ne devrait pas vraiment être
recréée, ce qui signifie que cet effet ne se reproduira jamais à moins qu'il ne soit recréé, ce qui n'est
le cas que si nous avions un nouvel ID, auquel cas il serait bon que cela soit recréé mais sinon, cela a gagné 't changer et donc nous
devrions avoir un canal de communication sécurisé ici.
Maintenant, dans l'en-tête, nous pouvons maintenant extraire ce gestionnaire, en passant, nous n'avons plus
besoin du repas ici, nous
pouvons maintenant simplement extraire la fonction préférée de notre navigation de données de navigation get param puis je nomme cette bascule fav
, c'est donc le nom du paramètre que nous pouvons extraire et cela devrait nous donner
accès à cette fonction que nous transmettons. Maintenant, basculer entre les favoris est ce qui devrait être exécuté lorsque nous
appuierons sur ce bouton.
Donc, ici, je pointerai vers le favori parce que cela contient un pointeur sur cette fonction et donc cette fonction
sera exécutée lorsque nous appuierons maintenant sur cette étoile. Eh bien, nous verrons si cela fonctionne.
Gardons cela et revenons aux spaghettis ici et cliquez sur cette étoile et cliquez sur les favoris et ça a l'air
bien,
les spaghettis font partie des favoris.
Cliquons à nouveau sur l'étoile ici et allons dans les favoris et c'est parti, cela
a beaucoup de sens.
Cliquez dessus à nouveau, c'est de retour, allez à la page de détail ici dans l'onglet Favoris et cliquez sur
l'étoile et revenez, eh bien c'est parti.
Vérifions-le également sur Android, pour le schnitzel peut-être, les favoris sont vides en ce moment. Revenons en arrière et cliquez sur l'étoile,
allez dans les favoris, la voici,
revenez en arrière, cliquez sur l'étoile et c'est parti. Donc, cette logique fonctionne généralement.
Il y a quelques choses sur lesquelles je veux encore travailler, par exemple je veux changer
l'icône en fonction du
statut favori, je veux aussi montrer du texte dans l'écran favori quand il est vide mais généralement, la répartition et l'utilisation
des données fonctionnent même si nous en avons besoin dans un en-tête.