1 00:00:02,260 --> 00:00:08,030 Pour nous assurer que nous pouvons également avoir des commandes dans cette application, nous répéterons quelque chose que nous avons 2 00:00:08,050 --> 00:00:13,940 fait auparavant, nous travaillerons sur l'écran des commandes et nous travaillerons sur notre logique Redux afin de pouvoir stocker les commandes. 3 00:00:14,020 --> 00:00:15,980 Je vais donc commencer 4 00:00:16,060 --> 00:00:22,060 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 5 00:00:22,060 --> 00:00:26,280 d'actions où nous gérons nos actions liées aux commandes, les commandes. fichier js ainsi. 6 00:00:27,010 --> 00:00:33,910 Commençons donc par les commandes. js reducers fichier ici et encore comme toujours, nous voudrons avoir 7 00:00:33,910 --> 00:00:41,020 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 8 00:00:41,020 --> 00:00:42,640 application, ce ne sera 9 00:00:42,640 --> 00:00:46,660 qu'un tableau de commandes , c'est vraiment tout ce dont nous avons besoin. 10 00:00:47,390 --> 00:00:53,630 Ensuite, nous pouvons exporter ici une fonction par défaut qui est notre réducteur, qui a bien sûr un état 11 00:00:53,630 --> 00:01:00,830 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 12 00:01:00,830 --> 00:01:01,520 ici 13 00:01:01,520 --> 00:01:07,580 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 14 00:01:08,300 --> 00:01:13,350 que nous puissions déjà ajouter cette instruction switch. Maintenant, en ce qui concerne les 15 00:01:13,380 --> 00:01:19,130 cas que nous voulons gérer, les actions que nous voulons gérer, il y a une action que 16 00:01:19,130 --> 00:01:26,500 je veux gérer en ce moment et ce sont mes actions d'ajout de commande, donc ajouter la commande ressemble également à un 17 00:01:26,510 --> 00:01:34,390 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 18 00:01:34,910 --> 00:01:40,450 mon panier ou les articles qui font partie de la commande mais ce sont les articles 19 00:01:40,550 --> 00:01:47,180 de mon panier à la fin et bien sûr le montant total et c'est bien sûr toutes les données 20 00:01:47,180 --> 00:01:52,550 que nous avons dans le panier à la fin, nous gérons dans le panier, non? 21 00:01:52,550 --> 00:01:58,760 Nous avons un montant total de panier et nous avons les articles du panier et puisque nous commandons tout 22 00:01:58,760 --> 00:02:03,380 notre panier, il est bien sûr logique que ces données finissent dans la commande. 23 00:02:03,520 --> 00:02:08,900 Maintenant, ici dans le créateur d'action, nous retournons donc notre nouvel objet d'action et cet 24 00:02:08,900 --> 00:02:17,240 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 25 00:02:17,240 --> 00:02:23,270 panier, les stockons dans une propriété d'articles de panier, puis montant détient le montant total par exemple. 26 00:02:23,270 --> 00:02:29,660 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 27 00:02:30,140 --> 00:02:33,690 deux propriétés ou plus dans le cadre de votre objet d'action. 28 00:02:33,720 --> 00:02:37,710 C'est l'action, revenons au réducteur, que doit-il se passer lorsque nous recevons une commande? 29 00:02:38,580 --> 00:02:45,040 Eh bien, je veux créer un nouvel objet de commande et pour cela, comme avant, je travaillerai avec mes propres modèles. 30 00:02:45,090 --> 00:02:52,110 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 31 00:02:52,110 --> 00:02:52,800 pour que 32 00:02:52,830 --> 00:02:58,890 je ne l'oublie pas encore et là, nous obtenons un constructeur qui nous permet de créer un nouvel ordre. 33 00:02:58,890 --> 00:03:04,320 Maintenant, à quoi devrait ressembler une commande? Une commande doit bien sûr avoir un ID, qui 34 00:03:04,320 --> 00:03:04,700 n'est 35 00:03:04,770 --> 00:03:10,970 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. 36 00:03:11,040 --> 00:03:13,650 De plus, une commande peut contenir plus d'un 37 00:03:13,650 --> 00:03:16,380 produit, au final nous y commandons tout notre panier. 38 00:03:16,380 --> 00:03:18,570 Donc, la commande a un ID 39 00:03:18,750 --> 00:03:26,160 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 40 00:03:26,160 --> 00:03:29,430 commande, nous voulons stocker cette date quand elle a été faite. 41 00:03:29,940 --> 00:03:31,500 Et puis je vais stocker 42 00:03:31,500 --> 00:03:42,160 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 43 00:03:42,170 --> 00:03:49,310 que nous pouvons faire avec les commandes là-bas. Là, je veux gérer le cas de la commande d'ajout 44 00:03:49,340 --> 00:03:53,260 en ce moment, ce qui est la seule action que j'ai. 45 00:03:53,270 --> 00:04:01,140 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 46 00:04:01,160 --> 00:04:01,820 constante 47 00:04:01,820 --> 00:04:07,960 de commande avec le modèle de commande que nous venons de créer que vous devez donc également importer. 48 00:04:08,030 --> 00:04:14,030 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, 49 00:04:14,180 --> 00:04:17,330 des articles, du montant total et de la date de création. 50 00:04:17,330 --> 00:04:23,040 Maintenant, nous ne recevons ici que les articles et le montant total dans le cadre de notre action. 51 00:04:23,240 --> 00:04:28,630 Maintenant, l'ID est quelque chose que nous générerons plus tard dynamiquement sur un serveur, 52 00:04:28,640 --> 00:04:36,530 pour le moment, je vais utiliser un pseudo-identifiant factice unique avec une nouvelle date à la chaîne, la date est bien sûr 53 00:04:36,560 --> 00:04:42,140 un objet Javascript intégré et cela génère finalement une identification qui est un peu unique. 54 00:04:42,140 --> 00:04:48,230 Techniquement, nous pourrions créer deux commandes au même horodatage, à la même milliseconde, bien que dans notre application où nous 55 00:04:48,230 --> 00:04:52,340 effaçons le panier après avoir appuyé sur Ajouter une commande ou commander maintenant, cela 56 00:04:52,340 --> 00:04:54,230 ne sera pas vraiment possible. 57 00:04:54,230 --> 00:04:57,470 C'est donc un bon identifiant factice pour le moment, ce devrait être une 58 00:04:57,470 --> 00:04:59,050 chaîne donc c'est important et 59 00:05:00,110 --> 00:05:06,170 en plus de cela, les éléments bien sûr, qui peuvent être stockés. Nous obtenons cela sur notre action, à droite, 60 00:05:06,170 --> 00:05:10,770 l'action a cette propriété de données de commande et là, nous aurons les articles. 61 00:05:11,060 --> 00:05:16,580 Donc, les données d'ordre d'action. articles nous donne les articles et pour le montant total, nous pouvons 62 00:05:16,580 --> 00:05:17,280 utiliser l'action. 63 00:05:17,330 --> 00:05:20,250 orderData. 64 00:05:20,450 --> 00:05:23,810 et puis là, nous avons cette propriété de quantité que nous pouvons 65 00:05:23,810 --> 00:05:25,650 extraire, donc là, nous pouvons l'utiliser. 66 00:05:25,850 --> 00:05:31,700 Enfin et surtout pour la date, je veux bien sûr générer un horodatage ici avec 67 00:05:31,700 --> 00:05:37,730 une nouvelle date, ce constructeur Javascript intégré, si nous l'exécutons comme cela nous donne à la 68 00:05:37,940 --> 00:05:41,060 fin l'horodatage actuel stocké dans un objet Javascript. 69 00:05:41,060 --> 00:05:46,700 Maintenant, cette nouvelle commande doit juste être ajoutée à notre tableau de commandes, donc nous retournons un nouvel instantané d'état 70 00:05:47,000 --> 00:05:48,960 ici où nous copions l'ancien état, encore 71 00:05:49,010 --> 00:05:53,650 une fois nous n'avons pas vraiment d'autre état ici, donc la copie est redondante si nous 72 00:05:53,750 --> 00:05:55,410 remplaçons de toute façon, mais 73 00:05:55,460 --> 00:06:01,160 au cas où vous auriez un instantané d'état plus complexe ici pour cette tranche de votre magasin Redux, vous voudriez 74 00:06:01,160 --> 00:06:04,550 vous assurer de copier l'autre état afin de ne pas le perdre. 75 00:06:04,550 --> 00:06:11,510 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 76 00:06:11,510 --> 00:06:17,450 est une fonction Javascript intégrée qui ajoute un nouvel élément à un tableau et renvoie un nouveau tableau qui 77 00:06:17,450 --> 00:06:18,530 comprend cet élément. 78 00:06:18,560 --> 00:06:24,040 Ainsi, l'ancien tableau reste intact, le nouveau tableau est renvoyé et cela nous permet bien sûr de le mettre à jour de 79 00:06:24,040 --> 00:06:29,450 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 80 00:06:29,450 --> 00:06:36,590 qui inclut le nouvel objet et là, je concatène simplement ma nouvelle commande. Avec cela, nous 81 00:06:36,770 --> 00:06:45,590 pouvons aller à l'application. fichier js et importez le réducteur de commandes à partir du dossier du 82 00:06:45,590 --> 00:06:52,040 magasin, le dossier des réducteurs et là, les commandes. fichier js bien sûr et fusionner cela dans notre 83 00:06:52,100 --> 00:06:57,750 réducteur racine, peut-être avec un identifiant de commandes, puis en pointant sur le réducteur de commandes. 84 00:06:57,780 --> 00:07:04,160 Maintenant, cela devrait être disponible et maintenant nous pouvons envoyer des actions, à savoir ici notre action ajouter une commande et 85 00:07:04,230 --> 00:07:11,740 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, 86 00:07:11,740 --> 00:07:18,220 je veux le faire depuis l'intérieur de l'écran du panier lorsque nous appuyons sur ce bouton de commande maintenant. 87 00:07:18,220 --> 00:07:19,990 En ce moment, nous ne faisons rien 88 00:07:20,020 --> 00:07:26,790 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 89 00:07:26,800 --> 00:07:33,270 déjà la répartition de l'utilisation et nous l'exécutons de sorte que nous ayons la fonction de répartition. 90 00:07:33,340 --> 00:07:45,490 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 91 00:07:45,520 --> 00:07:50,140 vais donc nommer ces actions de commandes pour être super 92 00:07:50,290 --> 00:07:57,450 précis et maintenant ici, lorsque nous cliquons sur ce bouton, ce bouton de commande maintenant, nous 93 00:07:57,450 --> 00:08:05,500 pouvons exécuter un et dans cette fonction, nous envoyons une action Redux, l'action commandes, ajoutons une commande avec 94 00:08:05,580 --> 00:08:10,500 ce créateur d'action. Maintenant, nous devons passer deux choses - les articles du panier et le montant total. Bien sûr, les deux 95 00:08:10,500 --> 00:08:16,680 sont disponibles ici, le montant total est stocké dans la constante du montant total du panier, les articles du 96 00:08:16,680 --> 00:08:23,580 panier sont ici, donc nous transmettons simplement cela, nous transmettons le montant total du panier et cela devrait être le deuxième 97 00:08:23,580 --> 00:08:32,420 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 98 00:08:32,430 --> 00:08:37,620 stocke les articles du panier qui sont dans le tableau et non au format que je l'ai dans 99 00:08:37,620 --> 00:08:40,310 mon panier Redux store. Là, j'ai un 100 00:08:40,380 --> 00:08:48,130 objet mais le stockage d'un tel tableau d'articles de panier dans une commande devrait en fait être bien, 101 00:08:48,130 --> 00:08:48,900 donc 102 00:08:48,970 --> 00:08:52,500 pas besoin de récupérer cet objet inchangé également, 103 00:08:52,510 --> 00:08:53,340 je m'en 104 00:08:53,340 --> 00:08:56,690 tiendrai à ce tableau que je stocke maintenant. 105 00:08:56,720 --> 00:08:58,460 Alors maintenant, nous expédions cela, pour le voir, 106 00:08:58,460 --> 00:09:00,860 nous devons maintenant ajouter un écran de commandes bien sûr 107 00:09:00,980 --> 00:09:06,140 et pour cela, je veux également ajouter un bouton de menu et un tiroir qui nous permet d'y arriver comme alternative à 108 00:09:06,140 --> 00:09:07,520 nos écrans de boutique ici.