Para asegurarnos de que también podemos tener pedidos en esta aplicación, repetiremos algo que hicimos antes,
trabajaremos en la pantalla de pedidos y trabajaremos en nuestra lógica de Redux para poder almacenar pedidos.
Así que comenzaré
agregando un nuevo reductor, los pedidos. archivo js que contiene nuestro reductor de pedidos y, por supuesto, también necesitaremos un archivo de
acciones donde gestionemos nuestras acciones relacionadas con los pedidos, los pedidos. archivo js también.
Entonces, comencemos con las órdenes. El archivo js reductores aquí y nuevamente, como siempre, querremos
tener un estado inicial aquí que también defina cómo se forman nuestros datos allí y los pedidos serán realmente simples en
esta aplicación, será solo
una serie de pedidos , eso es realmente todo lo que necesitamos.
Entonces podemos exportar una función predeterminada aquí, que es nuestro reductor, que por supuesto tiene un estado que se inicializa
con el estado inicial, que recibe una acción y que, por supuesto, todo es manejado por Redux y devolvemos nuestro estado aquí, pero
por
supuesto típicamente, también queremos activar el tipo de acción y manejar un par de casos diferentes aquí, por lo
que ya podemos agregar esta declaración de cambio. Ahora, con respecto a los casos
que queremos manejar, las acciones que queremos manejar, hay una acción que quiero manejar en
este momento y esas son mis acciones de agregar orden, así que agregar orden también parece un identificador apropiado y
luego exportaré mi agregue el creador de acciones de pedido aquí, que debería recibir dos cosas ahora: los artículos de mi
carrito o los artículos que forman parte del pedido, pero estos son los artículos de
mi carrito al final y, por supuesto, la cantidad total y, por supuesto, todos los datos que
tenemos en el carrito Al final, nos las arreglamos en el carrito, ¿verdad?
Tenemos una cantidad total del carrito y tenemos los artículos del carrito y, dado que pedimos todo nuestro
carrito, por supuesto, tiene sentido que estos datos terminen en el pedido.
Ahora aquí en el creador de acciones, por lo tanto, devolvemos nuestro nuevo objeto de acción
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
carrito, los almacenamos en una propiedad de artículos de carrito y luego sumamos tiene la cantidad total, por ejemplo.
Ahora depende de usted si pasa esto en una propiedad de datos de orden combinada o si tiene dos
o más propiedades como parte de su objeto de acción.
Esta es la acción, volviendo al reductor, ¿qué debería pasar cuando recibimos un pedido?
Bueno, quiero crear un nuevo objeto de pedido y para esto, al igual que antes, trabajaré con mis propios modelos.
Así que vamos a la carpeta de modelos y allí, agreguemos un pedido. archivo js donde tenemos un orden de clase que exportaré
para
no volver a olvidar esto y allí, obtenemos un constructor que nos permite crear un nuevo orden.
Ahora, ¿cómo debería ser un pedido? Un pedido debe tener una identificación, por supuesto, que no
es
la identificación del producto porque, por supuesto, podemos pedir el mismo producto varias veces y, por lo tanto, un pedido está totalmente separado.
Además, un pedido puede contener más de
un producto, al final ordenamos todo nuestro carrito allí.
Por lo tanto, el pedido tiene
una identificación independiente, obtendrá los artículos, la cantidad total y un pedido también necesita una fecha, por supuesto, porque cuando hacemos
un pedido, queremos almacenar esa fecha cuando se hizo.
Y luego almacenaré todos
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
qué podemos hacer con los pedidos allí. Ahí, quiero manejar el caso de agregar orden
en este momento, que es la única acción que tengo.
Por lo tanto, debe importar este identificador de acción, por supuesto, y allí, quiero crear un nuevo pedido, almacenarlo en una nueva
constante
de pedido con el modelo de pedido que acabamos de crear que, por lo tanto, también debe importar.
Ahora con la nueva palabra clave, podemos crear un nuevo objeto Javascript basado en esa clase y allí, necesitamos la ID,
los artículos, la cantidad total y la fecha de creación.
Ahora solo podemos obtener los artículos y la cantidad total como parte de nuestra acción aquí, como puede ver.
Ahora, la identificación es algo que luego generaremos dinámicamente en un servidor, por
el momento, usaré una identificación pseudo única ficticia con una nueva fecha para la cadena, la fecha, por supuesto, es
un objeto Javascript incorporado y esto al final genera Una identificación que es única.
Técnicamente, podríamos crear dos pedidos exactamente en la misma marca de tiempo, exactamente en el mismo milisegundo, aunque en nuestra
aplicación donde limpiamos el carrito después de presionar agregar pedido o pedido ahora,
esto realmente no será posible.
Por lo tanto, esta es una buena identificación ficticia por el momento, debe ser
una cadena, por lo que es
importante y además de eso, los elementos, por supuesto, que se pueden almacenar. Obtenemos esto en nuestra acción, correcto, la
acción tiene esta propiedad de datos de pedido y allí tendremos los artículos.
Entonces los datos de orden de acción. artículos nos da los artículos y por la cantidad total, podemos usar
la acción.
datos de los pedidos.
y luego, tenemos esta propiedad de cantidad que podemos extraer,
para que podamos usarla.
Por último, pero no menos importante para la fecha, por supuesto, quiero generar una marca de tiempo aquí con
una nueva fecha, este constructor de Javascript incorporado, si lo ejecutamos de esta manera nos da la marca de tiempo
actual almacenada en un objeto de Javascript al final.
Ahora, este nuevo pedido solo necesita agregarse a nuestra matriz de pedidos, por lo que devolvemos una nueva instantánea
del estado aquí donde copiamos el
estado anterior, nuevamente no tenemos ningún otro estado aquí, por lo que copiarlo es redundante si
reemplazamos de todos modos, pero
en caso de que haya una foto de estado más compleja aquí para esta porción de su tienda Redux, querrá
asegurarse de copiar el otro estado para que no lo pierda.
Es por eso que lo agrego aquí y luego establezco órdenes iguales a las órdenes estatales y ahora llamo a concat en esta matriz,
que es una función de Javascript incorporada que agrega un nuevo elemento a una matriz y devuelve una nueva matriz que
incluye ese elemento.
Por lo tanto, la matriz anterior permanece intacta, se devuelve la nueva matriz y eso, por supuesto, nos permite actualizar
esto de una manera inmutable donde nunca tocamos los datos originales, pero establecemos el nuevo estado creando una nueva matriz
que incluye el nuevo objeto y allí simplemente concateno mi nuevo orden. Con eso, podemos
ir a la aplicación. js e importe el reductor de pedidos desde la carpeta de la tienda,
la carpeta de reductores y allí, los pedidos. js, por supuesto, y fusionarlo en nuestro reductor
raíz, tal vez con un identificador de pedidos y luego apuntando al reductor de pedidos.
Ahora esto debería estar disponible y ahora podemos enviar acciones, es decir, aquí nuestra acción de agregar orden y,
por supuesto, aprovechar esa porción de estados y obtener nuestras órdenes. Enviar acciones es lo primero que quiero hacer, quiero
hacerlo desde el interior de la pantalla del carrito cuando presionamos este botón de ordenar ahora.
En este momento no estamos haciendo
nada allí, ahora el objetivo es hacer un pedido y también limpiar nuestro carrito. Entonces, aquí en la pantalla del carrito,
ya importamos despacho de uso y lo estamos ejecutando para que tengamos la función de despacho.
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
tanto, nombraré estas acciones de órdenes para que sean súper
precisas y ahora, cuando haga clic en este botón, este botón de orden ahora, podemos
ejecutar un En esta función, despachamos una acción de Redux, la acción de órdenes, agregamos orden con este
creador de acciones. Ahora tenemos que pasar dos cosas: los artículos del carrito y la cantidad total. Por supuesto, ambos están
disponibles aquí, la cantidad total se almacena en la cantidad total constante del carrito, los artículos del carrito
son esto aquí, así que solo reenviamos esto, reenviamos la cantidad total del carrito y ese debería ser el segundo argumento,
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
los artículos del carrito que están en la matriz y no en el formato que tengo en mi carrito
de la tienda Redux. Allí, tengo un
objeto, pero almacenar una matriz de artículos de carro en un pedido debería estar bien, por lo
que
no es necesario obtener ese objeto sin cambios
también, me
quedaré con esa matriz que ahora almaceno.
Así que ahora enviamos esto, para verlo,
ahora necesitamos agregar una pantalla de pedidos, por supuesto, y
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
pantallas de nuestra tienda aquí.