Pour le bouton Supprimer, recommençons avec la logique Redux.
Donc ici, dans les actions par exemple, nous pouvons enregistrer un nouvel identifiant, supprimer du panier sonne comme un
nom approprié étant donné que nous avions déjà ajouté au panier, alors supprimez du panier.
Je vais également ajouter à nouveau une fonction de création d'action ici, supprimer du panier.
Cela n'a maintenant besoin que de l'ID du produit qui doit être supprimé, donc uniquement l'ID du produit,
puis cela renvoie un nouvel objet d'action où le type de cours est supprimé du panier et où nous avons le pid, l'ID
du produit, où je transmets le ID du produit J'arrive ici. Maintenant, dans le réducteur, nous avions cet étui
à ajouter au panier, maintenant nous devons simplement ajouter
un autre étui ici et cet étui est le
retrait de l'étui à chariot.
Pour cela, vous devez vous assurer que vous importez l'identifiant d'action retiré du panier du
fichier d'actions
du panier et dans le cas
de suppression du panier ici, nous avons à nouveau deux cas.
La première est que nous n'avions qu'un seul article de ce produit dans le panier, comme pour
le tapis bleu, dans
ce cas, nous devons le supprimer entièrement de l'objet
articles du
panier, donc de cet objet et cela le supprimera donc de cette ligne que nous produisons ici.
Si nous avons deux articles ou plus, nous voulons simplement réduire la quantité de 1.
Bien sûr, vous pouvez toujours effacer cet élément entièrement si vous le souhaitez, mais je veux vous montrer
comment vous pouvez différencier ces deux cas.
Donc, en fait, si nous avons une quantité supérieure à un, je ne veux pas effacer l'article du panier,
mais en fait simplement réduire le montant de 1.
Donc, en retirant du panier, nous devons découvrir quelle est notre quantité. Donc, notre quantité actuelle que je stocke dans cette constante peut être
déduite de notre état bien sûr, là dans les articles, nous devons trouver le produit que nous recherchons et bien sûr, nous pouvons le
faire à l'aide de l'ID qui
est une partie de notre action ici dans le champ pid parce que maintenant les éléments d'état
sont un objet et donc nous pouvons accéder à l'action. pid ici, à droite.
Cela permettra d'accéder dynamiquement à la valeur avec la clé d'ID de produit ici dans notre article, donc
avec l'ID de produit
que nous obtenons sur cette action et c'est ainsi
que nous ajoutons des articles à notre objet articles ici à droite.
Nous utilisons notre ID de produit comme identifiant, c'est maintenant
ce que j'utilise ici pour y accéder.
Cela aura une quantité car il contiendra une valeur qui est un article de produit, vous pouvez
bien sûr également ajouter un contrôle si cet article fait réellement partie du panier mais la
façon dont nous construisons cette application, nous ne devrions jamais être en mesure d'atteindre cet sans que ce produit fasse
partie du panier, car nous ne pouvons déclencher notre action de suppression que depuis l'intérieur de l'écran du panier, nous n'avons
donc pas besoin de vérifier ici, mais nous devons absolument obtenir la quantité.
Maintenant, nous pouvons vérifier si la quantité actuelle est supérieure à 1, ce qui signifie que nous devons la
réduire, nous devons la réduire, pas l'effacer,
sinon nous devons l'effacer.
Commençons maintenant par le cas d'effacement.
Donc, ici, nous avons juste besoin de retourner un nouvel objet items qui inclut tous
les anciens articles mais ne comprend plus cet article. Nous pouvons donc avoir nos articles de panier mis à jour ici où nous
clonons les articles d'état, comme ceci et maintenant pour supprimer une propriété, nous pouvons utiliser le mot-clé de suppression que Javascript connaît et là, nous pouvons supprimer les articles
de panier mis à jour pour action. pid.
Donc, cela supprimera cet article de notre objet Javascript copié ici, il supprimera cet article entièrement, cet article de produit entièrement
de notre objet articles du panier. C'est ainsi que nous pouvons l'effacer. Maintenant, dans l'autre cas où nous devons
simplement le réduire, je peux avoir mon article de
panier mis à jour, de sorte que cet article de panier unique où je crée un nouvel article de panier avec
la classe d'élément de panier et là, je veux copier les valeurs de l'existant article du panier mais réduisez simplement la quantité.
Donc, l'article du panier prend la bonne quantité comme premières
valeurs, alors maintenant, le but est d'avoir accès aux éléments de l'état pour l'ID de produit que j'obtiens sur l'action
et puisque répéter cela sera lourd, je le stockerai dans une aide une constante , l'article du panier sélectionné est ici, maintenant nous
pouvons le remplacer ici par l'article du panier sélectionné et ici
je peux utiliser cartItem sélectionné. quantité moins un.
Maintenant, bien sûr, nous savons que ce ne sera pas zéro parce que la quantité était supérieure à 1 et maintenant nous pouvons bien sûr
garder le reste des données.
Donc, nous gardons le prix du produit ici, nous gardons le titre du produit, que tout ne change pas,
la somme change bien sûr et c'est la
somme, l'ancienne somme moins le prix bien sûr, donc moins
le prix du produit parce que nous en avons supprimé un article, nous devons réduire la somme du prix d'un article.
Cet article de panier mis à jour doit maintenant remplacer l'article actuel dans notre objet Articles de panier. Afin que nous puissions également réutiliser du code, je vais en fait changer un peu
et créer des éléments de panier mis à jour en tant que variable ici au lieu d'une
constante ici dans le bloc else, de sorte que je mets à jour cette valeur de variable, de sorte qu'ici dans le
bloc if, nous
pouvons également utiliser le même nom de variable, les articles du panier mis à jour où je le place égal à une copie
des articles existants, mais je remplace ici mon action pid, donc mon ID de produit, mon identifiant, la valeur là avec le article de panier mis à jour qui est mon ancien article
de panier avec la quantité et la somme mises à jour. Ce sont les articles du panier mis à jour,
maintenant,
bien sûr, nous devrons également ajuster le montant total de notre état, donc après
ce bloc sinon, nous retournons une copie de l'état, les articles peuvent être définis sur des articles du panier mis à jour et
maintenant important, le le montant total peut
être défini pour indiquer le montant total moins le prix du produit de l'article de panier
sélectionné, tout comme j'ai mis à jour la somme pour cet article de panier unique, la somme totale du panier
doit bien sûr également être réajustée en tant que telle. Nous pouvons maintenant essayer de répartir cette action de suppression du panier.
Allons donc à l'écran du panier où j'ai finalement cette fonction on remove et là, je veux
maintenant envoyer une action, donc j'aurai besoin d'accéder à
la fonction de répartition à l'aide du crochet de répartition d'utilisation. Nous pouvons maintenant utiliser cela ici, y accéder en appelant simplement utiliser dispatch comme ceci
et ensuite distribuer ceci là-bas.
Dispatch importe maintenant toutes les actions dont nous avons besoin, alors importez tout en tant qu'actions de panier à partir du dossier de magasin, à partir du panier d'actions comme celui-ci, encore une
fois en utilisant cette importation groupée qui est totalement facultative, vous pouvez également cibler les choses spécifiques dont vous avez
besoin, donc cibler le
spécifique les créateurs d'actions, dans ce cas le créateur du retrait du panier dont nous aurions
besoin, puis là-bas, exécutez simplement ce créateur d'action,
dans mon cas en utilisant les actions du panier. removeFromCart, transmettez l'ID du produit que nous obtenons bien
sûr ici, c'est itemData. article.
et maintenant gardez à l'esprit que nous parcourons des articles de cette forme, nous aurons donc un champ d'ID de
produit là-dedans et donc nous pouvons l'utiliser ici pour le transférer pour le retirer du panier, cela devrait
donc nous permettre de mettre à jour cette. Et cela devrait être tout, Redux devrait
faire le reste dans les coulisses et devrait automatiquement restituer l'écran du panier chaque fois que
le panier change, donc chaque fois que nous supprimons des articles. J'ai donc ajouté deux chemises rouges et un tapis bleu et si je retire une chemise
rouge, en
effet bien un problème que nous avons est le changement de commande, nous devrons résoudre ce
problème mais vous voyez que la quantité a été mise à jour correctement.
Si je supprime maintenant cela, le montant total est également mis à jour correctement, si je supprime maintenant cela, en effet, il a complètement
disparu et maintenant cela aussi est désactivé.
Donc, cela fonctionne généralement, mais bien sûr l'ordre étant changé, ce n'est pas
quelque chose que je veux faire ici.
Maintenant, pour éviter que la commande ne change, nous pouvons simplement aller à l'écran du panier où je change mes articles
pour être un tableau et là, nous devons juste nous assurer que ce tableau est toujours trié
de la même manière car ce sélecteur déclencher et récupérer nos données chaque fois que notre état Redux change.
Donc donc ici, nous aurons toujours le dernier instantané de données que nous avons là-bas et donc, c'est ici où nous
avons juste besoin de le trier de la même manière tout le temps et donc de le restituer toujours
de la même manière.
Il nous suffit donc de nous assurer que notre tableau des articles du panier transformé est trié en appelant sort là-bas.
Si je l'appelle comme ça, je commence à ajouter des données ici, maintenant vous voyez que cela
seul n'a pas fait l'affaire parce que nous ne lui disons pas
comment le trier et il ne sait pas comment faire cela pour les objets hors de la boîte mais
nous pouvons passer une fonction pour trier où nous comparons toujours deux éléments, a et b, et
ensuite trier doit retourner un nombre à la fin qui
détermine ce qui vient en premier
et là, vous pouvez bien sûr trier cela cependant vous voulez, par exemple par ID de produit, afin que nous puissions simplement retourner une comparaison où nous vérifions
l'ID de produit de A, le comparer à l'ID de produit de B et s'il est supérieur, puis avec une expression ternaire
ici, j'en ai renvoyé un, sinon je retourne moins un .
C'est la fonction de tri normale fournie avec Javascript et maintenant cela garantit que nous trions
toujours de
la même manière, donc maintenant vous voyez si je supprime cela, le court-circuit rouge reste à sa place et donc notre logique de panier est terminée.
Maintenant, nous pouvons nous assurer que nous pouvons également cliquer sur ce bouton de commande maintenant et nous l'ajoutons comme une commande
que nous pourrons ensuite visiter avec le tiroir utile ici qui nous permet d'aller à l'écran des commandes que nous
n'avons bien sûr pas encore ajouter.