Pour nous assurer que nous pouvons également avoir des commandes dans cette application, nous répéterons quelque chose que nous avons
fait auparavant, nous travaillerons sur l'écran des commandes et nous travaillerons sur notre logique Redux afin de pouvoir stocker les commandes.
Je vais donc commencer
par ajouter un nouveau réducteur, les commandes. Fichier js qui contient notre réducteur de commandes et bien sûr, nous aurons également besoin d'un fichier
d'actions où nous gérons nos actions liées aux commandes, les commandes. fichier js ainsi.
Commençons donc par les commandes. js reducers fichier ici et encore comme toujours, nous voudrons avoir
un état initial ici qui définit également le type de forme de nos données et les commandes seront très simples dans cette
application, ce ne sera
qu'un tableau de commandes , c'est vraiment tout ce dont nous avons besoin.
Ensuite, nous pouvons exporter ici une fonction par défaut qui est notre réducteur, qui a bien sûr un état
initialisé avec l'état initial, qui reçoit une action et qui bien sûr est entièrement géré par Redux et nous renvoyons notre état
ici
mais bien sûr généralement, nous voulons également ensuite activer le type d'action et gérer quelques cas différents ici, afin
que nous puissions déjà ajouter cette instruction switch. Maintenant, en ce qui concerne les
cas que nous voulons gérer, les actions que nous voulons gérer, il y a une action que
je veux gérer en ce moment et ce sont mes actions d'ajout de commande, donc ajouter la commande ressemble également à un
identifiant approprié, puis j'exporterai mon ajoutez ici le créateur de l'action de commande qui devrait recevoir deux choses maintenant - les articles de
mon panier ou les articles qui font partie de la commande mais ce sont les articles
de mon panier à la fin et bien sûr le montant total et c'est bien sûr toutes les données
que nous avons dans le panier à la fin, nous gérons dans le panier, non?
Nous avons un montant total de panier et nous avons les articles du panier et puisque nous commandons tout
notre panier, il est bien sûr logique que ces données finissent dans la commande.
Maintenant, ici dans le créateur d'action, nous retournons donc notre nouvel objet d'action et cet
objet d'action a un type qui est ajouter une commande, puis par exemple une clé de données de commande où nous fusionnons nos articles de
panier, les stockons dans une propriété d'articles de panier, puis montant détient le montant total par exemple.
Maintenant, c'est à vous de décider si vous transmettez ceci dans une propriété de données de commande fusionnée ou si vous avez
deux propriétés ou plus dans le cadre de votre objet d'action.
C'est l'action, revenons au réducteur, que doit-il se passer lorsque nous recevons une commande?
Eh bien, je veux créer un nouvel objet de commande et pour cela, comme avant, je travaillerai avec mes propres modèles.
Alors, allons dans le dossier des modèles et là, ajoutez une commande. Fichier js où nous avons un ordre de classe que j'exporterai
pour que
je ne l'oublie pas encore et là, nous obtenons un constructeur qui nous permet de créer un nouvel ordre.
Maintenant, à quoi devrait ressembler une commande? Une commande doit bien sûr avoir un ID, qui
n'est
pas l'ID du produit car nous pouvons bien sûr commander le même produit plusieurs fois et par conséquent, une commande est totalement détachée.
De plus, une commande peut contenir plus d'un
produit, au final nous y commandons tout notre panier.
Donc, la commande a un ID
autonome, elle obtiendra les articles, le montant total et une commande a également besoin d'une date bien sûr parce que lorsque nous passons une
commande, nous voulons stocker cette date quand elle a été faite.
Et puis je vais stocker
toutes ces données, obtenir mon ID, obtenir mes articles ici, obtenir le montant total et également obtenir la date. Avec cela, revenons au réducteur, au réducteur de commandes et voyons ce
que nous pouvons faire avec les commandes là-bas. Là, je veux gérer le cas de la commande d'ajout
en ce moment, ce qui est la seule action que j'ai.
Vous devez donc bien sûr importer cet identifiant d'action et là, je veux créer une nouvelle commande, la stocker dans une nouvelle
constante
de commande avec le modèle de commande que nous venons de créer que vous devez donc également importer.
Maintenant, avec le nouveau mot-clé, nous pouvons créer un nouvel objet Javascript basé sur cette classe et là, nous avons besoin de l'ID,
des articles, du montant total et de la date de création.
Maintenant, nous ne recevons ici que les articles et le montant total dans le cadre de notre action.
Maintenant, l'ID est quelque chose que nous générerons plus tard dynamiquement sur un serveur,
pour le moment, je vais utiliser un pseudo-identifiant factice unique avec une nouvelle date à la chaîne, la date est bien sûr
un objet Javascript intégré et cela génère finalement une identification qui est un peu unique.
Techniquement, nous pourrions créer deux commandes au même horodatage, à la même milliseconde, bien que dans notre application où nous
effaçons le panier après avoir appuyé sur Ajouter une commande ou commander maintenant, cela
ne sera pas vraiment possible.
C'est donc un bon identifiant factice pour le moment, ce devrait être une
chaîne donc c'est important et
en plus de cela, les éléments bien sûr, qui peuvent être stockés. Nous obtenons cela sur notre action, à droite,
l'action a cette propriété de données de commande et là, nous aurons les articles.
Donc, les données d'ordre d'action. articles nous donne les articles et pour le montant total, nous pouvons
utiliser l'action.
orderData.
et puis là, nous avons cette propriété de quantité que nous pouvons
extraire, donc là, nous pouvons l'utiliser.
Enfin et surtout pour la date, je veux bien sûr générer un horodatage ici avec
une nouvelle date, ce constructeur Javascript intégré, si nous l'exécutons comme cela nous donne à la
fin l'horodatage actuel stocké dans un objet Javascript.
Maintenant, cette nouvelle commande doit juste être ajoutée à notre tableau de commandes, donc nous retournons un nouvel instantané d'état
ici où nous copions l'ancien état, encore
une fois nous n'avons pas vraiment d'autre état ici, donc la copie est redondante si nous
remplaçons de toute façon, mais
au cas où vous auriez un instantané d'état plus complexe ici pour cette tranche de votre magasin Redux, vous voudriez
vous assurer de copier l'autre état afin de ne pas le perdre.
C'est pourquoi je l'ajoute ici, puis je définis des ordres égaux aux ordres d'état et appelle maintenant concat sur ce tableau qui
est une fonction Javascript intégrée qui ajoute un nouvel élément à un tableau et renvoie un nouveau tableau qui
comprend cet élément.
Ainsi, l'ancien tableau reste intact, le nouveau tableau est renvoyé et cela nous permet bien sûr de le mettre à jour de
manière immuable où nous ne touchons jamais les données d'origine mais nous définissons le nouvel état en créant un tout nouveau tableau
qui inclut le nouvel objet et là, je concatène simplement ma nouvelle commande. Avec cela, nous
pouvons aller à l'application. fichier js et importez le réducteur de commandes à partir du dossier du
magasin, le dossier des réducteurs et là, les commandes. fichier js bien sûr et fusionner cela dans notre
réducteur racine, peut-être avec un identifiant de commandes, puis en pointant sur le réducteur de commandes.
Maintenant, cela devrait être disponible et maintenant nous pouvons envoyer des actions, à savoir ici notre action ajouter une commande et
bien sûr puiser dans cette tranche d'états et obtenir nos commandes. L'envoi d'actions est la première chose que je veux faire,
je veux le faire depuis l'intérieur de l'écran du panier lorsque nous appuyons sur ce bouton de commande maintenant.
En ce moment, nous ne faisons rien
là-bas, maintenant l'objectif est de passer une commande et également de vider notre panier. Donc, ici dans l'écran du panier, nous importons
déjà la répartition de l'utilisation et nous l'exécutons de sorte que nous ayons la fonction de répartition.
Tout ce que nous devons donc faire, c'est que nous devons tout importer en tant qu'actions de commande à partir des commandes d'actions de magasin et je
vais donc nommer ces actions de commandes pour être super
précis et maintenant ici, lorsque nous cliquons sur ce bouton, ce bouton de commande maintenant, nous
pouvons exécuter un et dans cette fonction, nous envoyons une action Redux, l'action commandes, ajoutons une commande avec
ce créateur d'action. Maintenant, nous devons passer deux choses - les articles du panier et le montant total. Bien sûr, les deux
sont disponibles ici, le montant total est stocké dans la constante du montant total du panier, les articles du
panier sont ici, donc nous transmettons simplement cela, nous transmettons le montant total du panier et cela devrait être le deuxième
argument, donc comme premier argument, en fait les articles du chariot, comme celui-ci. Maintenant, veuillez noter qu'avec cela, bien sûr, je transfère les articles du panier, je
stocke les articles du panier qui sont dans le tableau et non au format que je l'ai dans
mon panier Redux store. Là, j'ai un
objet mais le stockage d'un tel tableau d'articles de panier dans une commande devrait en fait être bien,
donc
pas besoin de récupérer cet objet inchangé également,
je m'en
tiendrai à ce tableau que je stocke maintenant.
Alors maintenant, nous expédions cela, pour le voir,
nous devons maintenant ajouter un écran de commandes bien sûr
et pour cela, je veux également ajouter un bouton de menu et un tiroir qui nous permet d'y arriver comme alternative à
nos écrans de boutique ici.