Pour la fonctionnalité d'ajout au panier, nous devrons travailler sur deux choses - l'une est
bien sûr que nous pouvons avoir un écran de panier, que nous
avons une icône ici dans notre en-tête qui nous amène à l'écran du panier où nous pouvons voir comme la somme totale et les articles du
panier et où nous avons ce bouton de commande maintenant, mais je
dirais que c'est la deuxième étape parce que la première étape la plus importante est que nous ajoutons la logique pour
gérer les articles du panier et cela implique Redux. Pour cela, je vais ajouter un tout
nouveau réducteur, un deuxième réducteur que je nommerai cart, cart. js et aussi un fichier d'actions et c'est maintenant en fait
un fichier d'action que nous allons remplir.
Nous le ferons aussi avec le fichier produits plus tard une
fois que nous nous lancerons dans l'ajout de produits et ainsi de suite, mais pour l'instant, commençons par la fonction de panier. Voici donc dans le
panier. fichier js dans le
dossier des réducteurs, je vais configurer mon état initial pour cette tranche de panier et encore une fois, ce
sont tous ces réducteurs séparés et les états qu'ils parviennent à constituer ce magasin Redux total parce qu'au final,
c'est ce que vous combinez ensuite ici avec combiné réduit en un seul réducteur de racine et un grand état à la fin.
Nous avons juste ces sous-états individuels pour faciliter la gestion des données.
Donc, ici, dans le réducteur de chariot, à quoi devrait ressembler l'état de notre chariot?
Eh bien, notre panier aura un tas d'articles, pourrait être un tableau et une somme initialement nulle, donc un montant total que vous pourriez dire, vous
pouvez bien sûr également nommer ce montant total peut-être pour que ce soit
vraiment clair.
Ce sont donc les deux choses qui composent mon panier ici et comme toujours,
je ne peux pas insister assez sur ce point, il y a plus d'une façon de mettre cela en œuvre. Donc, si vous souhaitez également gérer d'autres données ici,
faites-le, il n'y a pas
d'approche unique,
bonne ou mauvaise, c'est juste mon approche
de la construction de cette application.
Maintenant, il est important que pour ce panier ici, je veux m'assurer que si nous avons déjà un
article dans le panier, disons la chemise rouge et que je clique sur
le panier une deuxième fois, je n'ajoute pas deux articles à ce tableau mais Je n'ai toujours qu'un seul article là-dedans et à la place,
chaque article de ce tableau d'articles devrait être un objet où je gère comme l'ID du produit peut-être, où j'ai le titre et
la quantité de l'article dans le panier, de sorte que
ce serait alors changer à 2 si je clique dessus une deuxième fois.
Par conséquent, vous pourriez également affirmer que les articles ne devraient peut-être pas être un tableau, mais peut-être un objet Javascript, car cela nous permet
de stocker l'ID du produit sous forme de clé et la valeur pourrait être un objet
avec le titre, la quantité, avec le prix et c'est juste
une alternative, vous
pouvez aussi tout faire avec un tableau mais c'est en fait l'approche que j'utiliserai.
Maintenant, le réducteur que j'exporte est donc un réducteur qui obtient bien sûr un état qui
a notre état initial comme valeur par défaut et une action comme argument qui à la fin doit renvoyer des données.
Donc, à la fin, il doit retourner un nouvel état qui est ensuite utilisé par Redux.
Il nous faut maintenant une action pour continuer.
Alors ici, j'exporterai une constante, un identifiant d'action et je nommerai cet ajout au panier, c'est à vous de
choisir, j'irai avec ajouter au panier comme ça et dans le fichier d'actions, je créerai un tel
fonction de créateur d'action.
Voici donc une autre
constante que je nommerai ajouter au panier qui reçoit disons l'objet produit complet que je veux ajouter, afin que je puisse extraire
les informations dont j'ai besoin, puis ici, nous devons retourner un tel objet d'action
qui a un type qui est ajouté au panier, puis notre produit.
C'est juste un moyen de créer ces actions qui nous permet de le faire très simplement à l'intérieur
de nos composants.
Donc, à la fin, dans le réducteur de panier, dans tous les réducteurs en fait, mais dans l'endroit où nous nous
soucions des
réducteurs de panier, nous obtiendrons cette action d'ajout au panier, nous devons donc ici changer de type d'action et gérer le cas où il est ajouté au panier et vous devez
donc importer ajouter au panier à
partir de ce dossier d'actions et à partir du fichier panier. Maintenant et d'ailleurs, cette action lorsqu'elle est envoyée est
reçue sur tous les réducteurs, mais si vous ne la gérez pas avec un cas distinct,
votre cas par défaut démarrera, ce qui devrait normalement renvoyer simplement votre tranche d'état actuelle pour ce réducteur, qui signifie que la tranche
d'état de ce réducteur est inchangée. Ici, cependant, dans le réducteur de
panier, je veux bien sûr changer mon état, donc
je gère pour ajouter au boîtier
ici et maintenant dans le panier, que devrait-il
se passer là-bas?
Eh bien, nous obtenons notre produit ajouté, nous pouvons le retirer de l'action parce que là dans l'action, nous aurons une clé de produit, c'est ce que
nous venons
de configurer ici dans le panier d'action. fichier js, alors je vais obtenir notre
produit et je le stocke dans un produit constant et ajouté ici avec lequel nous pouvons travailler maintenant
et nous aurons notre prix de produit ici qui est bien sûr ajoutéProduct. prix et nous aurons notre titre de
produit qui est ajoutéProduit. Titre. Avant de continuer, définissons comment l'article du
panier, de sorte que ce que nous stockons ici devrait ressembler, la valeur que nous avons là-dedans.
Je vais donc aller dans mon dossier de modèles et ajouter un élément de panier. js fichier ici, puis ajoutez une classe d'article de panier qui
reçoit un constructeur et avant
de l'oublier à nouveau, qui doit être exportée ici et maintenant dans ce constructeur, je
m'attends à obtenir la quantité du produit que nous sommes sur le point d'ajouter, le prix du
produit, le titre du produit et la somme pour cet article, si nous avons trois fois la chemise rouge, notre somme serait trois fois
29. 99,
donc environ 90 $.
Maintenant, ce que je n'obtiens pas ici, c'est l'ID du produit, car je vais l'utiliser comme clé à l'intérieur de mon objet ici, quels éléments contiennent, puis
deviendra plus clair une fois que nous l'aurons implémenté.
Donc ici dans l'article du panier, je stocke
juste toutes les données que je reçois, la quantité, le prix du
produit et j'ai ces données là que je dois sortir plus tard, donc le titre du produit et la somme, comme ça et maintenant de retour dans le
réducteur, nous pouvons bien sûr importer cette classe d'articles de panier à partir du dossier des modèles et
de l'article de panier ici et maintenant dans cet étui à ajouter là-bas, nous devons
d'abord savoir si ce produit fait déjà partie de nos articles.
Maintenant, comme je l'ai mentionné, j'ajouterai chaque nouveau produit en ajoutant une nouvelle clé aux articles qui est l'ID de ce produit, car
c'est unique, nous n'avons toujours
chaque clé qu'une seule fois, puis la valeur sera un article du panier comme nous venons de le faire
défini dans les modèles et donc je sais que si l'ID du produit que je reçois est déjà une clé
d'articles, alors cela a déjà notre article en tant qu'article de panier.
Donc, ici, nous pouvons simplement vérifier si des articles sont ajoutés pour un produit ajouté. L'ID existe, donc si cela retourne quelque chose de
vrai, donc pas indéfini, alors nous avons déjà l'article dans le panier, ce qui est correct, mais nous devons juste
changer la quantité, sinon
nous devrons ajouter un nouvel article.
Commençons donc par le cas else, car c'est le cas que nous rencontrerons pour la
première fois lorsque
nous ajouterons quelque chose, là nous avons besoin d'un nouvel élément de panier, je le crée
avec le nouveau mot clé et la classe d'élément de panier que j'ai définie et là-bas , nous devons fournir la quantité
qui bien sûr en est une si
nous ajoutons simplement un nouvel article, nous devons fournir le prix du produit, le titre du produit ici et la somme et la somme bien sûr au
départ est juste notre prix du produit, non?
Parce que si nous ajoutons un article de ce prix, la somme pour cet article de panier est le prix de notre produit et maintenant ce
nouvel article de panier doit être ajouté à nos articles de panier ici.
Donc ici, nous renvoyons une copie de notre état et nous
définissons des éléments égaux à un nouvel objet dans lequel je copie tous mes éléments d'état existants, afin que je
copie mon
objet d'éléments existant ici, puis j'ajoute une nouvelle clé avec cette syntaxe dynamique avec les crochets
où le nom de la clé est ajoutéProduct. ID, c'est ce que je voulais dire avec l'ID du produit étant la clé
de notre objet articles et la valeur est notre nouvel article de panier.
C'est juste une syntaxe que vous devez connaître, c'est du Javascript vanille, c'est ainsi que vous pouvez ajouter ou accéder ici comme
une propriété dynamique au lieu de la coder en dur ici comme une chaîne. Soit dit en passant, cela ici devrait bien
sûr également être un état. articles, mon erreur. Donc, avec cela, nous devons ajouter un nouvel élément de panier ici.
Maintenant, si vous avez déjà un article dans le panier, alors bien sûr, nous ne créons pas un
nouvel article dans le panier, nous voulons plutôt mettre à jour celui existant. Je vais donc avoir mon article de panier mis
à jour ici et pour cela, je crée toujours un nouvel article
de panier mais je vais le préremplir avec certaines données existantes, par exemple la quantité ici. Nous obtenons cela des articles d'État pour l'ID du produit ajouté, car cela devrait déjà faire partie des articles
d'État, nous vérifions cela ici et cela aura une clé de quantité bien sûr parce qu'un tel
article ici dans mes articles est juste de tapez les éléments du panier, donc il y aura une propriété
de quantité
et nous en ajouterons simplement un parce que nous ajoutons un
nouvel élément de panier, nous devons donc l'incrémenter. Maintenant, l'article du panier comme deuxième argument prend le prix du produit. Ensuite, bien sûr, puisque nous allons construire l'application
de telle sorte que le prix ne change jamais, ce qui ajouterait beaucoup de complexité ici,
nous devions gérer le panier d'une manière totalement différente dans ce cas, nous devions stocker chaque article du
panier en tant que liste des transactions pour cet article du panier qui est trop pour cela ici.
Donc, comme cela ne change jamais, puisque le prix ne change jamais, nous pouvons à la fin simplement prendre
le prix de production que nous obtenons ou prendre le prix existant que nous avons stocké auparavant, car cela ne changera jamais.
Le titre peut changer et je veux stocker le titre le plus récent ici, donc je vais certainement
prendre celui du produit que nous obtenons ici au lieu de mon ancien instantané et
enfin et surtout, la dernière valeur ici, ma somme totale pour cet article du panier, c'est bien
sûr la somme actuelle, donc j'accède aux articles d'état pour l'ID ici, la somme plus le prix du produit parce que nous ajoutons un nouvel article ici, nous
devons ajouter le prix multiplié par 1 à la somme actuelle. C'est l'article du panier mis
à jour.
Maintenant, avec cela, nous pouvons retourner notre nouvelle tranche d'état ici en copiant les anciens états et en définissant des éléments égaux et maintenant
importants, à un objet où nous copions l'état. articles, mais où nous définissons maintenant à nouveau ajoutéProduit. ID et oui, cela existe déjà mais avec cela
nous le remplaçons simplement avec notre article de panier mis à jour, donc nous faisons la même mise à
jour que nous faisons là-bas. Maintenant que ce n'est
pas tout ce que nous devons faire, nous devons
également modifier le montant total, car cela change bien sûr.
Donc, lorsque nous ajoutons un article pour la première fois, le montant total doit être fondamentalement notre ancien montant total, alors indiquez le montant
total plus le prix du produit et c'est la même chose si nous ajoutons
un article à un panier existant ou lorsqu'il existe déjà dedans parce qu'au final, notre total est toujours juste l'ancien total
plus le prix, parce que nous ajoutons toujours un article de ce produit, c'est
ainsi que cette application fonctionnera.
Donc, notre déclaration de mise à jour ici
est presque la même, la seule chose qui diffère ici est la façon dont nous créons cet article
de panier, donc nous pouvons bien sûr également réutiliser ce code, le déplacer hors du bloc if else et au
lieu d'avoir deux constantes différentes ici , nous pouvons créer une variable avant
d'entrer l'instruction if, mise à jour ou un nouvel
élément de panier peut-être, cela pourrait être un nom parce que nous ne savons pas
ce que ce sera à l'avance, puis ici dans la branche if ici, nous définissons mis à jour ou un nouvel article de panier à cet article de panier mis
à jour, ici, d'autre part, nous le définissons sur ce nouvel article de panier et ici, nous utilisons toujours toujours l'article
de panier mis à jour ou nouveau et avec cela, nous avons une certaine réutilisation de code
ici et ne le faisons pas répéter ce qui est toujours bon. Autre remarque, la copie de l'état ici est bien
sûr toujours redondante car vous définissez toujours les articles et le montant total.
Donc, si vous n'avez toujours que ces deux champs ici et que vous changez toujours les deux, vous
n'avez pas besoin de copier l'état existant, si vous introduisez un autre élément de données dans votre tranche d'état ici que vous ne
modifiez pas ici cependant, vous devez copier votre ancien état afin de ne pas perdre ces données
supplémentaires.
Par conséquent, ici, je laisserai cette fonctionnalité de copie même si nous n'en avons pas besoin techniquement
ici, mais si jamais nous devions changer notre état d'enregistrement et nous n'oublions pas
de le copier et nous perdons donc des données.
Eh bien, il y avait beaucoup de
travail, avec lequel nous pouvons commencer à distribuer cette
action et bien sûr, je veux la répartir à partir de l'aperçu du produit et des
détails du produit car dans les deux écrans, j'ai ajouté des boutons au panier.
Commençons donc sur l'écran de présentation des produits, là pour répartir les actions Redux,
nous devons inclure
le crochet de répartition d'utilisation ici, avec cela ici, nous pouvons simplement accéder à cette fonction de répartition en appelant use dispatch comme
ceci et maintenant lorsque nous cliquons sur ajouter à panier là-bas, nous pouvons envoyer notre action ici et bien sûr
au fait au lieu d'utiliser des fonctions en ligne ici, vous pouvez avoir
des fonctions stockées dans des constantes
distinctes à l'intérieur de votre composant fonctionnel ici, comme alternative, je m'en tiendrai aux fonctions en ligne pour maintenant et j'importerai toutes mes actions
ici en tant qu'actions de panier depuis le dossier du magasin et là, le dossier d'actions, le fichier de panier.
Maintenant, c'est une syntaxe d'importation qui fusionne toutes les exportations du fichier en un seul
objet, nous n'avons qu'une seule exportation ici, donc vous
pouvez également cibler cette exportation spécifique,
plus tard nous aurons plusieurs exportations et donc j'utiliserai cette approche.
Alors ici, nous expédions ensuite l'action du panier.
ajouter au panier et c'est une fonction que nous devons exécuter, c'est notre fonction de créateur d'action
et ceci comme argument prend
notre produit, donc à la fin ici, nous devons passer dans itemData. article qui est juste notre produit ici dans l'écran de détail
du produit.
Par conséquent, nous faisons exactement la même chose, nous importons use dispatch de React Redux, donc ici nous
pouvons accéder à la fonction de répartition en appelant use dispatch et ensuite
pour ce bouton ici dans la fonction en ligne ou dans une fonction nommée distincte si vous
le souhaitez , vous
pouvez appeler dispatch, maintenant nous devons importer nos actions et j'utiliserai la même syntaxe
qu'auparavant où j'importe tout en tant qu'actions de panier depuis le dossier du magasin, le dossier d'actions, le fichier de panier et maintenant les actions de panier, appelez ajouter à
panier ici et transmettre le produit sélectionné qui est notre produit que nous voulons ajouter au panier ici.
J'espère que cela envoie des actions telles que l'article est ajouté au panier, mais bien sûr, nous ne pouvons
pas le confirmer pour le moment.
Eh bien, en fait, nous le pouvons. Vous pouvez faire tourner le débogueur React Native et je ne l'ai
pas utilisé auparavant, mais là, vous pouvez maintenant appuyer sur la commande ou contrôler t pour ouvrir un nouvel onglet,
puis
confirmer cette importation
ici, puis aller dans vos applications et là-bas, ouvrir le menu de débogage sur iOS avec la commande D, sur Android
avec le contrôle ou la commande M et cliquez sur debug remote Javascript. Maintenant, le mien est ouvert sur le port 19003, alors j'ai ouvert le
débogueur React Native
sur le mauvais port, sélectionnez-moi à nouveau, appuyez sur la commande T ou contrôlez T dans le débogueur et choisissez
19003, utilisez le port ouvert pour vous dans Chrome, cliquez sur confirmer et maintenant, se connecte à votre application React en cours d'exécution ici dans
le débogueur, assurez-vous de fermer votre débogueur Chrome, puis de recharger votre application,
maintenant cela devrait se connecter ici et maintenant non seulement vous pouvez
inspecter votre application ici comme
je
l'ai expliqué plus tôt, non, vous pouvez également jetez un œil à la partie là-haut et c'est votre
débogueur Redux, là vous pouvez voir ce que Redux fait pour vous.
La seule chose que vous devez faire pour que cela fonctionne est d'installer un nouveau
package avec npm install --save dev car c'est une dépendance de développement dont
nous n'avons besoin que pendant le développement et là, installez l'extension Redux dev tools, allez
dans votre application . fichier js par la
suite, puis importez à partir de
cette extension des outils de développement Redux. Vous pouvez importer de la composition avec des outils de développement à partir de
là et c'est une fonction que vous transmettez pour créer un magasin en tant que deuxième argument,
vous pouvez simplement l'exécuter comme ceci. À propos, il s'agit du
code, de cette importation
et de cette utilisation que vous devez supprimer avant de déployer votre application, car il s'agit uniquement de quelque chose
qui doit être exécuté pendant le développement, pas dans votre application de production, vous devez le
supprimer avant de déployer votre application mais pendant le développement, c'est bien. Et avec cela ajouté, si vous enregistrez maintenant cela, vous
verrez en fait qu'ici dans cet inspecteur Redux, vous voyez une action init envoyée, vous ne l'avez pas vu auparavant.
C'est une action qui est automatiquement envoyée au démarrage de votre application.
Si je clique maintenant sur le panier ici, vous verrez également l'action ajouter au panier
et maintenant ici, vous pouvez voir les détails de cette action comme les données qui y étaient attachées
et votre état ici et là vous voyez par exemple ceci l'état de mon produit et où
se trouve mon panier?
Eh bien, cela manque bien sûr, car pendant que nous avons le réducteur dans l'action configurée, dans l'application. fichier js, dans les
réducteurs combinés, nous n'incluons pas l'état du panier.
Alors là, importons le réducteur de chariot. / StoreReducers / cart et maintenant avec celui importé, nous pouvons l'ajouter à notre
objet de réducteurs combinés et maintenant là, nous ajoutons une tranche de panier par exemple, pointez sur le réducteur de panier
et donc maintenant cela est inclus dans notre magasin Redux. Avec cela, si vous attendez maintenant que cela se recharge et que
vous cliquez à nouveau sur le panier, maintenant dans cette action Ajouter au panier, sous l'état, vous verrez que
maintenant il y a une tranche de panier et maintenant vous voyez qu'il y a un montant total, vous
voyez qu'il y a un article avec la clé P1 qui est notre produit avec une quantité
de 1, ce prix, la somme de cela et si je clique maintenant sur le panier une deuxième fois ici, il y a une autre action expédiée et si
nous avons un regardez l'état après cette action, nous voyons maintenant, refroidissez seulement un article mais maintenant
avec la quantité deux, le prix du produit par article est ceci mais
la somme est ceci.
Ceci est
la chemise, si j'expédie maintenant le tapis bleu aussi, nous
devons ajouter au panier une fois de plus et là en l'état, nous voyons maintenant en effet
qu'il y a deux articles là-dedans,
P1 et P2, P1 est inchangé mais P2 a maintenant été ajouté et le montant total me semble également bon.
Cela semble donc fonctionner et c'est ainsi que vous pouvez examiner votre état Redux pendant que votre application est en cours d'exécution sans
le produire ici.
Maintenant, bien sûr, nous voulons également le produire visuellement, mais c'est une belle façon de regarder
votre état dans les coulisses à l'aide du débogueur React Native.
Maintenant, nous allons le fermer ici car cela ralentit un peu l'application et donc ici
dans le menu de débogage, je vais également arrêter mon débogage à distance et fermer complètement l'inspecteur ici.
De retour également dans l'application. fichier js, je vais me débarrasser de la composition avec des
outils de développement ici pour
que je ne l'oublie pas plus tard, mais vous pouvez toujours l'ajouter ici ou le laisser ici pendant que vous développez
afin de pouvoir consulter votre magasin.
Le principal point à retenir pour nous ici est
que cela semble fonctionner et avec cela, bien sûr, nous pouvons maintenant travailler sur l'ajout d'un bouton d'action ici à l'en-tête et nous assurer
que nous pouvons aller à la page du panier à partir de cela ou avec l'aide de cela. bouton d'action afin que sur la
page du panier, nous puissions sortir nos informations de panier.