Maintenant que nous sommes vraiment près de la fin de ce module, nous devons nous assurer que nous envoyons maintenant
des actions pour créer un nouveau produit ou pour mettre à jour
un produit et donc tout d'abord nous devons ajouter ces actions ici dans notre dossier d'actions .
Je vais donc exporter une constante ici, créer un produit comme celui-ci ici, créer un produit et puis ici aussi, un autre identifiant pour la mise à jour dans
le produit avec la mise à jour du produit et la mise à jour du produit comme celui-ci et créer des créateurs
d'action adaptés ou créer un produit et maintenant c'est à vous comment vous voulez structurer cela, quelles données vous attendez
lorsque vous créez un produit.
Je suis un fan de la création du produit vraiment ici dans l'action ou
dans le réducteur, donc je m'attends vraiment à obtenir un titre ici, une description, une imageUrl et un prix disons,
puis je retourne un objet d'action où le type est créer un produit et les données du produit sont tout simplement toutes ces
données fusionnées.
Donc, ici, j'ai mon titre qui est mappé sur le titre que nous obtenons comme argument, la description mappée sur la description et
donc nous pouvons également utiliser un raccourci Javascript moderne où si le nom de la
propriété et le nom de la variable de valeur sont
les mêmes, vous pouvez simplement écrire c'est comme ça, donc si c'est la même chose que
price: price, nous pouvons simplement
l'écrire ici, bien sûr, c'est aussi possible pour le titre et la description afin que nous mappions tous ces arguments en propriétés du
même nom dans cet objet et si nous mettons à jour un produit qui est relativement égal, mettre à jour le produit, donc nous pouvons généralement le
copier mais il y a une différence importante. Ici, nous avons également besoin de l'ID du produit qui doit changer, nous obtenons
donc cela comme un argument supplémentaire et nous pouvons le stocker dans notre action donc dans une propriété distincte de notre objet action. Maintenant, dans le réducteur, nous devons bien
sûr
gérer cela, nous
devons gérer la création et la mise à jour. Ajoutons donc un nouveau cas ici dans le réducteur de produits pour créer un
produit et pour cela, assurez-vous d'importer créer un produit à partir de produits d'actions et bien sûr un pour mettre à jour un
produit avec le produit de mise à jour, assurez-vous d'importer cela également.
Dans créer un produit, bien sûr, nous devons créer un nouveau produit et je le stockerai ici dans une constante avec le
nouveau mot-clé dans le modèle de produit que nous avons
créé plus tôt, pour cela vous devez simplement vous assurer que vous importez ce modèle de produit ici à partir de le dossier
des modèles et ce produit ici reçoivent un ID qui pour l'instant peut générer manuellement avec une nouvelle date à chaîne pour avoir
une sorte d'ID factice pseudo unique pour le moment plus tard, cela sera généré sur un serveur mais nous ne l'avons
pas encore .
L'identifiant du propriétaire pour le moment est codé en dur pour U1 car nous n'avons pas d'utilisateurs dans cette application pour
le moment, mais le titre et ainsi de suite peuvent être remplis avec les données de l'action car dans l'action pour créer un produit,
nous avons la clé de données du produit et qui contient un objet avec titre, description,
imageUrl et prix et ce sont des
données que nous pouvons maintenant récupérer.
Donc ici pour le titre, nous obtenons une action productData. title, pour l'imageUrl, c'est l'action. données du
produit. imageUrl, sans surprise pour la description, c'est l'action. données du produit. description et pour
le prix, c'est l'action. données du produit. prix. C'est maintenant un nouveau produit que je crée.
Maintenant, nous devons l'ajouter à notre magasin en renvoyant notre état mis à jour ici, où je copie d'abord l'état
existant et maintenant je dois l'ajouter aux produits disponibles et aux produits utilisateur parce que nous l'avons
créé, il appartient donc certainement pour nous, il doit donc faire partie à la fois des tableaux et des produits
disponibles, bien là, nous pouvons prendre ces produits disponibles que nous avons obtenus et utiliser concat pour obtenir un nouveau
tableau qui est l'ancien tableau plus ajouter un nouvel élément et ici, le nouveau produit est ce nouvel élément et je fais
exactement la même chose ici pour les produits utilisateur.
Alors là, j'utilise des produits utilisateurs d'État et je concatte mon nouveau produit. Qu'en est-il maintenant de la mise à jour? Pour la mise à jour, nous devons
d'abord trouver l'index du produit actuel, donc l'index
du produit pourrait être un nom constant peut être trouvé en accédant à nos produits utilisateur et là avec l'index de recherche qui
est une méthode Javascript intégrée, nous pouvons trouver l'indice d'un certain élément.
Encore une fois, cela prend une fonction qui s'exécute sur chaque élément de ce tableau et qui doit retourner true pour que
nous ayons un index et là, je vais regarder les ID et chercher les ID où il est égal à
mon pid, mon action pid parce que si
vous vous souvenez de la façon dont nous avons configuré cette action, pour la mise à jour, nous avons ici le champ pid
qui contient les ID de produit que nous obtenons.
Je recherche donc ce produit, puis je stocke l'index de ce produit dans le tableau des produits
utilisateur dans l'index des produits ici, maintenant
nous pouvons créer un produit mis à jour ici qui est techniquement un nouvel objet produit mais bien
sûr prérempli avec des anciens données,
par exemple, nous conservons
l'ID, nous prenons donc une action pid comme valeur ici.
Je garde également l'ID du propriétaire et pour cela, je peux accéder aux produits utilisateur d'État pour l'index que nous
venons de découvrir, donc pour cet index de produit ,. ownerID, je ne changerai pas cela.
Bien sûr, je vais stocker le
nouveau titre, donc ici je vais stocker l'action. données du produit. titre, je vais stocker la nouvelle imageUrl, donc action. données du
produit. imageUrl et moi allons
stocker une nouvelle description, donc action. données du produit. la description. Cependant, j'ai mentionné que le prix ne devrait pas être
modifiable, donc en tant que valeur pour cela, je garderai le prix d'origine, donc indiquez l'index des produits des produits utilisateur. prix ici.
Au fait, cela signifie également que notre action n'est pas entièrement correcte, là aussi j'attends un prix, je ne devrais pas le faire parce que nous ne pouvons pas le
saisir de toute façon dans nos entrées, nous n'en avons pas besoin donc nous ne devrions pas attendez-vous ici, nous ne devrions pas le transmettre dans le cadre des données de produit pour
la mise à jour du produit, pour un nouveau produit, nous en avons besoin, mais pour la mise à jour, nous ne le faisons pas.
Donc, avec cela, nous avons notre produit mis à jour avec de nouvelles données et d'anciennes données,
maintenant nous devons mettre à jour notre état bien sûr et pour cela, nous avons les produits utilisateur mis à jour où à la fin je copie mes produits
utilisateur existants avec cette syntaxe ici pour créer une copie, puis j'ai défini des produits utilisateur mis à jour pour l'index de produit
sélectionné égal au produit mis à jour, donc je remplace le produit de cet index par le nouveau produit mis à jour dans ma copie,
non pas dans la matrice d'origine mais dans ma copie. Je dois faire la même chose dans les
produits disponibles mais là, je dois d'abord trouver l'index car cet index ne fonctionne ici
que pour les produits utilisateur, l'index dans les produits disponibles est très probablement
différent, donc j'ai mon disponible index des produits ici si vous voulez l'appeler comme ça, qui a généralement la
même logique de sélection, donc nous pouvons copier cela mais bien sûr je vais regarder dans
le tableau des produits disponibles au lieu du tableau des produits utilisateur. Et maintenant, encore une fois, ici, nous pouvons avoir les produits
disponibles mis à jour où je copie mes produits disponibles d'état, puis je définis les produits disponibles mis à jour
pour l'indice de produit donné égal, excusez-moi pour l'indice de produit disponible bien sûr égal au produit mis à jour, de sorte que
Je remplace mon produit existant par le produit mis à jour dans les produits
disponibles et dans la gamme de produits utilisateur. Eh bien et maintenant, nous avons juste besoin de retourner
notre nouvel état, tout d'abord copier l'existant et maintenant définir les produits disponibles égaux aux produits disponibles mis à jour et définir les produits utilisateur égaux aux
produits utilisateur mis à jour, donc à mes tableaux mis à jour je configure Là. Avec cela, nous espérons avoir toute la logique dont nous avons besoin, maintenant répartissons
ces événements depuis l'intérieur de l'écran du produit ajouté. Donc, ici, nous devons importer use
dispatch de React Redux et importer nos actions, alors importez tout en tant qu'actions de produits
du dossier magasin, là du dossier actions et là du fichier produits, puis envoyez ces choses dans le
gestionnaire de soumission bien sûr. Ici, ce que nous envoyons dépend de si nous
éditons ou ajoutons amd
comme je l'ai mentionné, nous pouvons découvrir ce qui est le cas avec l'aide du produit édité, s'il est
défini, nous éditons, s'il n'est pas défini, nous sommes ajouter.
Donc ici, dans le gestionnaire de soumission, nous pouvons ajouter une vérification if et vérifier si le produit modifié, si cela est
défini,
nous modifions, alors je veux envoyer mon événement de mise à jour du produit, pour cela, tout d'abord, je
besoin de créer cette fonction de répartition à l'aide de l'utilisation de la répartition et maintenant avec celle créée, là-bas, nous pouvons appeler le produit
de mise à jour des actions de répartition des produits parce que c'est ce que
nous faisons ici et maintenant transmettre
toutes les données dont nous avons besoin
ici, qui est mon ID de prod. , c'est l'ID du produit
que nous éditons, nous l'extrayons ici et bien sûr en plus, transférez également le titre, transmettez la description, toutes ces constantes d'état
que nous avons ici, notre imageUrl et non le prix parce que nous pas besoin de cela et dans le cas contraire ici, cela signifie que
nous ajoutons, alors je
veux envoyer une action sur les produits. créer un produit, ici
nous transmettons le titre, la description, imageUrl et aussi le prix et avec cela, nous devrions avoir une
configuration où nous espérons pouvoir ajouter et modifier des produits.
Sauvegardons donc
ceci et jetons un coup d'œil. Si nous allons maintenant dans la zone d'administration ici et que j'ai ajouté cela et
que j'ajoute un point d'exclamation ici et aussi ici dans la description et que je clique sur Enregistrer, je reçois indéfini n'est pas un objet, évaluant
le prix des accessoires à fixe.
Il semble donc que j'ai perdu mon prix ici en essayant de mettre à jour cela.
Bon, avant de résoudre ce problème, voyons si l'ajout d'un nouveau produit fonctionne.
Si j'ajoute ici un produit avec test, test qui n'est bien sûr pas une imageUrl valide, donc nous
ne verrons pas d'image mais au moins nous sirotons quelque chose, c'est aussi un test.
Si nous essayons cela et que je clique sur soumettre, cela ne
fonctionne pas non plus, donc en quelque sorte, économiser
le prix ne fonctionne pas et je pense que le problème est là bien sûr, le problème ici est que le prix est
en fait une chaîne ici mais devrait être un nombre, afin que nous puissions facilement le convertir en
un nombre en ajoutant un plus ici avant de le passer pour créer un produit, pour la mise à jour d'autre part, si nous jetons un œil à notre réducteur de
produits, il devrait normalement garder le prix qu'il avait déjà .
Voyons donc si ce plus le corrige pour l'ajout ou s'il y a aussi un problème différent, c'était un changement qui est requis de
toute façon mais voyons s'il y a un autre problème. Alors test, test, douze s'il vous
plaît entrez seulement des nombres ici, pas du texte que vous pourriez actuellement mais qui le casserait,
testez cela, appuyez sur ce bouton, oui cela ne semble pas trop mal, nous avons eu un problème avec l'image ici mais si
nous faisons défiler vers le bas, en fait ici si nous rejetons cela, nous pouvons voir ici notre produit,
donc le prix est manquant, donc quelque chose ne va pas
là-bas et nous ne semblons pas non plus enregistrer correctement l'image,
non seulement parce qu'elle n'est pas affichée mais à cause
de cet avertissement que nous avons reçu, mais
en général, cela fonctionne.
Cependant, par exemple ici, si j'essaie de mettre à jour et d'enregistrer cela, nous obtenons toujours une erreur, il y a
donc toujours quelque chose qui ne va pas.
Donc, une chose qui ne va pas est dans les actions bien sûr, pour mettre à jour le produit ici, le type devrait être mettre à
jour le produit et non pas créer
le produit, sinon nous déclenchons la mauvaise action dans le réducteur, ce qui explique l'erreur de prix que nous avons obtenue.
Il faut donc mettre à jour le produit ici pour mettre à jour un produit sans surprise.
C'est donc un problème, mais un autre gros problème peut être trouvé dans l'écran du produit ajouté. J'utilise ma méthode de rappel ici pour envelopper le
gestionnaire de soumission à droite et je le fais pour
éviter les recréations inutiles des fonctions.
Le problème est que j'ai initialement défini cela pour avoir un tableau vide en tant que liste de dépendances, ce qui signifie
que cela n'est jamais recréé, ce qui était logique lorsque nous n'avions que la connexion à la
console, mais maintenant nous faisons des choses là-dedans et maintenant nous avons effectivement des dépendances.
À l'heure actuelle, je ne recrée jamais cette fonction, ce qui signifie qu'elle n'est jamais recréée pour ses valeurs mises à jour.
Ainsi, lorsque nous soumettons notre formulaire, nous ne prenons jamais en compte ce que l'utilisateur a entré.
Donc, en fait, nous devons
maintenant spécifier les dépendances ici, la fonction de répartition, mais plus important encore, l'ID de prod, le titre, la
description et l'imageUrl et aussi bien sûr le prix. Maintenant, avec cela, si nous sauvegardons cela, tout ira bien et tous
les problèmes devraient disparaître.
Attendons donc que cela
se recharge, allez à l'administrateur maintenant et commencez à éditer cela peut-être et maintenant si nous ajoutons un point d'exclamation dans le titre et dans
la description et nous l'enregistrons et revenons, nous le voyons ici et si nous allons aux produits , nous le voyons
également ici et dans les détails, nous voyons également ce point d'exclamation.
Maintenant, si nous revenons à l'administrateur et
créons un nouveau
produit, testons, testons, douze, testons cela et je l'enregistre et je reviens,
maintenant cela apparaît également là-bas. Bien sûr, l'image ne s'affiche pas
parce que nous n'avons pas entré d'URL valide, mais toutes les autres données
s'affichent, donc cela fonctionne généralement et bien sûr, vous pouvez
entrer une imageUrl valide et cela casserait également, testons rapidement cela ainsi que. Revenons donc à la section admin et ajoutons une étagère ici peut-être,
pour cela j'ai sélectionné l'URL d'une étagère que j'ai trouvée sur internet pour 199. 99, c'est une belle étagère
comme ça. Si nous enregistrons maintenant cela et que nous revenons en arrière, cela semble bon,
voici notre image et nous le voyons également ici sur l'écran du produit et nous pouvons le voir ici également.
Cela semble donc
fonctionner et avec cela, nous avons généralement une configuration qui fonctionne.
Maintenant, il y a des choses mineures sur lesquelles je veux travailler, par exemple avant de supprimer, ce
serait bien d'avoir une petite boîte de dialogue de confirmation et en plus, je veux m'assurer que lorsque nous avons ajouté ou modifié un produit, lorsque
nous avons cliqué sur Enregistrer ici, nous remontons automatiquement.
Ce ne sont donc que des choses mineures bien sûr, mais je pense qu'elles font une belle finale ici dans ce module.