1 00:00:02,260 --> 00:00:08,030 Para asegurarnos de que también podemos tener pedidos en esta aplicación, repetiremos algo que hicimos antes, 2 00:00:08,050 --> 00:00:13,940 trabajaremos en la pantalla de pedidos y trabajaremos en nuestra lógica de Redux para poder almacenar pedidos. 3 00:00:14,020 --> 00:00:15,980 Así que comenzaré 4 00:00:16,060 --> 00:00:22,060 agregando un nuevo reductor, los pedidos. archivo js que contiene nuestro reductor de pedidos y, por supuesto, también necesitaremos un archivo de 5 00:00:22,060 --> 00:00:26,280 acciones donde gestionemos nuestras acciones relacionadas con los pedidos, los pedidos. archivo js también. 6 00:00:27,010 --> 00:00:33,910 Entonces, comencemos con las órdenes. El archivo js reductores aquí y nuevamente, como siempre, querremos 7 00:00:33,910 --> 00:00:41,020 tener un estado inicial aquí que también defina cómo se forman nuestros datos allí y los pedidos serán realmente simples en 8 00:00:41,020 --> 00:00:42,640 esta aplicación, será solo 9 00:00:42,640 --> 00:00:46,660 una serie de pedidos , eso es realmente todo lo que necesitamos. 10 00:00:47,390 --> 00:00:53,630 Entonces podemos exportar una función predeterminada aquí, que es nuestro reductor, que por supuesto tiene un estado que se inicializa 11 00:00:53,630 --> 00:01:00,830 con el estado inicial, que recibe una acción y que, por supuesto, todo es manejado por Redux y devolvemos nuestro estado aquí, pero 12 00:01:00,830 --> 00:01:01,520 por 13 00:01:01,520 --> 00:01:07,580 supuesto típicamente, también queremos activar el tipo de acción y manejar un par de casos diferentes aquí, por lo 14 00:01:08,300 --> 00:01:13,350 que ya podemos agregar esta declaración de cambio. Ahora, con respecto a los casos 15 00:01:13,380 --> 00:01:19,130 que queremos manejar, las acciones que queremos manejar, hay una acción que quiero manejar en 16 00:01:19,130 --> 00:01:26,500 este momento y esas son mis acciones de agregar orden, así que agregar orden también parece un identificador apropiado y 17 00:01:26,510 --> 00:01:34,390 luego exportaré mi agregue el creador de acciones de pedido aquí, que debería recibir dos cosas ahora: los artículos de mi 18 00:01:34,910 --> 00:01:40,450 carrito o los artículos que forman parte del pedido, pero estos son los artículos de 19 00:01:40,550 --> 00:01:47,180 mi carrito al final y, por supuesto, la cantidad total y, por supuesto, todos los datos que 20 00:01:47,180 --> 00:01:52,550 tenemos en el carrito Al final, nos las arreglamos en el carrito, ¿verdad? 21 00:01:52,550 --> 00:01:58,760 Tenemos una cantidad total del carrito y tenemos los artículos del carrito y, dado que pedimos todo nuestro 22 00:01:58,760 --> 00:02:03,380 carrito, por supuesto, tiene sentido que estos datos terminen en el pedido. 23 00:02:03,520 --> 00:02:08,900 Ahora aquí en el creador de acciones, por lo tanto, devolvemos nuestro nuevo objeto de acción 24 00:02:08,900 --> 00:02:17,240 y este objeto de acción tiene un tipo que es agregar pedido y luego, por ejemplo, una clave de datos de pedido donde fusionamos nuestros artículos de 25 00:02:17,240 --> 00:02:23,270 carrito, los almacenamos en una propiedad de artículos de carrito y luego sumamos tiene la cantidad total, por ejemplo. 26 00:02:23,270 --> 00:02:29,660 Ahora depende de usted si pasa esto en una propiedad de datos de orden combinada o si tiene dos 27 00:02:30,140 --> 00:02:33,690 o más propiedades como parte de su objeto de acción. 28 00:02:33,720 --> 00:02:37,710 Esta es la acción, volviendo al reductor, ¿qué debería pasar cuando recibimos un pedido? 29 00:02:38,580 --> 00:02:45,040 Bueno, quiero crear un nuevo objeto de pedido y para esto, al igual que antes, trabajaré con mis propios modelos. 30 00:02:45,090 --> 00:02:52,110 Así que vamos a la carpeta de modelos y allí, agreguemos un pedido. archivo js donde tenemos un orden de clase que exportaré 31 00:02:52,110 --> 00:02:52,800 para 32 00:02:52,830 --> 00:02:58,890 no volver a olvidar esto y allí, obtenemos un constructor que nos permite crear un nuevo orden. 33 00:02:58,890 --> 00:03:04,320 Ahora, ¿cómo debería ser un pedido? Un pedido debe tener una identificación, por supuesto, que no 34 00:03:04,320 --> 00:03:04,700 es 35 00:03:04,770 --> 00:03:10,970 la identificación del producto porque, por supuesto, podemos pedir el mismo producto varias veces y, por lo tanto, un pedido está totalmente separado. 36 00:03:11,040 --> 00:03:13,650 Además, un pedido puede contener más de 37 00:03:13,650 --> 00:03:16,380 un producto, al final ordenamos todo nuestro carrito allí. 38 00:03:16,380 --> 00:03:18,570 Por lo tanto, el pedido tiene 39 00:03:18,750 --> 00:03:26,160 una identificación independiente, obtendrá los artículos, la cantidad total y un pedido también necesita una fecha, por supuesto, porque cuando hacemos 40 00:03:26,160 --> 00:03:29,430 un pedido, queremos almacenar esa fecha cuando se hizo. 41 00:03:29,940 --> 00:03:31,500 Y luego almacenaré todos 42 00:03:31,500 --> 00:03:42,160 esos datos, obtendré mi identificación, obtendré mis artículos aquí, obtendré la cantidad total y también la fecha. Con eso volvamos al reductor, al reductor de pedidos y veamos 43 00:03:42,170 --> 00:03:49,310 qué podemos hacer con los pedidos allí. Ahí, quiero manejar el caso de agregar orden 44 00:03:49,340 --> 00:03:53,260 en este momento, que es la única acción que tengo. 45 00:03:53,270 --> 00:04:01,140 Por lo tanto, debe importar este identificador de acción, por supuesto, y allí, quiero crear un nuevo pedido, almacenarlo en una nueva 46 00:04:01,160 --> 00:04:01,820 constante 47 00:04:01,820 --> 00:04:07,960 de pedido con el modelo de pedido que acabamos de crear que, por lo tanto, también debe importar. 48 00:04:08,030 --> 00:04:14,030 Ahora con la nueva palabra clave, podemos crear un nuevo objeto Javascript basado en esa clase y allí, necesitamos la ID, 49 00:04:14,180 --> 00:04:17,330 los artículos, la cantidad total y la fecha de creación. 50 00:04:17,330 --> 00:04:23,040 Ahora solo podemos obtener los artículos y la cantidad total como parte de nuestra acción aquí, como puede ver. 51 00:04:23,240 --> 00:04:28,630 Ahora, la identificación es algo que luego generaremos dinámicamente en un servidor, por 52 00:04:28,640 --> 00:04:36,530 el momento, usaré una identificación pseudo única ficticia con una nueva fecha para la cadena, la fecha, por supuesto, es 53 00:04:36,560 --> 00:04:42,140 un objeto Javascript incorporado y esto al final genera Una identificación que es única. 54 00:04:42,140 --> 00:04:48,230 Técnicamente, podríamos crear dos pedidos exactamente en la misma marca de tiempo, exactamente en el mismo milisegundo, aunque en nuestra 55 00:04:48,230 --> 00:04:52,340 aplicación donde limpiamos el carrito después de presionar agregar pedido o pedido ahora, 56 00:04:52,340 --> 00:04:54,230 esto realmente no será posible. 57 00:04:54,230 --> 00:04:57,470 Por lo tanto, esta es una buena identificación ficticia por el momento, debe ser 58 00:04:57,470 --> 00:04:59,050 una cadena, por lo que es 59 00:05:00,110 --> 00:05:06,170 importante y además de eso, los elementos, por supuesto, que se pueden almacenar. Obtenemos esto en nuestra acción, correcto, la 60 00:05:06,170 --> 00:05:10,770 acción tiene esta propiedad de datos de pedido y allí tendremos los artículos. 61 00:05:11,060 --> 00:05:16,580 Entonces los datos de orden de acción. artículos nos da los artículos y por la cantidad total, podemos usar 62 00:05:16,580 --> 00:05:17,280 la acción. 63 00:05:17,330 --> 00:05:20,250 datos de los pedidos. 64 00:05:20,450 --> 00:05:23,810 y luego, tenemos esta propiedad de cantidad que podemos extraer, 65 00:05:23,810 --> 00:05:25,650 para que podamos usarla. 66 00:05:25,850 --> 00:05:31,700 Por último, pero no menos importante para la fecha, por supuesto, quiero generar una marca de tiempo aquí con 67 00:05:31,700 --> 00:05:37,730 una nueva fecha, este constructor de Javascript incorporado, si lo ejecutamos de esta manera nos da la marca de tiempo 68 00:05:37,940 --> 00:05:41,060 actual almacenada en un objeto de Javascript al final. 69 00:05:41,060 --> 00:05:46,700 Ahora, este nuevo pedido solo necesita agregarse a nuestra matriz de pedidos, por lo que devolvemos una nueva instantánea 70 00:05:47,000 --> 00:05:48,960 del estado aquí donde copiamos el 71 00:05:49,010 --> 00:05:53,650 estado anterior, nuevamente no tenemos ningún otro estado aquí, por lo que copiarlo es redundante si 72 00:05:53,750 --> 00:05:55,410 reemplazamos de todos modos, pero 73 00:05:55,460 --> 00:06:01,160 en caso de que haya una foto de estado más compleja aquí para esta porción de su tienda Redux, querrá 74 00:06:01,160 --> 00:06:04,550 asegurarse de copiar el otro estado para que no lo pierda. 75 00:06:04,550 --> 00:06:11,510 Es por eso que lo agrego aquí y luego establezco órdenes iguales a las órdenes estatales y ahora llamo a concat en esta matriz, 76 00:06:11,510 --> 00:06:17,450 que es una función de Javascript incorporada que agrega un nuevo elemento a una matriz y devuelve una nueva matriz que 77 00:06:17,450 --> 00:06:18,530 incluye ese elemento. 78 00:06:18,560 --> 00:06:24,040 Por lo tanto, la matriz anterior permanece intacta, se devuelve la nueva matriz y eso, por supuesto, nos permite actualizar 79 00:06:24,040 --> 00:06:29,450 esto de una manera inmutable donde nunca tocamos los datos originales, pero establecemos el nuevo estado creando una nueva matriz 80 00:06:29,450 --> 00:06:36,590 que incluye el nuevo objeto y allí simplemente concateno mi nuevo orden. Con eso, podemos 81 00:06:36,770 --> 00:06:45,590 ir a la aplicación. js e importe el reductor de pedidos desde la carpeta de la tienda, 82 00:06:45,590 --> 00:06:52,040 la carpeta de reductores y allí, los pedidos. js, por supuesto, y fusionarlo en nuestro reductor 83 00:06:52,100 --> 00:06:57,750 raíz, tal vez con un identificador de pedidos y luego apuntando al reductor de pedidos. 84 00:06:57,780 --> 00:07:04,160 Ahora esto debería estar disponible y ahora podemos enviar acciones, es decir, aquí nuestra acción de agregar orden y, 85 00:07:04,230 --> 00:07:11,740 por supuesto, aprovechar esa porción de estados y obtener nuestras órdenes. Enviar acciones es lo primero que quiero hacer, quiero 86 00:07:11,740 --> 00:07:18,220 hacerlo desde el interior de la pantalla del carrito cuando presionamos este botón de ordenar ahora. 87 00:07:18,220 --> 00:07:19,990 En este momento no estamos haciendo 88 00:07:20,020 --> 00:07:26,790 nada allí, ahora el objetivo es hacer un pedido y también limpiar nuestro carrito. Entonces, aquí en la pantalla del carrito, 89 00:07:26,800 --> 00:07:33,270 ya importamos despacho de uso y lo estamos ejecutando para que tengamos la función de despacho. 90 00:07:33,340 --> 00:07:45,490 Por lo tanto, todo lo que tenemos que hacer es importar todo como acciones de orden de las órdenes de acciones de la tienda y, por lo 91 00:07:45,520 --> 00:07:50,140 tanto, nombraré estas acciones de órdenes para que sean súper 92 00:07:50,290 --> 00:07:57,450 precisas y ahora, cuando haga clic en este botón, este botón de orden ahora, podemos 93 00:07:57,450 --> 00:08:05,500 ejecutar un En esta función, despachamos una acción de Redux, la acción de órdenes, agregamos orden con este 94 00:08:05,580 --> 00:08:10,500 creador de acciones. Ahora tenemos que pasar dos cosas: los artículos del carrito y la cantidad total. Por supuesto, ambos están 95 00:08:10,500 --> 00:08:16,680 disponibles aquí, la cantidad total se almacena en la cantidad total constante del carrito, los artículos del carrito 96 00:08:16,680 --> 00:08:23,580 son esto aquí, así que solo reenviamos esto, reenviamos la cantidad total del carrito y ese debería ser el segundo argumento, 97 00:08:23,580 --> 00:08:32,420 así que como primer argumento, en realidad los artículos del carrito, como este. Ahora tenga en cuenta que con eso, por supuesto, estoy reenviando artículos del carrito, estoy almacenando 98 00:08:32,430 --> 00:08:37,620 los artículos del carrito que están en la matriz y no en el formato que tengo en mi carrito 99 00:08:37,620 --> 00:08:40,310 de la tienda Redux. Allí, tengo un 100 00:08:40,380 --> 00:08:48,130 objeto, pero almacenar una matriz de artículos de carro en un pedido debería estar bien, por lo 101 00:08:48,130 --> 00:08:48,900 que 102 00:08:48,970 --> 00:08:52,500 no es necesario obtener ese objeto sin cambios 103 00:08:52,510 --> 00:08:53,340 también, me 104 00:08:53,340 --> 00:08:56,690 quedaré con esa matriz que ahora almaceno. 105 00:08:56,720 --> 00:08:58,460 Así que ahora enviamos esto, para verlo, 106 00:08:58,460 --> 00:09:00,860 ahora necesitamos agregar una pantalla de pedidos, por supuesto, y 107 00:09:00,980 --> 00:09:06,140 para eso, también quiero agregar un botón de menú y un cajón que nos permita llegar allí como una alternativa a las 108 00:09:06,140 --> 00:09:07,520 pantallas de nuestra tienda aquí.