Para la función de agregar al carrito, necesitaremos trabajar en dos cosas: una es,
por supuesto, que podemos tener una pantalla de carrito, que tenemos
un icono aquí en nuestro encabezado que nos lleva a la pantalla del carrito, donde podemos ver la suma total y los artículos del
carrito y dónde tenemos ese botón de pedido ahora, pero diría
que ese es el segundo paso porque el primer paso más importante es que agregamos la lógica para administrar
los artículos del carrito y eso involucra a Redux. Para esto, agregaré un nuevo
reductor, un segundo reductor que denominaré cart, cart. js y también un archivo de acciones y este es en
realidad un archivo de acciones que completaremos.
Lo haremos con el archivo de productos más tarde también
una vez que nos sumerjamos en agregar productos, etc., pero por ahora, comencemos con la función de carrito. Entonces aquí en el
carrito. js en la carpeta
de reductores, configuraré mi estado inicial para ese segmento de carrito y nuevamente, son todos estos
reductores separados y los estados que logran conformar esa tienda Redux total porque al final, eso
es lo que luego combinas aquí con reducciones combinadas en un reductor de raíz y un gran estado al final.
Solo tenemos estos subestados individuales para facilitar la administración de los datos.
Entonces, aquí en el reductor de carrito, ¿cómo debería ser el estado de nuestro carrito?
Bueno, nuestro carrito tendrá un montón de artículos, podría ser una matriz y una suma que inicialmente es cero, por lo que una cantidad total que podría decir,
por supuesto, también podría nombrar esta cantidad total para que quede realmente claro de
qué se trata.
Estas son las dos cosas que componen mi carrito aquí y,
como siempre, no puedo enfatizar esto lo suficiente, hay más de una forma de implementar esto. Entonces, si también desea administrar algunos otros datos aquí,
definitivamente hágalo, no hay un
enfoque único
correcto o incorrecto, este es solo
mi enfoque para construir esta aplicación.
Ahora es importante que para este carrito aquí, quiero asegurarme de que si ya tenemos un artículo
en el carrito, digamos la camisa roja y hago clic en el
carrito por segunda vez, no agrego dos artículos a esta matriz, pero Todavía solo tengo un artículo allí y, en cambio, cada artículo en
esa matriz de artículos debe ser un objeto donde administro, como la identificación del producto tal vez, donde tengo el título y
la cantidad del artículo en el carrito, para que
luego cambie a 2 si hago clic en él por segunda vez.
Por lo tanto, también podría argumentar que los artículos tal vez no deberían ser una matriz, sino un objeto Javascript porque eso nos permite almacenar la
ID del producto como una clave y el valor podría ser un objeto con el título,
con la cantidad, con el precio y eso es solo una
alternativa, también podría
hacer todo esto con una matriz, pero ese es realmente el enfoque que usaré.
Ahora, el reductor que exporto, por lo tanto, es un reductor que, por supuesto, obtiene un
estado que tiene nuestro estado inicial como valor predeterminado y una acción como argumento que al final necesita devolver algunos datos.
Entonces, al final, necesita devolver un nuevo estado que luego usa Redux.
Ahora necesitamos una acción para continuar.
Así que aquí exportaré una constante, un identificador de acción y nombraré este agregar al carrito, el identificador depende de
usted, iré con agregar al carrito de esta manera y en el archivo de acciones, crearé tal
función creadora de acciones.
Entonces, aquí hay otra
constante que nombraré agregar al carrito que recibe, digamos, el objeto de producto completo que quiero agregar, para que pueda extraer la
información que necesito y luego aquí, tenemos que devolver un objeto de acción que tiene
un tipo que se agrega al carrito y luego a nuestro producto.
Esta es solo una forma de crear estas acciones que nos hace muy simple hacerlo dentro
de nuestros componentes.
Entonces, al final, en el reductor de carrito, en todos los reductores en realidad, pero en el lugar de los reductores de
carrito donde
nos importa, obtendremos esa acción de agregar al carrito, por lo que aquí debemos cambiar el tipo de acción y manejar el caso que es agregar al carrito y, por lo
tanto, debe importar agregar al carrito
desde esa carpeta de acciones y allí, desde el archivo del carrito. Ahora, y por cierto importante, esta acción cuando se envía
se recibe en todos los reductores, pero si no lo maneja con un caso separado, su caso
predeterminado se activará, lo que normalmente debería devolver su porción de estado actual para este reductor, que significa que el segmento de estado
para este reductor no ha cambiado. Sin embargo, aquí en el reductor de
carrito, por supuesto, quiero cambiar mi estado, por lo tanto,
me encargo de agregar al carrito
aquí y ahora en agregar al carrito, ¿qué
debería suceder allí?
Bueno, obtenemos nuestro producto adicional, podemos sacarlo de la acción porque allí en la acción, tendremos una clave de producto, eso es lo que
acabamos de
configurar aquí en el carrito de acciones. js, así que obtendré nuestro producto y
lo almacenaré en un producto agregado constante aquí con el que podemos trabajar ahora y tendremos
el precio de nuestro producto aquí, que por supuesto es producto agregado. precio y tendremos el título de nuestro producto
que se agrega Producto. título. Antes de continuar, definamos cómo es
el artículo del carrito, para que se vea cómo almacenamos aquí, el valor que tenemos allí.
Así que iré a la carpeta de mis modelos y agregaré un artículo de carrito. archivo js aquí y luego agregue una clase de elemento
de carrito que recibe un
constructor y antes de que lo olvide nuevamente, que debe exportarse aquí y ahora en
ese constructor, espero obtener la cantidad del producto que estamos a punto de agregar, el precio del
producto, el título del producto y la suma de este artículo, si tenemos tres veces la camisa roja, nuestra suma sería tres veces
29. 99,
aproximadamente alrededor de $ 90.
Ahora, lo que no obtengo aquí es el ID del producto porque lo usaré como una clave dentro de mi objeto aquí que contiene los elementos
y luego se aclarará una vez que lo implementemos.
Entonces, aquí en el artículo del carrito, solo
almaceno todos los datos que recibo, la cantidad, el precio del producto y
tengo esos datos que necesito enviar más tarde, así que el título del producto y la suma, como esta y ahora de vuelta en el reductor, por supuesto,
podemos importar esta clase de artículo de carrito desde la carpeta de modelos y desde el artículo de
carrito aquí y ahora de nuevo en esa caja de agregar al carrito, primero que nada
necesitamos saber si ese producto ya es parte de nuestros artículos.
Ahora, como mencioné, agregaré cada nuevo producto agregando una nueva clave a los artículos, que es la ID de ese producto, ya que
es único, siempre tenemos cada
clave solo una vez y luego el valor será un artículo del carrito, ya que solo Lo definí en modelos
y, por lo tanto, sé que si la identificación del producto que obtengo aquí ya es una clave de los
artículos, entonces este ya tiene nuestro artículo como un artículo de carrito.
Así que aquí, simplemente podemos verificar si hay elementos para Producto agregado. La identificación existe, por lo que si eso devuelve algo verdadero,
por lo que no está indefinido, entonces ya tenemos el artículo en el carrito, lo cual está bien, pero solo tenemos que cambiar
la cantidad, de lo contrario,
tendremos que agregar un artículo nuevo.
Comencemos con el caso else porque ese es el caso que encontraremos por
primera vez cuando
agreguemos algo por primera vez, allí necesitamos un nuevo artículo de carrito, lo creo
con la nueva palabra clave y la clase de artículo de carrito que definí y allí , necesitamos proporcionar la cantidad
que, por supuesto, es uno si
solo agregamos un nuevo artículo, necesitamos proporcionar el precio del producto, el título del producto aquí y la suma y la suma, por supuesto, inicialmente
es solo el precio de nuestro producto, ¿verdad?
Porque si agregamos un artículo de ese precio, entonces la suma de este artículo de carrito es el precio de nuestro producto y ahora
este nuevo artículo de carrito debe agregarse a nuestros artículos de carrito aquí.
Entonces, aquí, devolvemos una copia de nuestro estado y establecemos elementos
iguales a un nuevo objeto donde copie todos mis elementos de estado existentes, de modo que copie mi objeto
de elementos
existente aquí y luego agregue una nueva clave con esta sintaxis dinámica con los corchetes donde
se agrega el nombre de la clave Producto. ID, eso es lo que quise decir con la ID del producto que es la clave
en nuestro objeto de artículos y el valor es nuestro nuevo artículo de carrito.
Esto es solo una sintaxis que debe conocer, es Javascript vainilla, así es como puede agregar o acceder aquí arriba
a una propiedad dinámica en lugar de codificarla como una cadena aquí. Por cierto, esto aquí, por supuesto,
también debería ser estatal. artículos, mi error. Entonces, con esto, deberíamos agregar un nuevo artículo de carrito aquí.
Ahora, si ya tiene un artículo en el carrito, entonces, por supuesto, no creamos
un artículo nuevo, sino que queremos actualizar el existente. Así que tendré mi artículo de carrito actualizado
aquí y para eso, sigo creando un nuevo artículo de
carrito pero lo rellenaré previamente con algunos datos existentes, por ejemplo, la cantidad aquí. Obtenemos eso de los artículos estatales para la ID del producto agregado porque eso ya debería ser parte de
los artículos estatales, estamos verificando esto aquí y esto tendrá una clave de cantidad, por supuesto, porque dicho
artículo aquí en mis artículos es solo de escriba los artículos del carrito, para que tenga una propiedad de
cantidad y
simplemente agreguemos uno a eso porque estamos agregando un nuevo artículo del
carrito, por lo que tenemos que incrementar esto. Ahora el artículo del carrito como segundo argumento toma el precio del producto. Luego, por supuesto, ya que crearemos la
aplicación de modo que el precio nunca cambie, lo que agregaría mucha complejidad aquí, tendríamos
que administrar el carrito de una manera totalmente diferente en ese caso, tendríamos que almacenar cada artículo
del carrito como un lista de transacciones para este artículo del carrito que es demasiado para esto aquí.
Entonces, dado que esto nunca cambia, ya que el precio nunca cambia, al final podemos simplemente tomar
el precio de producción que estamos obteniendo o tomar el precio existente que almacenamos antes porque eso nuevamente nunca cambiará.
El título puede cambiar y quiero almacenar el título más reciente aquí, así que definitivamente tomaré uno del
producto que estamos obteniendo aquí en lugar de mi instantánea anterior y, por último, pero no
menos importante, el último valor aquí, mi suma total para este artículo del carrito, esa es, por
supuesto, la suma actual, así que accedo a los artículos de estado para la ID aquí, suma más el precio del producto porque agregamos un artículo nuevo aquí, tenemos
que agregar el precio multiplicado por 1 a la suma actual. Ese es el artículo del
carrito actualizado.
Ahora con eso, podemos devolver nuestro nuevo segmento de estado copiando los estados anteriores y estableciendo elementos iguales y ahora importantes,
a un objeto donde copiamos el estado. artículos pero donde ahora configuramos nuevamente el producto agregado. ID y sí, esto ya existe, pero
con eso simplemente lo anulamos con nuestro artículo de carrito actualizado, por lo que hacemos la misma
actualización que hacemos allí. Ahora que, sin embargo,
no es todo lo que necesitamos hacer, también
necesitamos cambiar la cantidad total porque eso, por supuesto, cambia.
Entonces, cuando agregamos un artículo por primera vez, la cantidad total debería ser básicamente nuestra cantidad total anterior, por lo tanto, indique la
cantidad total más el precio del producto y es lo mismo si agregamos
un artículo a un carrito existente o cuando ya existe allí porque, al final, nuestro total siempre es el total
anterior más el precio, porque siempre agregamos un artículo de ese producto, así es
como funcionará esta aplicación.
Entonces, nuestra declaración de actualización aquí
es casi la misma, lo único que difiere es cómo creamos ese artículo del carrito,
por lo tanto, por supuesto, también podemos reutilizar este código, moverlo fuera del bloque if else y en
lugar de tener dos constantes diferentes aquí , podemos crear una variable
antes de ingresar el enunciado if, actualizado o
un nuevo artículo del carrito tal vez, ese podría ser un nombre porque
no sabemos cuál será de antemano y luego aquí en la rama if aquí, configuramos actualizado o nuevo artículo de carrito para este artículo de carrito
actualizado, aquí, por otro lado, lo configuramos para este nuevo artículo de carrito y aquí, siempre usamos el
artículo de carrito actualizado o nuevo y con eso, tenemos un poco de reutilización de
código aquí y no repetirnos lo que siempre es bueno. Otra nota al margen, copiar el estado aquí, por
supuesto, siempre es redundante porque siempre establece los artículos y la cantidad total.
Entonces, si siempre tiene estos dos campos aquí y siempre cambia los dos, no necesita
copiar el estado existente, si alguna vez introduce otro dato en su segmento de estado aquí que no cambia
aquí sin embargo, debe copiar su estado anterior para no perder esos datos
adicionales.
Por lo tanto, aquí dejaré esa funcionalidad de copia aunque técnicamente no la necesitemos aquí, pero
si alguna vez debemos cambiar nuestro estado donde está guardado y no nos
olvidamos de copiarlo y, por lo tanto, perdemos datos.
Bueno, hubo mucho trabajo, con
eso podemos comenzar a enviar esta acción
y, por supuesto, quiero enviarla desde la descripción general del producto y los
detalles del producto porque en ambas pantallas, he agregado botones al carrito.
Entonces, comencemos en la pantalla de descripción general de los productos, allí para despachar
las acciones de
Redux necesitamos incluir el gancho de despacho de uso aquí, con eso aquí simplemente podemos obtener acceso a esta función de despacho llamando
al despacho de uso como este y ahora cuando hacemos clic en Agregar aquí abajo, podemos enviar nuestra acción aquí
y, por supuesto, en lugar de usar funciones en línea aquí, podría tener
funciones almacenadas en constantes separadas dentro
de su componente funcional aquí, como alternativa, me limitaré a las funciones en línea para ahora y voy a importar todas mis acciones aquí
como acciones de carrito desde la carpeta de la tienda y allí, la carpeta de acciones, el archivo del carrito.
Ahora, esta es una sintaxis de importación que combina todas las exportaciones del archivo en un
solo objeto, solo tenemos una exportación aquí, por lo
tanto, también podría apuntar a esa exportación
específica, luego tendremos múltiples exportaciones y, por lo tanto, usaré este enfoque.
Entonces aquí, luego despachamos la acción del carro.
agregue al carrito y esta es una función que tenemos que ejecutar, esta es nuestra función de creador de
acción y esto como argumento
toma nuestro producto, por lo que al final aquí, tenemos que pasar itemData. artículo que es solo nuestro producto aquí en la pantalla de detalles
del producto.
Por lo tanto, hacemos exactamente lo mismo, importamos el despacho de uso de React Redux, por lo tanto, aquí
podemos obtener acceso a la función de despacho llamando al despacho de uso
y luego para este botón aquí en la función en línea o en una función con nombre
separada si así lo desea
, puede llamar al despacho, ahora necesitamos importar nuestras acciones y usaré la misma sintaxis
que antes, donde importo todo como acciones de carrito desde la carpeta de la tienda, la carpeta de acciones, el archivo del carrito y ahora las acciones del carrito, llame a
agregar a carrito aquí y reenviar el producto seleccionado que es nuestro producto que queremos agregar al carrito aquí.
Con suerte, se envían acciones para que el artículo se agregue al carrito, pero por supuesto en este
momento no podemos confirmar esto.
Bueno, en realidad podemos. Puede activar el depurador React Native y no lo he usado
antes, pero allí, ahora puede presionar comando o control t para abrir una nueva pestaña, luego confirmar esta
importación
aquí, y
luego ir a sus aplicaciones y allí, abrir el menú de depuración en iOS con comando D, en Android
con control o comando M y haga clic en depurar Javascript remoto. Ahora el mío se abrió en el puerto 19003 en realidad, así que
abrí el depurador
React Native en el puerto incorrecto, seleccióneme nuevamente presione el comando T o control T en el depurador y elija 19003,
use cualquier puerto abierto para usted en Chrome, haga clic en confirmar y ahora se conecta a su aplicación React en ejecución aquí en el
depurador, asegúrese de cerrar su depurador de Chrome y luego vuelva a cargar
su aplicación, ahora esto debería conectarse aquí y ahora no solo puede
inspeccionar su aplicación aquí como
lo
expliqué anteriormente, no, también puede eche un vistazo a la parte de arriba y ese es su depurador
de Redux, allí puede ver lo que Redux está haciendo por usted.
Lo único que tiene que hacer para que esto funcione es instalar un nuevo paquete
con npm install --save dev porque es una dependencia de desarrollo que solo
necesitamos durante el desarrollo y allí, instale la extensión de herramientas de desarrollo de Redux, vaya
a su aplicación . js a partir de
entonces y luego importar desde esta
extensión de herramientas de desarrollo de Redux. Puede importar componer con herramientas de desarrollo desde allí y esa es
una función que pasa para crear la tienda como un segundo argumento, simplemente puede
ejecutarla allí de esta manera. Ahora, por cierto, este es
el código, esta
importación y este uso que debe eliminar antes de implementar su aplicación porque esto es solo algo que debe
ejecutarse durante el desarrollo, no en su aplicación de producción, debe eliminar eso antes
de implementar su aplicación pero durante el desarrollo, eso está bien. Y con eso agregado, si ahora guarda esto, en realidad
verá que aquí en este Inspector de Redux, verá que se envía una acción de inicio, no lo había visto antes.
Esa es una acción que se envía automáticamente cuando se inicia la aplicación.
Si ahora hago clic en el carrito aquí, también verá la acción agregar al
carrito y ahora aquí, puede ver detalles sobre esa acción, como los datos que se adjuntaron y
sobre su estado aquí y allá, por ejemplo, esto ¿Cuál es el estado de mi producto y
dónde está mi carrito?
Bueno, por supuesto que falta porque, aunque tenemos el reductor en la acción configurada, en la aplicación. archivo js, en reductores
combinados, no estamos incluyendo el estado del carrito.
Entonces, importamos el reductor de carrito. / StoreReducers / cart y ahora con eso importado, podemos agregarlo a nuestro
objeto de reductores combinados y ahora allí, agregamos un segmento de carrito por ejemplo, apuntamos al reductor de carrito y, por
lo tanto, ahora esto se incluye en nuestra tienda Redux. Con eso, si ahora espera a que esto se vuelva
a cargar y vuelva a hacer clic en el carrito, ahora en esta acción de agregar al carrito,
en el estado, verá que ahora hay un segmento de carrito y ahora ve que hay una
cantidad total, ves que hay un artículo con la clave P1 que es nuestro producto con
una cantidad de 1, ese precio, la suma de esto y si ahora hago clic en el carrito por segunda vez aquí, hay otra acción enviada y si
tenemos un Mire el estado después de esta acción, ahora vemos, enfriar solo un artículo, pero ahora
con la cantidad dos, el precio del producto por artículo es esto, pero
la suma es esta.
Esta es
la camisa, si ahora despacho la alfombra azul también,
tenemos que agregarla al carrito una vez más y allí en el estado, ahora vemos que
hay dos elementos allí, P1
y P2, P1 no ha cambiado pero P2 ahora se agregó y la cantidad total también me parece bien.
Así que esto parece funcionar y así es como puede ver su estado de Redux mientras su aplicación se está ejecutando
sin mostrarla aquí.
Ahora, por supuesto, también queremos mostrarlo visualmente, pero esta es una buena manera de ver su
estado detrás de escena con la ayuda del depurador React Native.
Ahora lo cerraremos aquí porque ralentiza un poco la aplicación y, por lo tanto, aquí
en el menú de depuración, también detendré mi depuración remota y cerraré el inspector aquí por completo.
También de vuelta en la aplicación. js, me deshaceré de la composición con herramientas de
desarrollo aquí para no
olvidarlo más tarde, pero siempre puede agregar esto aquí o dejarlo aquí mientras está desarrollando para que
pueda mirar en su tienda.
La conclusión principal para nosotros aquí es que esto
parece funcionar y con eso funciona, por supuesto, ahora podemos trabajar en agregar un botón de acción aquí al encabezado y asegurarnos de
que podemos ir a la página del carrito desde eso o con la ayuda de eso. botón de acción para que en la
página del carrito, podamos mostrar la información de nuestro carrito.