Donc, maintenant que le composant d'élément de produit est réorganisé, il est temps de pouvoir dire, disons, de supprimer les
éléments, car c'est en fait l'une des choses les plus simples que nous pouvons faire.
Cela nous ramène à Redux et là, il est maintenant temps de travailler sur les produits et je
vais commencer par les
actions qui sont actuellement un fichier vide, les produits. Fichier js dans le dossier actions où
je souhaite exporter une action qui nous aide à supprimer des produits. L'identifiant est donc simplement nommé supprimer le produit et il contient
un texte de suppression du produit ici et j'exporterai également un créateur d'action supprimer le produit qui prend l'ID du produit, comme celui-ci et qui renvoie ensuite un objet
d'action dont le type est supprimer le produit et le pid, l'ID de produit est simplement
l'ID de produit transféré, comme ceci.
Maintenant, dans le réducteur, dans le fichier de réduction des produits, nous pouvons écouter cela car
actuellement, nous ne nous soucions d'aucune action. Maintenant, nous pouvons activer le type d'action ici et gérer le cas où il s'agit de supprimer le produit que
nous obtenons de notre fichier d'action de produits et vous devez donc ajouter cette importation. Si la suppression de produit est le cas, nous devons
supprimer le produit de notre gamme de produits utilisateur et bien sûr également de la gamme de produits disponibles,
car il est supprimé en général, non seulement dans nos produits utilisateur, mais dans
toute l'application.
Par conséquent,
ici, je vais retourner un nouvel objet où nous copions l'état existant pour être sûr de ne perdre aucun état et maintenant les produits
utilisateur sont simplement des états. userProducts, donc les anciens
produits utilisateur sur lesquels nous pouvons filtrer, c'est une méthode Javascript intégrée qui renvoie un
nouveau tableau, un nouveau tableau qui est essentiellement créé en exécutant une fonction sur chaque élément de l'ancien tableau et si cette
fonction retourne vrai , nous gardons cet article, s'il retourne faux, nous le laissons tomber.
Donc, cela exécute une fonction où nous obtenons le produit, cette fonction est exécutée pour nous
par Javascript pour ainsi dire et elle passe dans l'élément qu'elle examine actuellement cette fonction.
Nous obtenons donc le produit pour chaque produit dans notre gamme de produits utilisateur et nous voulons renvoyer l'ID du produit, contrairement à l'action
pid qui est l'ID du produit que nous voulons supprimer.
Cela signifie que, fondamentalement, il conservera tous les produits dont les ID ne correspondent pas, s'ils correspondent, nous savons que c'est le
produit dont nous voulons nous débarrasser et donc nous
renvoyons false, ce qui
signifie que dans le nouveau tableau, il ne sera pas inclus.
Maintenant, c'est essentiellement la même logique pour les produits disponibles, il nous
suffit de parcourir tous les produits disponibles et de filtrer le produit là-bas.
Il s'agit d'un changement que nous devons apporter, un autre changement doit être effectué dans le panier, mais
parce que lorsque nous supprimons un produit, il doit également être supprimé du panier, car sinon nous
avons un produit dans le panier qui n'existe plus .
Donc, ici, j'ajouterai également un cas pour supprimer le produit et vous devez donc importer le produit de suppression des produits d'actions dans
le panier. js
reducer ainsi et ici, nous
devons nous assurer que nous retirons le produit du panier s'il a été supprimé.
Donc ici dans le panier, bien sûr, nous obtenons notre ID de produit du produit que nous
voulons supprimer, c'est ce pid dans cette action qui est expédié, donc ici nous retournons un nouvel état où nous voulons mettre à jour notre panier et le montant total
de sorte que le produit a disparu et qu'il a disparu, je veux dire totalement
effacé du panier, non seulement réduit d'un, mais totalement effacé. Donc, les éléments sont ici à la fin une copie
des
éléments existants sans ce produit, donc je vais créer une nouvelle constante, des éléments mis à jour où je copie mes éléments d'état existants
ici, comme ceci,
puis je supprime les éléments mis à jour pour l'action pid, donc je supprime cet article du panier.
Bien sûr, cela n'a de sens que si cet article existe dans le panier, donc je vais d'abord vérifier si les éléments d'état pour l'action
pid, si cela renvoie quelque chose de significatif et si ce n'est pas le
cas, alors je vais simplement retourner l'état existant parce que alors j'en ai fini avec ce cas, je n'ai pas besoin de
changer quoi que ce soit dans l'état, donc je vais juste retourner l'état existant sans changements.
Si je passe ce test,
je sais que le produit avec l'ID que nous sommes sur le point de supprimer fait partie de l'article.
Alors je continue de copier mes articles, puis je supprime le produit à partir de là, mais avant de
le faire, obtenir le total de l'article en accédant aux articles d'état pour l'action pid, puis là, bien sûr, nous l'avons, si nous jetons un
œil au panier modèle d'élément, je veux dire, nous avons ce champ de somme ici, donc à la
fin ici, je dois supprimer la somme. Je suis intéressé par la somme parce que maintenant je peux mettre à
jour mes articles là-bas avec les articles mis à jour où je les ai supprimés avec le mot-clé supprimer et le montant total du panier est le montant
total de l'état moins le total de l'article, donc le total de ce panier élément que nous avions ajouté auparavant. Alors maintenant, nous mettons également à jour le panier de
manière appropriée
lorsque nous le supprimons. Maintenant, nous avons juste besoin d'envoyer cette
suppression, donc de retour dans
les produits utilisateur, ici dans la suppression, nous voulons envoyer. Donc, à partir de React Redux, nous pouvons importer
use dispatch pour accéder à la fonction de répartition ici
en appelant use dispatch comme nous l'avons fait plusieurs fois avant, puis ici, lorsque la suppression est pressée, nous pouvons distribuer
notre
action et
pour cela bien sûr, nous avons besoin pour importer cette action, alors faisons-le, importons peut-être tout en tant qu'actions de produits du dossier de magasin, là du
dossier d'actions et là du fichier de produits et maintenant nous utilisons l'action de
produits là-bas lorsque nous envoyons ceci pour appeler supprimer le produit et transmettre l'ID du produit qui
est bien sûr itemData. article. id ici parce que
nous parcourons tous les produits ici et cela signifie essentiellement que itemData. l'élément fait référence aux instances de notre modèle de
produit, chaque instance a une propriété ID et nous la transmettons pour supprimer le produit.
Donc, si nous essayons cela et que nous allons à l'administrateur et que je clique sur supprimer sur la chemise rouge, en effet, c'est parti ici
et si je reviens aux produits, c'est parti ici aussi.
Maintenant, si nous rechargeons cela et que j'ajoute la chemise rouge au panier, vous le voyez ici, je l'ai ajouté deux fois.
Maintenant, si je vais à l'administrateur et que je le supprime et que je reviens aux produits et au panier, le panier est vide maintenant.
D'un autre côté, si j'ajoute disons le tapis et la tasse de café maintenant, revenez à l'administrateur, supprimez
le tapis mais pas la tasse de café, vous voyez dans les produits, la
tasse de café est toujours dans le panier, travail. À propos, vous remarquerez peut-être que la tasse de café est un peu coupée
ici, c'est quelque chose que je corrigerai plus tard avec le fait qu'ici, nous voyons actuellement un moins pour le total, c'est
aussi quelque chose que je corrigerai dans un seconde.
Tout d'abord, assurons-nous que nous pouvons
cependant dans la section d'administration aller à l'écran d'édition ou que nous avons également un élément là-haut qui nous permet
d'ajouter un nouveau produit.