Ahora estamos realmente cerca del final de este módulo, por lo tanto, debemos asegurarnos de que ahora despachemos acciones
para crear un nuevo producto o para actualizar un producto y, por
lo tanto, antes que nada, debemos agregar estas acciones aquí en nuestra carpeta de acciones .
Así que exportaré una constante aquí, crearé un producto como este aquí, crearé un producto y luego aquí también, otro identificador para actualizar
un producto con un producto actualizado y actualizaré un producto como este y crearé creadores de acciones adecuadas
o crearé un producto y ahora depende de usted cómo desea estructurar esto, qué datos espera obtener
cuando crea un producto.
Soy fanático de crear el producto realmente aquí en la acción o en
el reductor, por lo que realmente espero obtener un título aquí, una descripción, un imageUrl y un precio, digamos,
y luego devuelvo un objeto de acción donde el tipo es crear producto y los datos del producto son simplemente todos esos
datos combinados.
Entonces, aquí tengo mi título, que se asigna al título que obtenemos como argumento, la descripción se asigna a la descripción
y, por lo tanto, también podemos usar un acceso directo de JavaScript moderno donde
si el nombre de la propiedad y el nombre de
la variable de valor son los mismos, simplemente puede escribir así, así que si es
lo mismo que precio:
precio, podemos escribir esto aquí, por supuesto, también es posible para el título y la descripción, de modo que asignemos todos
estos argumentos a propiedades del mismo nombre en este objeto y si actualizamos un producto que es relativamente igual, actualice el producto, por lo que
generalmente podemos copiarlo, pero hay una diferencia importante. Aquí también necesitamos la identificación del producto que debe cambiar, por lo que obtenemos
esto como un argumento adicional y podemos almacenarlo en nuestra acción, por lo tanto, en una propiedad separada de nuestro objeto de acción. Ahora en el reductor, por
supuesto,
necesitamos manejar
eso, necesitamos manejar la creación y actualización. Así que agreguemos un nuevo caso aquí en el reductor de productos para
crear producto y para eso, asegúrese de importar crear producto de productos de acciones y, por supuesto, uno para actualizar
un producto con un producto actualizado, asegúrese de importar eso también.
En crear producto, por supuesto, necesitamos crear un nuevo producto y lo almacenaré en una constante aquí con la nueva
palabra clave en el modelo de producto que creamos
anteriormente, para eso solo necesita asegurarse de importar aquí este modelo de producto la carpeta de modelos y ese producto
aquí reciben una ID que por ahora puede generar manualmente con una nueva fecha para encadenar para tener una especie
de ID ficticia pseudo única para el momento posterior, esto se generará en un servidor pero aún no
lo tenemos .
La identificación del propietario por ahora está codificada en U1 porque no tenemos usuarios en esta aplicación en este
momento, pero el título, etc., se puede completar con los datos de la acción porque en la acción para crear un
producto, tenemos la clave de datos del producto y contiene objeto con título, descripción,
imagenUrl y precio y esos son
datos que ahora podemos recuperar.
Así que aquí para el título, obtenemos acción productData. título, para imageUrl, es acción. datos del
producto. imageUrl, como era de esperar para la descripción, es acción. datos del producto. descripción y por
el precio, es acción. datos del producto. precio. Este es ahora un nuevo producto que creo.
Ahora necesitamos agregarlo a nuestra tienda devolviendo nuestro estado actualizado aquí, donde primero copio el estado existente y ahora
necesito agregarlo tanto a los productos disponibles como a los productos de usuario porque lo creamos,
ciertamente, por lo tanto, pertenece para nosotros, por lo que debe ser parte tanto de las matrices como de
los productos disponibles, bueno, allí podemos tomar estos productos disponibles que obtuvimos y usar concat para obtener una nueva
matriz que es la matriz anterior más agregar un nuevo elemento y aquí, el nuevo producto es ese nuevo elemento y hago
exactamente lo mismo aquí para los productos de usuario.
Así que aquí uso productos de usuario estatales y concaté mi nuevo producto. ¿Ahora qué pasa con la actualización? Para la actualización, en primer lugar, necesitamos
encontrar el índice del producto actual, por lo
que el índice de producto podría ser un nombre constante al acceder a nuestros productos de usuario y allí con find index, que
es un método Javascript incorporado, podemos encontrar El índice de un determinado elemento.
Nuevamente, esto toma una función que se ejecuta en cada elemento de esa matriz y que necesita
devolver verdadero para que tengamos un índice y allí miraré las ID y buscaré las ID
donde sea igual a mi pid,
mi acción pid porque si recuerdas cómo configuramos esa acción, para actualizar tenemos el campo pid aquí que
contiene los ID de producto que estamos obteniendo.
Así que estoy buscando ese producto y luego almaceno el índice de ese producto en la matriz de
productos del usuario en el índice del producto
aquí, ahora podemos crear un producto actualizado aquí que técnicamente es un nuevo objeto de producto pero, por supuesto,
está prepoblado con algunos viejos datos,
por ejemplo, conservamos el
ID, por lo que tomamos medidas pid como valor aquí.
También mantengo la identificación del propietario y para eso, puedo acceder a los productos de usuario estatales para el índice que acabamos
de descubrir, por lo que para ese índice de producto,. ID de propietario, no cambiaré esto.
Por supuesto, guardaré el nuevo
título, así que aquí guardaré la acción. datos del producto. título, almacenaré el nuevo imageUrl, así que acción. datos del
producto. imageUrl y yo almacenaremos
una nueva descripción, entonces acción. datos del producto. descripción. Sin embargo, mencioné que el precio no debería ser editable, por
lo que, como valor para esto, mantendré el precio original, por lo tanto, indique el índice de productos de los usuarios. precio aqui.
Por cierto, eso también significa que nuestra acción no es del todo correcta, allí también espero un precio, no debería hacerlo porque no
podemos ingresarlo en nuestras entradas de todos modos, no lo necesitamos, así que no deberíamos Lo esperamos aquí, no debemos reenviarlo como parte de los datos
del producto para actualizar el producto, para un nuevo producto lo necesitamos, pero para la actualización, no lo hacemos.
Entonces, con eso, tenemos nuestro producto actualizado con algunos datos nuevos y algunos datos antiguos,
ahora necesitamos actualizar nuestro estado, por supuesto, y para eso, tenemos los productos de usuario actualizados donde al final copie mis productos de usuario existentes
con esta sintaxis aquí para crear una copia y luego configuro productos de usuario actualizados para el índice de producto
seleccionado igual al producto actualizado, por lo que reemplazo el producto en este índice con el nuevo producto actualizado en mi copia,
no en la matriz original sino en mi copia. Necesito hacer lo mismo en los productos disponibles,
pero primero necesito encontrar el índice porque ese índice aquí solo funciona para los
productos del usuario, el índice en los productos disponibles es muy diferente, así
que tengo mi disponible índice de producto aquí si desea llamarlo así, que generalmente tiene la misma lógica de
selección, por lo que podemos copiar eso, pero por supuesto buscaré en la matriz de
productos disponibles en lugar de la matriz de productos del usuario. Y ahora nuevamente, aquí podemos tener los productos disponibles
actualizados donde copio mis productos disponibles estatales y luego establezco productos disponibles actualizados para el índice de
producto dado igual, discúlpeme por el índice de producto disponible, por supuesto, igual al producto actualizado, para que Reemplazo mi
producto existente con el producto actualizado tanto en los productos disponibles como
en la matriz de productos de usuario. Bueno y ahora, solo tenemos que devolver nuestro nuevo
estado, en primer lugar, copiar el existente y ahora configurar productos disponibles iguales a productos disponibles actualizados y establecer productos de usuario iguales a
productos de usuario actualizados, así que para mis matrices actualizadas estoy configurando allí. Con eso, esperamos tener toda la lógica que necesitamos, ahora despachemos estos eventos desde
el interior de la pantalla del producto agregado. Entonces, aquí tenemos que importar el envío de
uso de React Redux e importar nuestras acciones, así que importa todo como acciones de productos desde la carpeta
de la tienda, allí desde la carpeta de acciones y desde el archivo de productos y luego despacha estas cosas en
el controlador de envío, por supuesto. Aquí, lo que enviamos depende de si estamos editando
o agregando amd
como mencioné, podemos averiguar cuál es el caso con la ayuda del producto editado, si está
configurado, estamos editando, si no está configurado, estamos sumando.
Entonces, aquí, en el controlador de envío, podemos agregar un if check y verificar si el producto editado, si está
configurado,
lo estamos editando, por lo que quiero enviar mi evento de actualización del producto, para eso, en primer
lugar, yo necesitamos crear esa función de despacho con la ayuda de usar despacho y ahora con eso creado, allá abajo podemos
llamar a productos de despacho actualizar el producto porque eso es lo que estamos
haciendo aquí y ahora reenviar todos
los datos que necesitamos aquí, que
es mi ID de producto , esa es la identificación del
producto que estamos editando, lo estamos extrayendo aquí y, por supuesto, además, también reenviamos el título, reenviamos la descripción, todas
estas constantes de estado que tenemos aquí, nuestra imagenUrl y no el precio porque no lo necesito y, en el caso contrario, significa que
estamos agregando, luego quiero
enviar la acción de los productos. crear producto, aquí
reenviamos título, descripción, imageUrl y también el precio y con eso, deberíamos tener una
configuración donde esperamos poder agregar y editar productos.
Así que
guardemos esto y echemos un vistazo. Si ahora vamos al área de administración aquí y agregué esto y agrego
un signo de exclamación aquí y también uno aquí en la descripción y presiono guardar, obtengo indefinido no es un objeto, evaluando el precio
de los accesorios a fijo.
Parece que perdí mi precio aquí al intentar actualizar esto.
Bien, antes de arreglar esto, veamos si agregar un nuevo producto funciona.
Si agrego un producto aquí con prueba, prueba que, por supuesto, no es una imageUrl válida, por
lo que no veremos una imagen pero al menos tomaremos algo, también es una prueba.
Si intentamos esto y presiono enviar, esto tampoco funciona, así
que de alguna manera ahorrar el precio no
funciona y creo que el problema está aquí, por supuesto, el problema aquí es que el precio es realmente
una cadena aquí, pero debería ser un número, por lo que podemos convertirlo fácilmente en un
número agregando un plus aquí antes de pasarlo para crear el producto, para actualizarlo, por otro lado, si echamos un vistazo a nuestro reductor de productos,
normalmente debería mantener el precio que ya tenía .
Entonces, veamos si eso más lo soluciona para agregar o si también hay un problema diferente, este fue un cambio que se requiere
de todos modos, pero veamos si hay otro problema. Así que prueba, prueba, doce. Por
favor ingresa solo números aquí, no un texto que actualmente podrías pero que lo rompería,
prueba esto, presiona este botón, sí, eso no se ve tan mal, tenemos algún problema con la imagen aquí pero
si nos desplazamos hacia abajo, en realidad aquí si descartamos esto, podemos ver aquí nuestro producto,
por lo que falta el precio, por lo que
hay algo mal allí y tampoco parece que guardemos la
imagen correctamente, no solo porque no se muestra sino
por esa advertencia que recibimos, pero en
general, esto funciona.
Sin embargo, por ejemplo, aquí si trato de actualizar y guardar esto, todavía recibimos un error, por
lo que todavía hay algo mal.
Entonces, una cosa que está mal está en las acciones, por supuesto, para actualizar el producto aquí, el tipo debe ser actualizar el producto
y no crear el producto, de lo
contrario, activaremos la acción incorrecta en el reductor, lo que explica el error de precio que obtuvimos allí.
Entonces, esto tiene que ser un producto de actualización aquí para actualizar un producto como era de esperar.
Entonces, ese es un problema, pero se puede encontrar otro gran problema en la pantalla del producto agregado. Uso mi método de devolución de llamada aquí para
ajustar el controlador de envío correctamente y lo hago para
evitar recreaciones innecesarias de las funciones.
El problema es que inicialmente configuré esto para tener una matriz vacía como una lista de dependencias, lo que significa
que esto nunca se vuelve a crear, lo que tenía sentido cuando solo teníamos acceso
a la consola allí, pero ahora estamos haciendo cosas allí y ahora tenemos dependencias.
En este momento, nunca vuelvo a crear esta función, lo que significa que nunca se recrea para sus valores actualizados.
Entonces, cuando enviamos nuestro formulario, nunca tomamos en cuenta lo que ingresó el usuario.
Entonces, en realidad ahora tenemos
que especificar las dependencias aquí, la función de despacho pero, lo que es más importante, incluso, la identificación del producto, el título,
la descripción y el imageUrl y, por supuesto, el precio. Ahora con eso, si guardamos esto, deberíamos estar bien y todos los
problemas deberían desaparecer.
Esperemos a que esto
se vuelva a cargar, vaya al administrador ahora y comience a editar esto tal vez y ahora si agregamos un signo de exclamación en el
título y en la descripción y guardamos esto y volvemos, vemos que aquí y si vamos a productos , también lo
vemos aquí y en los detalles, también vemos ese signo de exclamación.
Ahora, si volvemos a administrador y creamos
un nuevo producto,
prueba, prueba, doce, prueba esto y lo guardo y vuelvo, ahora
esto también aparece allí. Por supuesto, la imagen no aparece
porque no hemos ingresado una URL válida, pero todos los demás datos aparecen,
por lo que esto generalmente funciona y, por supuesto, podría
ingresar una imagenUrl válida y eso también se rompería, probémoslo rápidamente también. Entonces, volvamos a la sección de administración y agreguemos un estante aquí, tal
vez, para eso seleccioné la URL de un estante que encontré en Internet para 199. 99, este es un buen
estante como este. Si ahora guardamos esto y volvemos, se ve bien, aquí está nuestra
imagen y también vemos eso aquí en la pantalla del producto y también podemos verlo aquí.
Esto parece
funcionar y, con eso, generalmente tenemos una configuración que funciona.
Ahora hay cosas menores en las que quiero trabajar, por ejemplo, antes de eliminar, sería
bueno tener un pequeño diálogo de confirmación y, además, quiero asegurarme de que cuando agreguemos o editemos un producto, cuando hagamos clic
en guardar aquí, navegamos automáticamente hacia atrás.
Entonces, estas son solo cosas menores, por supuesto, pero creo que son una buena final aquí en este módulo.