Guía completa de Redux Toolkit con React JS

1. Introducción: Hola y bienvenidos a este curso en el que vamos a aprender el concepto moderno de Redux. Eso es Rudolf toolkit con religioso, Mi nombre es Rachel y seré tu instructora en este curso. Entonces, si eres un desarrollador de React, entonces podrías estar usando el derivado como una gestión estatal para que reacciones la aplicación para mantener el estado de la aplicación. Y es posible que también estés usando lengua redacta o redactando middleware saga para manejar efectos secundarios en tu aplicación. Recientemente, redact equipo se le ocurrió el nuevo enfoque para escribir lógica en más eficiente cuando lanzan leer un kit de herramientas. Y con esta herramienta, las cosas se vuelven mucho más fáciles. Pensé en crear un nuevo curso sobre este tema. Porque esta área yDa toolkit biblioteca nos permite implementar redox de manera mucho más fácil y concisa entonces solía ser. Ahora, permítanme darles el breve panorama de Rudolf a aquellos de ustedes que no saben de qué es. Esa falla es la biblioteca de administración estatal que usamos en nuestra aplicación React, así como vas a usar dentro de tu aplicación. No sólo con React, sino que es muy popular. La biblioteca React, esa es la visión general de la reduct. Entonces vamos a entender lo que vamos a aprender en este curso. En primer lugar, comenzaremos con algún concepto teórico. Al igual que trataremos de entender el problema central de React y por qué usamos Redux dentro de reaccionar. Entonces entenderemos como qué es un kit de herramientas y qué APA incluyendo dijo este peaje redacta, qué es crear un tanque de reflexión. Entonces todos estos conceptos que vamos a entender con la ayuda de la pubertad. Después de eso, comenzaremos a construir nuestra aplicación con la ayuda de redact herramienta crear y crear un think tank en el que vamos a realizar toda la operación de multitud con la ayuda de marcador de posición JSON fake EPA. Con esta aplicación, vas a aprender a hacer ese post PUT y eliminarlo con create, creo que middleware en tu aplicación reaccionar redact Toolkit. Esta aplicación vamos a construir en este curso con la ayuda de reduct peaje en React. Ahora, hablemos del requisito básico para este curso. Este curso está diseñado de tal manera que cualquiera puede unirse a este curso que esté interesado en aprender concepto redox moderno, solo necesita tener comprensión básica de HTML, CSS, JavaScript, así como Reaccionar los conocimientos básicos. Al final de este curso, tendrá plena comprensión del concepto de kit de herramientas reduct. Y también podrás implementar kit de herramientas redact en tu cualquier proyecto React existente. Y también podrás convertir esos proyecto React redux en el que el viejo código Redux mientras que Gran Bretaña en herramienta de lector podría. ¿ A qué esperas unirte a este curso para aprender todo este concepto moderno? Y si tienes alguna consulta o sugerencia, entonces siempre puedes llegar a mí. Voy a intentar mi nivel mejor para resolver su toda la consulta. Entonces eso es todo. Desde mi final, te veré en la sección del curso. 2. ¿Qué es Redux y por qué usamos?: En este video primero, entenderemos el problema central de la gestión patrimonial React js. Contamos con nuestro componente principal de aplicaciones. Entonces conseguimos nuestro subcomponente. Si queremos cambiar un texto, entonces no podemos hacerlo directamente. En cambio, tengo que informar a un padre y cambiar el texto ahí. Y si tengo componente adicional, entonces se volverá aún más complejo. Por lo tanto, tenemos una lectura de las cuales tienen un enfoque diferente. Entonces aquí tenemos nuestra visión, nuestra aplicación, y en esta aplicación en cualquier componente dado se despachará y actuará. Entonces marca de acción a través del reductor. Reductor trabajo o tarea bastante simple. Tomará una acción, entonces tomará todo lo manipulado, y dará un nuevo estado. Esta manipulación sucederá, hornear en lo inmutable. Eso significa que no cambiará el viejo vector. Tomará todo el circuito como base y luego creará una nueva copia de todos los representados con los cambios en ploidy sí permanecieron intacto. Simplemente creamos un nuevo levantado y devolvemos este nuevo estado. Este inmutable te da un estado único en tu aplicación. Ahora estamos consiguiendo un nuevo estado se puede reducir entonces se almacenará en una tienda. Y tendremos sólo una tienda en nuestra aplicación. Este vector tiene una tarea simple, empujar hacia nuestro estado. Por eso se llama Restaurar. Es posible que tengas un reductor múltiple, pero tendremos solo uno se almacena en nuestra aplicación. Entonces nuestra aplicación suscribirse a esta tienda. Siempre que esté fechado, actualice. Nuevo parque estatal a la tienda. La tienda lo enviará automáticamente a todo el componente y dirigido y la aplicación se actualizará. Ahora, volvamos al ejemplo anterior donde teníamos nuestro componente de app con otros componentes. Y ahora también tenemos una tienda. Ahora si queríamos cambiar algo, el componente de usuario de MainComponent, entonces vamos a despachar y acción. Entonces el estado lo introduce. Y luego nos camino es querido a todos los componentes en estos datos todo sobre lo que es reduct y por qué usamos Redux en React js. 3. ¿Qué es Redux?: Ahora vamos a entender cuál es el total create reader para liquidar también utilizar para administrar la aplicación si 13 una aplicación React de manera eficiente. Se proporciona algunas baterías incluidas conjunto de herramientas para un desarrollo eficiente. Esta baterías incluían término conjunto de herramientas, luce un poco elegante aquí, pero entenderás este término más adelante. Entonces root x ya era opción popular para la gestión estatal en nuestra aplicación React. Entonces, ¿por qué se requiere redact toolkit? Con el kit de herramientas redact, se requería tanto código para configurar si para optimizar ese nivel básico, y con ello demasiado código de calderas, que hace que nuestro código, vamos a limpiarlo eficiente. Además, hay que instalar demasiados paquetes para construir una aplicación escalable. Con redox tradicional, solíamos escribir acción y reductor en archivo separado. Y esto se vuelve más complejo cuando nuestra app y conseguir que abordes este reto, redactando se le ocurrió un kit de herramientas para lectores. Redact kit de herramientas es un mejor enfoque para escribir deshacerse de la lógica. Por lo general, el lector a lucir bien si periodo de desarrollo al incluir deshacerse de Courbet redact paquete de kit de herramientas que creen que se llenan para construir una aplicación de lector. kit de herramientas Redact permite a los desarrolladores escribir código Redux simple y limpio. Entonces todo se trata de redact toolkit y por qué usamos con React. Por lo que espero que entiendas este término elegante ahora que es batería incluido conjunto de herramientas. Entonces todo se trata de kit de herramientas. Ahora vamos a entender a este lector para lucir bien con un escenario básico. Supongamos que tenemos que construir una aplicación de contacto. Tenemos que manejarlo sigue siendo cinco. Te voy a mostrar el enfoque tradicional con reduct tradicional. Por lo que solemos leer reductor y accidente en un expediente separado. Como se puede ver que aquí tenemos x y dot js en los que tenemos un dos x diez para incrementar el valor del contador o disminuir el valor del contador e introducir un archivo dot js, tenemos una lógica para incrementar un contrarrestar valor o disminuir el valor contador del Theta. Redacto tradicional. Supongamos ahora veamos cómo nos acercamos con el lector para lucir bien. En herramienta redact, podríamos reescribir nuestro reductor y acción en el mismo archivo. Se puede ver que hemos escrito nuestra acción en reductor bajo el rebanado Crear a través del enfoque toolkit. Y puedes hacer que el código sea mucho más concepto mediante el uso de create. Tanto el reductor como yo podemos, se puede escribir así bajo el vivo viendo este código, definir una grilla con ella y la acción se vuelve más limpia. Se datos para mirar. Ya no es necesario utilizar la instrucción switch para gestionar la acción con su productor correspondiente. Y otra cosa que podría haber notado aquí, como ahora tenemos mutando directamente el valor en la función reductor en lugar de devolver un nuevo valor para actualizar. Esto sucedió en realidad porque la herramienta redacta podría usar la biblioteca que permite disturbios los mutantes, lógicamente, reduciendo. Todo esto se trata del kit de herramientas del lector con el escenario básico. 4. Comprende Redux-Toolkit API: Ahora hablemos de este timón a lucrativo. Incluye la celebración de esta API en el paquete del kit de herramientas de radar. Empecemos con la primera que está configurada para configurar nuestra herramienta creativa para proporcionar una opción de configuración simplificada y un buen defecto. Puede combinar automáticamente su reductor de diapositivas y puede suministrar cualquier middleware, lo que quieras con redact. Genial, bueno, riddance, gracias incluido por defecto. Y también habilitó al lector de usuarios delta f veces. Y no hay necesidad de escribir código para configurar la reducción en la herramienta dev con el paquete reduct Toolkit. Por lo que solo tienes que instalar las herramientas Data Dev en tu Chrome Roger, la tabla reduct funciona automáticamente con la tabla reduct. Buen paquete. Entonces todo se trata de la tienda configurada. Ahora hablemos de disco crear el reductor. Básicamente simplifica escribir nuestro redact la lógica de la función reductor porque usa la biblioteca IMRT internamente para actualizar su estado imitable escribiendo nuevo código derivado en su reductor y soporte directamente mapeo es función específica x anti reductor que actualizará el estado cuando la acción se dispersa. Suministre una tabla de búsqueda de tipo de acción para crear la función reductor en lugar de escribir sentencia de caso conmutador. Ahora, sigamos adelante y hablemos de la acción de crear. Crea tensión confunción de creador de acción escritanegligente función de creador de acción escrita para la etiqueta dada con bebida. Y también se puede utilizar en un lugar de tipo constante. Ahora, hablemos de esto. Crear, seleccionar, Crear seleccionar función Azure que acepte un estado inicial y un objeto de un nombre de función reductor. Entonces genera automáticamente una X y se crea y actúa y tipo que corresponden al reductor. Y así en general, esto crea diapositivas. Apa es el enfoque estándar para escribir nuestra lógica Redux. Ahora, sigamos adelante y hablemos de lo creativo. A su vez para crear, creo. Gracias. Se utiliza para realizar tarea asíncrona con el paquete reduct Toolkit. Esta función normalmente aceptó tres parámetros. El primer parámetro será x y tipo, que estará en un anillo. El segundo parámetro será la función que devolverá una promesa generada pulgar que dispersará ya sea pendiente, cumplida, o rechazada cinturón de tipo acción en esa promesa. Y el tercer parámetro será el objeto Option. Ahora, hablemos de este adaptador Create Entity, generemos un conjunto de reductor reutilizable y seleccionado para administrar los datos normalizados en la restauración. Todo esto es sobre el kit de herramientas reduct, un BA, y vamos a entender más sobre esta API como crear diapositiva, crear un think tank, configurar un recorrido en detalle. 1 quinto, comienza a construir nuestra aplicación en la siguiente sección. 5. Comprende createAsyncThunk: Ahora comprendamos este pensamiento creativo. Intuitivo. Siempre que tenemos que realizar una tarea, usamos middleware. middleware podría ser cualquier cosa. Podría ser una saga reductora o redacta para realizar tareas asíncronas y deducir middleware, ya sea paquete popular con el lector con kit de herramientas redact, reductor se incluye por defecto, permitiendo a los creadores la intención de realizar lógica asíncrona antes de enviar el resultado del proceso al reductor. Aquí tenemos nuestro código de muestra y te daré la breve descripción general de este código de muestra. Ahora, primero hablaré de esto crear diapositivas. Entonces ligeramente la función que contiene tu código y función reductor utilizada para modificar datos de una tienda. Entonces en general en tercera, crea API en vivo. Escribimos nuestra lógica del lector. Por lo que aquí se puede ver que tenemos una propiedad de nombre, por lo que esto no es más que sus dígitos rayo rápido. Tenemos que proporcionar una diapositiva ahora dentro esto crea esclavos. Entonces tenemos que proporcionar estado inicial. Aquí, definimos nuestro estado inicial para nuestra aplicación. Por lo que aquí se puede ver que tenemos inicialmente entidades similares al estado y cargando false. Ahora tenemos aquí un objeto reductor. Dentro de este objeto. Manejamos solicitudes síncronas que pueden conducir a la tienda. Ahora, tenemos actividades en extra reducidas. Manejamos asíncrono, que es nuestro Min. Vale, entonces creo que Ronnie creó con la creación creo que diez pasos tres parámetros. El primer parámetro será la X y tipo de bebida, y el segundo parámetro será una función que devuelva una promesa y genere una lengua que despachen gasto pilar completo rechazado tipo de acción basado en esa promesa. Y el tercero será el objeto Option. manera individual con Italia, proporcionamos una configuración diferente, diferente a nuestra crear una API de think-tank. Pero el tercer parámetro, el agente de oxígeno aquí. Siempre que esta acción, buen despacho desde un componente dentro de nuestra aplicación. Así que crear cualquier cosa puede generar un ciclo de vida de tres promesas usando el mismo tipo de cadena que un prefijo. Por lo que aquí se puede ver que no genera un pendiente cumplido en, abatido. Y todo este ciclo de vida nosotros con disponible dentro de nuestro reductor extra. Entonces los tres prometen ciclo de vida que se genera al crear diez va a evaluar de hecho nuestro reductor. Entonces, en general, lo que suceda en llamada inicial crear un think tank despachará este tipo de acción , de acuerdo, y eso está pendiente. Y luego tendremos nuestra carga útil creada, cual se ejecutará para devolver ya sea un resultado o error. En caso de error, crea, creo que entonces enviaremos una acción con la redactada. Si nuestro conjunto de datos tiene éxito, entonces crear diez dispersará este tipo de acción que se cumple. Y los tres parámetros ciclo de vida, estaremos evaluando dentro de este extra reducir nuestro objeto donde realizamos nuestros cambios deseados a la tienda. Todo esto se trata de lo creativo. 6. Configuración de proyectos: De acuerdo, en este proyecto vamos a usar la API falsa de marcador de posición JSON para construir nuestra aplicación de crédito con la ayuda de reduct toolkit y crear cualquier cosa. Entonces vamos a usar esta API, como conseguir el post basado en el ID. Vamos a usar esta API con el fin de poner una sola entrada de blog. Y también vamos a usar esta falsa API. Hacer actualizar un solo puerto y basado en el ID y en negro, vamos a usar DCPA para eliminar un solo puerto basado en el ID. Entonces en general, vamos a utilizar para un PI con kit de herramientas reduct en este proyecto. Vamos a configurar nuestro proyecto primero. Estoy en este directorio y voy a abrir un símbolo del sistema. Voy a crear un proyecto React. Ya sea reaccionar. Apa. Puedes dar cualquier nombre, lo que quieras. Vamos a crear este proyecto. Por lo que tomará alrededor de dos a tres minutos instalar toda la dependencia de NO3. Y volveré con todos los procesos. Bien terminado, orientar nuestra configuración del proyecto ya terminada. Pero primero vamos a entrar en este directorio que es correcto. Kit de herramientas Apa. Entonces antes de hacer npm start, quería instalar algunos paquetes para este proyecto. Entonces voy a instalar paquetes así. Entonces vamos a utilizar y diseñar para construir nuestro componente. Entonces necesitamos instalar un kit de herramientas reductivas. Último kit de herramientas. Y también necesitamos router React. Sólo tres paquetes. ¿ Se requiere para este proyecto? Así que instalemos todos estos paquetes. En tanto, abriré este proyecto en código de Visual Studio. Entonces chicos, parece que están todos los paquetes instalados y ya he abierto este proyecto en mi código de Visual Studio. Así que vamos a entrar en el código VS. Como se puede ver que este proyecto está abierto en mi Código VS. Y aquí tenemos tobogán empacado. Aquí tenemos un paquete como y rediseñar la herramienta redact, kirtan, React router down, Guys, fin de utilizar y componente bajo demanda en nuestro proyecto React. En primer lugar, necesitamos traer la hormiga y diseñar el archivo CSS para poder utilizar el componente de diseño de Android en este reactor. Así que sólo voy a traer los antidepresivos, archivo CSS. Un archivo CSS que necesitamos traer de nuestros anticuerpos y luego solo podremos utilizar el componente antidepresivo. 7. Estructuración de nuestra aplicación: Ahora vamos a hacer estructurar nuestro proyecto. Sólo voy a crear algunas carpetas aquí, como vamos a haber desplegado como un usuario publicar una carpeta poco heterodox. En primer lugar, digamos digerido alguna ruta. Voy a tener y ese es el archivo dot js. Crear archivo post dot js. Vamos a tener un archivo más cargando guardia dot js archivo. Con el fin de mostrar el cargador esquelético. Hemos creado este archivo. Ahora, generemos un fragmento. Primero. este crear post este archivo index.js. Vamos a encajar en la pose. Podemos actualizar al poeta y podemos eliminar el post. Todas estas cosas que vamos a hacer en este archivo index.js. Generarlo en un poco. Vamos a dar aquí sólo habitan archivo JS. Vamos a quitar este logotipo que no vamos a usar. Vamos a quitar toda esta parte. Vamos a traer desde React router switch rutas y rutas. Desde el router React hacia abajo. Vamos a traer rutas. Necesitamos router del navegador de ruta. Básicamente vamos a registrar esto a la ruta. Eso es crear un archivo index dot js, ¿de acuerdo? Este no será el archivo index.js. Demos como casa sólo ingerir aquí mismo, rutas. Aquí estamos utilizando React Rotterdam vergence six. Se puede ver eso. Entonces por eso estoy usando rutas aquí no tanto. Espero que estén al tanto de esos cambios con respecto a la última versión de React router aquí abajo exactamente tampoco se requiere. Por lo que sólo podemos mantener el estado del camino del componente. Vamos a usar elemento por primera vez, vamos a rechazarlo la hora de ruta a domicilio. La siguiente ruta. Vamos a tener como crear, crear. Ambos. Cualquiera que sea el poema que vas a crear no va a guardar en servidor adyacente porque el etilo es un servidor fijo. Por lo que aquí sólo estamos imitando el, todas las solicitudes como get, put, post y delete. No fuiste capaz de guardar ningún dato. En dB. Hemos rechazado platillo para enrutar y dejar que también nos guste el router del navegador también. Vamos a sirope todo este router del navegador de la aplicación. Vamos a quitar este. Primero hagamos inicio on-premise. Empecemos. Ahora esperemos a que la aplicación se cargue en el navegador. Entonces chicos, la replicación se carga en el navegador. Visitemos esta ruta. Bush también, esté funcionando o no. Esto también es registro. Hemos registrado con éxito nuestras dos rutas. 8. Trabajar en forma: Ahora voy a empezar con el buscar el Porsche basado en el ID cinco veces, voy a crear un campo de entrada y el botón, dos botones. Voy a empezar a trabajar desde este expediente. Pero tenemos que hacer ahora para traer algún componente de nuestro diseño. Vamos a traer esos componentes primero. El componente que vamos a traer botón, una tarjeta, espacio de entrada. Reaccionar cuando TI para traer datos de los usuarios y usar efecto. Ya que estamos obligados a terminar el ID del puerto. Por lo que necesitamos definir un estado con ID. Id. Id. Déjanos darte una como acabas de volver. Tenemos que definir una clase, contenedor de ancho. Y después de eso, vamos a tener un rumbo. Entonces básicamente estamos realizando el estilo de encabezado de script phage post , estilo en línea. Ahora, después de este rubro, vamos a tener un campo de entrada con marcador de posición, como ID de usuario. Con servidor JSON. Básicamente vamos a pasar cualquier identificación aleatoria y vamos a conseguir un post como título y tipo de cuerpo será el número en cambio que vamos a dar. Podemos simplemente hacer como set. Tendrá en el evento dot target dot valor de punto. Ahora tenemos que pasar el valor también. Por lo que tenemos ID. Podemos dar algún alicatado hacia este campo de entrada, ancho, perdón, 300 pixel. Ahora podemos tener un par de respiraciones aquí. Mantengamos respiraciones. Ahora vamos a tener un espacio, un componente espacial que vamos a utilizar. Porque, porque vamos a combinar dos botones, vamos a mantener los lados. Será pequeño. Demos un estilo de trazador de líneas. Sólo voy a dar margen general. Agrega esto. Vamos a tener nuestro botón, nuestro botón Diseño. Este botón será primario. Podemos dar el botón Lamelech, que entonces, una vez que el usuario dé el ID en el campo de entrada, podrá llenar ese post. Ahora después de eso, lo que tenemos que hacer, vamos a tener un botón más. Este botón básicamente responsable de crear un usuario. Este botón básicamente te navega hasta la creación para eso hemos creado aquí. Tenemos dos botones y vamos a tener un método onclick. Podemos darte un pinzón, usar sus postes. Vamos a definir este enorme puerto AT. De lo contrario obtendremos error. Hemos definido esta función. Esta función vamos a despachar, ¿de acuerdo? Y acción. Hemos definido esta función en la que nosotros, en la que vamos a despachar y acciones. Así que primero vayamos al navegador. Tenemos este campo de entrada, y tenemos que habilitar también la funcionalidad de navegación a este botón. Entonces, lo que podemos hacer desde el reactor hacia abajo, podemos llevar el uso y navegar. Por lo que tenemos que llevar a EU navegue. Ahora tenemos que guardar la referencia fuera. Utilizas navegar hacia y navegar variable. Navegar. Lo que podemos hacer aquí. Al hacer clic. Simplemente podemos navegar para crear publicaciones. Veamos detalles que por fuera nos hemos registrado todavía. Sí, esta es la misma ruta que hemos mencionado aquí. Entrémonos en el navegador. Refrescar. Haga clic en Crear futuros posts. Por lo que ahora somos capaces de navegar hacia crear post. Vamos a escribir aquí algo. Aceptará sólo el número. También podemos teclear ese. Ahora, lo siguiente vamos a configurar el kit de herramientas redact en nuestro proyecto. 9. Configuración y escritura de GET: la acción con createAsyncThunk: Aquí ya hemos creado la carpeta. Aquí tenemos que crear una carpeta más como características. Ya que estamos tratando con el poeta ahora, te vamos a dar vida como ambas diapositivas, no en la raíz de la carpeta reduct. Vamos a tener nuestro archivo restore dot js. Asegúrate de que no debería estar en la redacta del router. Entonces creo que se ha creado en su lugar el futuro. Así que vamos a eliminar éste y asegurarnos de que el archivo debe estar dentro este reduct para que sea el archivo de punto js de la tienda. Almacenar archivo dot js. Ahora tenemos en nuestra carpeta, primero vamos a escribir una reacción redox con kit de herramientas reduct para llenar el post basado en el ID usando crear un think tank. En posts rebanada con Italia diapositiva sin nada más que una colección de redujo esa lógica. En diapositivas con Italia, actualizamos el estado de nuestro componente con la ayuda de productor. Por lo que necesitamos traer del kit de herramientas, crear sector y crear Asíncrono, crear sector, crear cualquier cosa. Ahora después de eso, lo que tenemos ver con crear un think tank, vamos a hacer una solicitud de API. Entonces como ya sabéis leer un Tango está incluido por defecto en redact toolkit. Alinear crear un think-tank para realizar un retardado con crear un think tank, vamos a hacer una solicitud de API. Entonces en general, crear un tanque de reflexión se utiliza para la lógica asíncrona antes de enviar el resultado del proceso al reductor. Entonces vamos a crear nuestra primera acción con la creación de costos de exportación. Post. Después de esto, crea un centro de reflexión. En el primer parámetro vamos a pasar nuestro tipo de acción. Puedes pasar de esta manera, publicar y GET post. El segundo parámetro es la función callback, que es responsable de hacer que se requiera la API. Y el tercero es opcional. Será objeto Container Option. Entonces aquí vamos a escribir nuestra lógica asíncrona. Vamos a recibir una identificación de nuestros componentes para que podamos distraer la idea así. Después de esto, podemos hacer una devolución y vamos a usar el pez para hacer una solicitud API. Primero vamos a usar esta API. Vamos a conseguir el puerto basado en el ID. Sólo podemos copiar éste. Podemos encajarlo aquí. Vamos a usar back tick porque vamos a conseguir la fecha en el ID. Aquí tenemos dos fiestas ID. Entonces vamos a dar una respuesta. Esa respuesta punto JSON. Ahora, crea un grupo de reflexión, básicamente lo que hace. Entonces cada vez que despachemos esta acción que es concreta verter de nuestro componente. Esto crea un grupo de reflexión, ciclo de vida de la promesa regenerativa. El ciclo de vida de la promesa como pendiente, cumplido y rechazado. Y estaremos evaluando estas tres promesas ciclo de vida en después del reductor, donde podremos hacer nuestros cambios deseados a lo distal. Primero, vamos a crear una rebanada. Deporte. Costo. Se llama a Slice para crear diapositivas. Vamos a definir el nombre de la rebanada. Así que vamos a dar su puesto. Ok. Vamos a tener estado inicial de nuestra aplicación. Por lo que voy a definir el post con área de empatía. Entonces vamos a tener cargando false. Entonces el error será nulo. ¿De acuerdo? Por ahora, este tanto estado inicial se requiere para nuestra aplicación. Ahora, vamos a tener nuestro reductor extra, que vamos a manejar el ciclo de vida de las tres promesas que se genera por nuestro crear un reductor de tanque de reflexión. Y dentro de esto, vamos a tener un buen post dot pendiente pendiente entonces cumplido y eso ha actuado. Entonces vamos a tener acción estatal. Aquí. Vamos a tener estado la carga de puntos será cierto en caso de flexión, carga será verdadera. Ahora, de igual manera, vamos a haber cumplido el ciclo de vida. Entonces GET post dot cumplido. Acción estatal. Aquí, podemos simplemente hacer como establecer la ley estatal subiendo a false. Ahora tenemos los datos y tenemos que hacer el estado falso de carga. Ok, Ahora state.org. Por lo que ahora tenemos que actualizar el estado inicial de ambos tangibles para que simplemente podamos escribir como acción dot payload. Después de esto vamos a tener que se actúe conseguir publicado. Elegido. Acción estatal. En este caso también, carga será el pulso. Después de esto, ¿qué tenemos un error total de puntos de estado? Aquí, podemos dar como acción dot payload. Aquí. ¿ Tenemos que usar punto y coma? coma. No olvides usar punto y coma. Vamos a formatear este. Ahora, tenemos que ser realmente exportar éste, exportar por defecto, post diapositivas reductor de puntos. Por lo que hemos escrito nuestra primera acción. Ahora es el momento de escribir la lógica en nuestra tienda dot js archivo con el kit de herramientas del lector. Configuración de victorioso. Muy sencillo. Por lo que necesitamos traer, configurar una tienda desde nuestro kit de herramientas redact. De redact, totalmente bueno para traer configure if torr. Ahora, tenemos que traer nuestros reductores, reductor. Nuestra carpeta futura. Eso es cuatro diapositivas. Exportar, por defecto, configuró una tienda. Aquí vamos a tener app reductor. Vamos a proporcionar la clave para este reductor de retratos. Con la ayuda de esta clave de app, vamos a aceptar el estado que hemos definido en nuestro segmento para poder acceder a este error en nuestro componente. Por eso he definido esta clave de aplicación. Estamos terminados con la configuración de la tienda. Ahora vamos al archivo index.js y cinco minutos para traer un paquete como índice reaccionado porque, porque vamos a necesitar provisto que pueda arrastrar esta puerta a nuestro React aplicación, alto React redux. Y olvidé instalar este paquete inicialmente. Vamos a instalar paquetes es alto largo. Vamos a cerrar esta terminal. En primer lugar, pin para anclarlo para traer proveedor de nuestros productos de reactor que nuestro componente pueda después del estado que hemos definido en nuestro restaurado. Y tenemos que traer su recorrido desde nuestra carpeta redox. Ok, Ahora vamos a envolver nuestro componente de aplicación con proveedor. Vamos a cortar éste, pegarlo aquí. Podemos usar Datastore y podemos almacenar. También puedes comprobar este si has integrado correctamente el kit de herramientas redact con la aplicación React o no. Puedes ir al navegador y solo puedes abrir esta herramienta. Voy a anexar a mi botón. Y aquí se puede ver el estado. Entonces eso significa que hemos configurado con éxito nuestro kit de herramientas en un proyecto React. 10. Dispatch GET createAsyncThunk: Ahora tenemos que despachar básicamente esta acción que hemos creado en nuestro post diapositivas desde nuestro componente. De acuerdo, vamos al archivo index.js. Y a partir de eso, necesitamos traer enorme despacho y seleccionaste que llegaste a respetar se utiliza para despachar una acción. Usted seleccionado se utiliza para seleccionar el estado de nuestra tienda. En primer lugar, guardemos la referencia del uso de despacho, variable de despacho. Entonces sólo podremos despachar una acción. Aquí. Primero vamos a comprobar si no tienes ninguna identificación. Hemos comprado algún método de error simple como alerta de puntos de ventana. Simplemente podemos darme como por favor proporcione una parte de identificación que vamos a dispersar y acción que hemos creado en nuestro post. Publicar y código VS importan automáticamente esa acción. Y podemos pasar aquí, me gustó esto porque se puede ver esa id que estamos recibiendo aquí en forma de objeto. Para que podamos pasar el ID de esta manera. Después de eso, sólo podemos hacer una cosa más como set ID para entretener. En primer lugar, vamos a comprobar si nos están metiendo o no en base a una identificación aleatoria. Permítanme refrescar este 1 primero. Y vamos a dar una identificación. Demos clic en Fetch adelante. Ahora, veamos la profundidad a bajar. Se puede ver que esa promesa se cumplió aquí. ¿ De acuerdo? Aquí tenemos 1 cuarto en matriz de objeto. Ahora ya puedes ver que tenemos este post, ¿de acuerdo? Ahora tenemos que mostrar básicamente este puerto en nuestra UI. Entonces hagamos eso. Por lo que ahora tenemos que extraer básicamente el estado de nuestra tienda utilizando los EE.UU. seleccionados. Puedes usar tu selector de uso. Podemos tener su más ligero hizo. Podemos extender aplicación punto estatal porque nuestro reductor se restaura con la clave de la aplicación. Entonces con la ayuda de app key, podemos acceder al estado que tenemos en nuestro vector. Hemos definido un estado como la carga. ¿ De acuerdo? Publicar esto estados que hemos definido en nuestro reductor en diapositivas. En primer lugar, vamos a la consola log el postdoc, ya sea que estemos recibiendo la publicación o no, post de registro de consola. Vamos al navegador. Demos cualquier ID de usuario aleatorio. Ahora vamos a abrir la consola. Se puede ver que tenemos un área. Siempre estará conteniendo una sola matriz de objeto porque estamos buscando el post basado en el ID. Ahora vamos a mostrar este detalle post en un componente de tarjeta. Entonces primero, voy a poner algún código aquí en curva de carga. De acuerdo, entonces básicamente estamos mostrando cargadora de caracteres. El cargamento es cierto. Una vez cargándolo caiga, entonces vamos a mostrar esos datos en un componente de tarjeta. Y voy a pagar código aquí por cargadora esquelética. Y no te preocupes, adjuntaré este código en esta conferencia. Puedes descubrir fácilmente ese código para esta curva flotante. Ahora lo que tenemos que hacer, tenemos el estado de carga. Después de esto es página voy a dar un par de breves. Entonces podemos tener nuestro estado de carga. Y si la carga es verdadera, entonces en ese caso voy a mostrar la tarjeta cargadora de caracteres. CVS ponen automáticamente importar ese componente. Podemos proporcionar el conteo a uno. Y en esta parte vamos a mostrar el detalle del puerto en un componente de tarjeta. Aquí, voy a usar fragmento. Y vamos a usar un nombre de clase que sea, y nombre de clase de diseño, tarjeta, envoltura de guiones de borde. Y después de esto, lo que tenemos que hacer, voy a usar tarjeta aquí. Coche, escriba un título. Podemos ordenar un título así. Siempre estará conteniendo una sola matriz de objetos. Por lo que podemos mostrar así para el título de punto. De esta manera podemos mostrar. Podemos enseñar mejor ID de usuario como ID de usuario real. ID de usuario y post post dot ID. Vale, primero revisemos este si somos capaces de ver algo o no. Vamos al navegador. Y ahora se puede ver que somos capaces de ver ese id Reenmarque éste. Estamos recibiendo algún error. No se puede leer propiedad de título. Vale, no hay problema. Entonces para solucionar este problema, lo que podemos hacer, solo podemos comprobar aquí como longitud de punto. Longitud del punto. Esto es mayor que 0. Entonces sólo vamos a mostrar este componente de tarjeta. Vamos a cortar este. Aquí. Entrémonos en el navegador, actualice éste. Ahora, demos un ID de usuario aleatorio. Ahora se puede ver que tenemos nuestro post aquí. Este es el título y este es el ID. Ahora tenemos que mostrar el cuerpo también. Por lo que se puede ver que sí tiene un título que ya estamos mostrando aquí y tenemos que mostrar el cuerpo también y este componente de tarjeta. Entonces qué podemos hacer, para que puedas tener aquí una etiqueta span. Etiqueta Span aquí. Podemos presumir de 0 dot body porque estamos enfrentando el solo post basado en la idea. Por lo que siempre será tener una sola área fuera del objeto. Espero que estén obteniendo este punto. Ahora vamos al navegador. Ahora se puede ver que también somos capaces de mostrar el cuerpo. Para este post. Somos capaces de mostrar éste. Somos capaces de mostrar el título y el cuerpo. Y volvamos a golpear basándonos en alguna identificación alguna. También tenemos cargador recogido. 11. Añadir botones: Ahora tenemos que añadir dos botones que tú haces. Toca, Eliminar. Agreguemos esos botones también. Después de esta tarjeta, vamos a ese botón. Entonces voy a usar tu espacio. Podemos proporcionar algunos apoyos como medio. Voy a tener algún estilo en línea. Margen top, te voy a dar un margen, top 35, margen izquierdo. Eso es cinco. Y voy a dar flotador, flotar , flotar bien. Ahora. Entre el espacio, vamos a tener nuestro botón. Botón. Nuevamente, vamos a utilizar y diseñar componente. Podemos tener su alicatado de alineación. Tenemos que especificar puntero. Vamos a tener tipo, tipo. Te voy a dar una primaria. Vamos a tener Peligro. Tendremos el método OnClick también hasta ahora Juzgar, definir el botón de valor de salida para que tenga un delete. Lo mismo que sólo voy a copiar para una cita también. Será sólo una cita solamente. Podemos quitar esta parte de peligro. Veamos si somos capaces de ver nuestros botones o no. Se puede ver que tenemos nuestros botones. Volvamos a publicar de nuevo la página. Tenemos nuestro botón. Está funcionando. 12. DELETE con createAsyncThunk: El siguiente operativo vamos a realizar la operación de eliminación. Por lo que podemos eliminar este puerto que hemos pagado con base en el ID. Entonces primero tenemos que escribir nuestra acción en nuestro post slash dot js archivo. Hagamos eso 1 primero. En puertos como el archivo dot js, voy a tener una acción más. Eliminemos publicaciones. Sólo voy a copiar este. Sólo voy a pegarlo aquí. Y yo sólo voy a cambiar éste. Por lo que será borrar posts y esto será x y titulado con el delete post. Nuevamente, vamos a eliminar el post basado en el ID. Aquí vamos a derrotar el id de nuestro componente y la URL será aditiva. Adicionalmente, tenemos que proporcionar método aquí porque estamos usando fetch aquí. Tenemos que proporcionar un método aquí. Al igual que eliminar. Hasta ahora obteniendo los datos del servidor JSON o de cualquier API, no tienes que proporcionar método. Pero en caso de otras solicitudes como tanto eliminar o actualizar, hay que proporcionar el método aquí. Por lo que aquí estamos brindando el método, eliminar. Esto será cosa aditiva. Ahora estamos haciendo con solicitudes de API. Entonces esto crea un think tank, generar tres ciclo de vida que vamos a disolver en nuestro reductor. De nuevo, ¿qué tenemos que hacer? Por lo que sólo voy a copiar este tres ciclo de vida que está gastando plena construcción y dirigida. Y voy a pegarlo por aquí y me aseguraré de cambiar ésta de la guía para eliminar publicaciones. Y podemos quitar éste. Será jet action dot payload. Entonces utilicemos esta acción que hemos creado aquí en nuestros componentes. Entonces vamos al archivo index.js. En onclick. dispersar esa acción para que pueda eliminar el registro. Aquí. Voy a mostrar esa acción. Por lo que despachar y eliminar mensajes. Entonces el código VS importa automáticamente esa acción para mí. Y podemos dispersar eso de esta manera. Por lo que vamos a mostrar el mismo ID que estamos usando para llenar el ID. ¿De acuerdo? Antes. Podemos tener ID aquí, como este índice de array dot ID, vamos a ver si somos capaces de eliminar este puerto o no. Para éste, vamos a crear un post basado en los cinco ID. Tenemos este post. Ahora vamos a hacer click en Eliminar. Ahora se puede ver que podemos eliminar con éxito el puerto también basado en el mismo átomo que hemos utilizado para obtener la operación de eliminación también se hace con nuestro kit de herramientas reduct en este aplicación. 13. POST acción con createAsyncThunk: Ahora la siguiente operación vamos a realizar el pool create user. Una vez que hagas click en esto, crea un usuario para ti, navegaremos hacia el Create Board. Y sea cual sea el puerto que vayas a crear no va a ahorrar en dB porque estamos utilizando la API falsa de marcador de posición JSON. Por lo que no mantiene ningún tipo de base de datos detrás de escena. Por lo que no podrás guardar este cerdo en dB. Pero vamos a imitar esta solicitud de puerto con la ayuda de esta API. ¿ De acuerdo? Vamos a crear esa acción en nuestro primer archivo de slide dot js. Lo que voy a hacer, voy a copiar éste. Voy a pegarlo aquí. Crea un puesto de mejor calificación. Ahora tenemos que hacer algunos cambios aquí. Esta vez estamos creando el poro para que no acepte ningún tipo de identificación. Podemos quitar esta parte. Después de esto. ¿ Qué tenemos que hacer? ¿ Método? Vamos a proporcionar ambos métodos todavía porque estamos creando un nuevo puerto. Y después de eso tenemos que proporcionar el encabezado también. De lo contrario no funcionará. Por lo que pisé encabezados, tenemos que proporcionar un robo. Podemos dar su aplicación JSON. Entonces estamos predefinidos el tipo de contenido, tipo de contenido aplicación. Json. Vamos a tener cuerpo, JSON, estringificar. Vamos a crear el poro con título y título corporal que podemos dar aquí. Vamos a recibir unos valores. Vamos a recibir unos valores de nuestros componentes. Por lo que podemos cavar tratado este valor de esta manera. Podemos tener como Valores, título de punto. Podemos tener como cuerpo Valores dot body. Lo necesario serán los aditivos. Hemos creado este puerto y no te preocupes, te explicaré esta parte. La parte de los valores. Aquí, el valor no es más que contendrá un objeto con un título e información corporal. Y eso es recibir valores de nuestro componente y estamos aportando título y cuerpo. Pero vamos a tener que llenar nuestro crear para que sea título y cuerpo. Digamos que esto todos los tres prometen la vida en la que es generada por nuestro creador, creo lengua. Así que de nuevo, sólo voy a copiar pegar el ciclo de vida S3. Podemos pintarlo aquí. Y no se olvide de cambiar éste de libro de calificaciones para crear ambos. Vamos a copiar este, vamos a Pe de dos niveles. Y el resto de la cosa será aditiva. Estamos terminados con la parte real. 14. Trabajar en crea formulario de publicación: Entonces trabajemos en esto. Crea ambos desde nuestro anti diseño. Tenemos que traer algún componente. El componente que vamos a necesitar aquí, entrada, botón, tarjeta, espacio. También vamos a necesitarte seleccionado y te salvarás de nuestro React. Tan enorme selector. Cuando TI para traer y usar despacho de reaccionar, necesitamos estado enorme también. Voy a definir un estado con valores. El mismo valor que vamos a pasar por nuestra acción para que pueda recibir aquí en nuestro archivo slide dot js. Trabajemos en este Crear puerto. Enorme estado. Y vamos a definir nuestro estado inicial con un objeto. Vamos a tener título y cuerpo. Y después de eso vamos a tener un estado hipotecario. Entonces esto está emparejado con feo. Estamos utilizando para describir dos discretos creados. Una vez que el usuario crea un pobre, entonces en la misma página vamos a mostrar que creó un estado enorme e inicialmente será el falso. Después de eso, guardemos la referencia de nosotros. Es variable de despacho paginate. Por lo general despachar. En primer lugar vamos a trabajar en el componente de forma off. Entonces vamos a crear una forma. Vamos a quitar este. Vamos a tener un formulario. Quitemos parte de acción. Y aquí vamos a tener en el método Submit, que vamos a definir manejar submit. El formulario que vamos a tener. Después de esto. Vamos a definir nuestro campo de entrada. Te dio un marcador de posición. Título. Tipo, texto sólo cambia. Te vamos a dar. Te puedo dar como valores establecidos. Puedo extender los valores y tenemos que sólo sólo, y podemos establecer el título al valor de punto objetivo. Ahora, vamos a tener valores. Los valores, valores. Entonces a partir de valores podemos tomar textura como título y cuerpo. En el valor podemos pasar el título. Demos un poco de estilo en línea también a este campo de entrada. Entonces voy a dar 400 pixel. Después de esto, voy a tener punto de lóbulo superior. Entonces vamos a tener área de texto. Así entrada punto área de texto. Después de esto. Y al contrario, voy a copiar esta cosa. Voy a pegarlo aquí. Aquí va a ser cuerpo. Se adjuntará y esta voluntad, y se convertirá en cuerpo. El valor corporal será ancho del cuerpo será aditivo. O tenemos que dar porque es un área de texto, por lo que será grande. Ahora voy a tener un par de descanso de nuevo. En este espacio. Voy a crear un botón de un solo aquí. Estilo. Vamos a darle un estilo. Margen. Diez. Vamos a agregar botón. Voy a usar el componente de botón NTDs N, onclick. Vamos a tener el método OnClick. El valor del botón será el gol de vuelta. Definiremos el método onclick. Volvamos atrás. Básicamente navegarás de nuevo a la página de inicio solamente. Va a tener en el botón Enviar. Enviar tipos. Podemos dar cumbre primaria tipo HTML. Entrémonos en el navegador. Tenemos algún error, por lo que necesitamos aplazarlo, manejar enviar. Así que por ahora solo vamos a crear una función vacía. Recibirá un evento. Entrémonos en el navegador. Entonces tenemos esta dos-entrada. Uno es un error de entrada normal y otra área de texto que tenemos volver atrás y enviar botón y si haces clic en volver atrás, nunca llegarás hacia la página de inicio. De React router dom. Traer US navega. Vamos a usar navegar aquí. Usar navegar. Y lo que tenemos que hacer. Estamos grabando la referencia de nosotros navegar y navegar variable y un onclick. Podemos navegar. Nosotros te podemos dar navegar. Queríamos navegar hacia la página de inicio. Vamos a probar primero este. Éste, Demos clic en GoBear. Pero ahora somos capaces de navegar hacia la página de inicio. 15. DesDesde punto POST createAsyncThunk: Por lo que ahora tenemos que trabajar básicamente en la creación de posts. Entonces vamos a mostrar una acción que hemos creado en nuestros posts como el archivo dot js, manejar submit, vamos a desesperar esa acción. Ahora, lo que tenemos que hacer manejar algún material recibiendo un evento hasta el momento, tenemos que hacer un punto prevenir predeterminado para evitar el comportamiento predeterminado del navegador. Y después de eso, podemos mostrar eso una acción. La acción que tenemos como crear código post soviético, importar automáticamente que envié por mí. Y sólo podemos pasar los valores enteros. Este valor, particularmente estamos estructurando diff aquí. Se puede ver que en nuestra acción create posts, al crear tanto impuestos como estamos transfiriendo el valor que estamos enviando a través de nuestra acción. Después de esto, quería inputar el campo de entrada. Lo que podemos hacer aquí, título. Por lo que el título será en Masilla, será el ímpetu. Tenemos que hacer también set. Entonces ambas verdaderas. En el momento en que envías este formulario, quise mostrar el puerto en la misma página debajo este componente de formulario que quería crear post. De acuerdo, entonces por eso tengo un estado separado como set. Y se hará verdad. Podemos revisar éste, si esto crea carteles trabajando o no. Por lo que podemos verificar con la ayuda de reduct Deadpool. Primero, vamos al navegador y vamos a darte una prueba en vivo. Y voy a pegar algún texto aquí dentro de esta área de texto. He representado mi texto aquí. Se puede ver que Demos click en Enviar. Abramos la profundidad de reducción Contada. Se puede ver eso. Se puede ver que nuestra promesa se cumplió aquí. Y podemos ver que nos han metido. Se puede ver ahí tenemos nuestro cuerpo del título. También verá un ID de usuario generar éticamente un ID de usuario aleatorio. Se puede ver que tenemos uno, agregando uno, no el ID aleatorio, que es creado por nuestro servidor JSON. Ahora lo que tenemos que hacer así vamos a mostrar el retrato creado debajo de este componente de formulario. Una vez que el usuario envió el formulario. Vamos al código VS. Voy a usar un selector enorme aquí. Tú seleccionaste Voy a usar para básicamente rastrear el valor estatal desde nuestro estado de tienda. ¿ De acuerdo? Podemos tener un valor como publicar y cargar. Después de esto. Tenemos que hacer después de esto, vamos a tener una función la cual se encarga coser bloques creados o así post blog. Dentro de esto vamos a tener retorno. Vamos a usar fragmento aquí también. Voy a usar la carga. Cargando si es cierto, entonces voy a mostrar o cargar componente de tarjeta que se encarga de coser ese cargador de caracteres. Y voy a dar un conteo aquí, uno más, voy a bloquear ambos Tokio. Nuevamente. Lo que voy a hacer, así que voy en archivo index.js. Y sólo voy a copiar esta cosa. Vamos a venir aquí. Y vamos a pegarlo aquí. Tal vez tengamos que cambiar. Vamos a darte primero un div de cierre. Esta será la prueba, el aditivo Silvia. Esto será editado. Por lo que todo será editado. Porque una vez que creas esto para el estado posts contendrá una sola matriz de objeto. Podemos ordenar este puerto creado debajo de este componente de formulario. Voy a tener un par de descanso otra vez. Y podemos tener ambos. Cierto. Entonces voy a ese post para publicar blog. Vamos a salvar este. Vamos al navegador. Refresca éste. Vamos a probar el blog. Y yo voy a escoger el contenido aquí. He representado el contenido de cuerpo aquí. Demos clic en Enviar. Se puede ver que somos capaces de crear un puerto con éxito y estamos mostrando debajo de nuestro componente de formulario. Hemos realizado esta operación de creación con la ayuda del kit de herramientas del lector en nuestra aplicación React. El siguiente operativo vamos a realizar la operación de actualización. 16. Ponga acción con createAsyncThunk: Entonces crear operación se realiza con toolkit. Ahora es el momento de realizar la operación de actualización con la ayuda del kit de herramientas de radar. Entonces primero vamos a crear una acción que será la encargada de actualizar los ambos basados en el ID en los puertos como archivo dot js, vamos a crear una acción. Entonces, lo que voy a hacer, sólo voy a copiar toda la acción. Sólo voy a pegarlo por aquí. Esto se convertirá en actualización. Ambos se convertirán en tablero de actualización. Ahora vamos a actualizar el puerto basado en el ID de nuestro componente. Vamos a recibir un par de cosas como ID. Vamos a actualizar el cuerpo. También vamos a pasar el título, ¿de acuerdo? Pero vamos a actualizar sólo la parte del cuerpo del único post de blog. Aquí tenemos que especificar el ID porque vamos a actualizar el puerto basado en el id Y el método se convertirá en put. El encabezado será una estancia como está en el cuerpo. Tenemos que inyectarla, quitarla. Simplemente podemos pasar aditivos como título y director corporal, la cosa será aditiva. Ahora. Ahora esto crea un centro de reflexión, generará un ciclo de vida de tres promesas. Así que manejemos de nuevo el ciclo de vida de las tres promesas en nuestro reductor. Así que sólo voy a copiar las tres vida naturalmente por aquí. Y sólo voy a pintarlo. Y asegúrate de actualizar del libro de calificaciones a la actualización. Será tablero de actualización. Esto también será actualización ambos conocidos por cambiar todo esto aquí. Y tenemos que definir alguna finca, algún estado inicial adicional que tenemos que definir. Vamos a actualizar sólo la parte del cuerpo del cuerpo será inicialmente empatía y habrá un modo de edición. Por lo que en un principio será lo falso. También vamos a tener una acción extra. Entonces voy a definir esa acción en reductor. Por lo que este accidente se encargó de habilitar el modo de edición. Vamos a tener como set. Esto tendrá estado y acción. Aquí. Vamos a tener un estado punteado es igual a la carga útil real. Vamos a recibir esta cosa de nuestro componente. Tenemos que hacer una actualización más como punto estatal, cuerpo, punto, carga útil y cuerpo. Vamos a recibir dos cosas como el modo de edición y parte del cuerpo del tablero de un solo bloque. Exportemos esta acción también. Lo que podemos hacer aquí, podemos tener como exportación const, presumir, rebanar, punto, acción. Y podemos dar aquí como set edit. Ok. Ahora volvamos a la parte de la interfaz de usuario. Volvamos aquí. Vamos a buscar un post aquí. Ahora tenemos un botón de edición por aquí. Y una vez que haces clic en esto, hiciste esta parte del cuerpo con Italia convertida en el área de texto. Y el valor del botón también obtendrá Cambiar. Valor de botón, bueno. Editar para guardar. 17. Llena de datos de publicación en forma: Entonces un archivo index.js. Lo que tenemos que hacer primero, vamos a recibir este nuevo estado que acabamos de definir en nuestros posts como objeto de archivo dot js, extrayendo los enumerados anteriormente selector de Estados Unidos. Y aquí lo que tenemos que hacer. Ahora, vamos a tener nuestro modo. Estamos en modo de edición. Entonces lo que tenemos que hacer, vamos a tener fragmento aquí. Una parte más. Sólo estamos mostrando esta parte del cuerpo que te fue que no está editando el post. Ahora toda la lógica que tenemos que definir en esta parte fragmento, editando el post. Entonces lo que voy a hacer, así que a partir de esto, vamos a tener OnClick. Vamos a despachar una acción. Despacho. Y vamos a desplazar a dicho idiota. ¿ De acuerdo? Una vez que el usuario haga clic en este botón de edición, el modo se volverá verdadero, tan cierto. Y tenemos que pasar el cuerpo también. Cuerpo valioso. Para que podamos conseguir el cuerpo de luz postes 0 dot body. Vamos a formatear este. Guardemos el expediente. Ahora aquí, lo que tenemos que hacer, por lo que será en soporte. Así que vamos a darte un soporte. Aquí. Vamos a tener área de texto, filas de área de texto para ir a tener valores. ¿ De acuerdo? Por lo que necesitamos definir el estado inicial. Tenemos que definir un estado para los valores de este cuerpo. Entonces aquí lo que podemos hacer, podemos tener un estado más como la etiqueta corporal. Porque estamos actualizando el cuerpo del único post de blog. No estamos debatiendo el conjunto de títulos. Será de lástima. Y aquí voy a correr un efecto enorme. Efecto de uso. Vamos a usar Effect run una vez que tengamos el valor en nuestro cuerpo. Estoy hablando de este cuerpo que hemos definido en nuestros posts ly dot js file. Tenemos el cuerpo. Entonces cuerpo. De esta manera podremos poblar el valor del cuerpo en un área de texto aquí, lo que vamos a tener cuerpo, vale. Vamos a tener onchange. Tendrá un conjunto de eventos, texto del cuerpo, punto, objetivo, punto, valor. Entonces vamos a tener dos botones. El nombre del botón será como guardar y cancelar. Por usuario tiene opción de guardar la publicación y también puede cancelar el proceso de actualización. Por lo que vamos a tener que botonar con siete cancelar. Voy a usar tu espacio. Agreguemos que vamos a tener modelo de talla. ¿ De acuerdo? Voy a tener algún margen de alicatado, margen superior cinco a la izquierda. Voy a dar margen izquierdo cinco. Entre este espacio, vamos a tener nuestros dos botones. Tipo de botón, primario. Vamos a tener una mesa, ¿de acuerdo? Se va a tener otro botón que será el cáncer. Si haces clic en la cancelación, básicamente saldrás del Modo Editar. Si hace clic en el botón Cancelar, será sólo el botón normal. En primer lugar, puedes comprobar éste si somos capaces de poblar el valor corporal del blog en un área de texto o no al hacer clic en el botón Editar. Vamos a refrescar este. Enfrentemos el post con ID tres. Demos clic en editar. Por lo que somos capaces de publicar el valor corporal de bloguear un área de texto. Esta cosa, no queremos eso. De acuerdo, vamos al Código VS. Lo que podemos hacer por aquí. Para que podamos revisar aquí como todo este espacio. Podemos consultar aquí como si te encuentras, si no estás en modo de edición. Entonces en ese caso, sólo queríamos este botón editar y eliminar. Vamos a cortar este. Vamos al navegador. Diferenciar. Vamos a llenar el puesto. Ahora tenemos estos dos botones. Y una vez que haces clic en el botón Editar, eso fue, ahora estás en modo de edición. Entonces ese caso no quiero que muestre esos dos botones. Una vez que el usuario haga clic en guardar o cancelar, entonces estos dos botones se mostrarán por aquí. 18. Dispatch de PUT createAsyncThunk acción para actualizar: Hasta el momento, vamos a tener el método OnClick. Aquí. Lo vamos a despachar a la acción. Con feo se utiliza para actualizar el puerto de bloque único con valor de cuerpo. ¿ De acuerdo? Entonces aquí vamos a despachar una acción que hemos creado en nuestro post slash dot js archivo. Por lo que tenemos que pasar como ID, post ID. También vamos a enviar el título, el mismo título que vamos a enviar porque no estamos editando el título. Estamos actualizando sólo el valor corporal del blog y el cuerpo. Vamos a enviar temperatura corporal. Este valor sólo estamos cambiando. Si hace clic en el título. Por lo que tenemos que detener básicamente el proceso de actualización. Entonces en general aquí saldrá del modo de edición. Por lo que en ese caso también, tenemos que despachar una acción. Vamos a tener el método OnClick aquí de nuevo. Vamos a despachar, despachar. En ese caso, será lo falso. Aquí también, tenemos que despachar una acción más. Despacho editar. Una vez que haga clic en la edición, queríamos básicamente salir del Modo Editar. Por lo que tenemos que despachar también el año a la fecha en GitHub actualizando el valor corporal de una sola entrada de blog. Aquí vamos a volver a trazar el edit false. ¿ De acuerdo? Y después de esto, tenemos que básicamente hacer este cuerpo para imitar. Aquí también, podemos pasar el cuerpo al infinito. Aquí estamos consiguiendo algunos. Entonces será coma. Así que guardemos este archivo. Y vamos al navegador. Refresca éste. Vamos a empezar desde cero. Enfrentemos el blog. Espere en el ID cinco. Ahora, hagamos click en Editar. Ahora estamos en modo de edición. Y si dio prueba, no podemos actualizar el valor. Entonces mecanografiar no está funcionando aquí. Déjame ver lo que está pasando. En el cambio. Lo que tenemos que hacer. Entonces algo va mal aquí, supongo. Entonces aquí tenemos que mostrar básicamente el cuerpo. Cuerpo. Entrémonos en el navegador y busquemos el tablero basado en la identificación de usuario cinco. Vamos a hacer clic en él, él. Ahora estamos en modo de edición. Ahora, vamos a actualizar este valor corporal de Blackboard. Vamos a darte un blog en vivo actualizado. Si hace clic en Guardar. Tenemos el valor corporal actualizado del blog aquí se puede ver que tenemos cuerpo como blog actualizado. Tenemos que realizar fielmente la operación de actualización también con el reduct a líquido y sea cual sea la actualización que estés haciendo aquí, no va a ahorrar en dB porque marcador de posición JSON no lo hace cualquier tipo de base de datos detrás del lugar de la escena. Si reformulas y enfrentas nuevo al poeta con el mismo ID como cuatro, obtendrás el viejo valor corporal de esta entrada de blog. 19. Aplicación de cócteles del proyecto 2: Bienvenido a esta sección. En esta sección en particular, vamos a construir nuestra aplicación con la ayuda de redact Toolkit utilizando create tasting. Esa es la aplicación de coctel, donde vamos a dejar que todo el cóctel haciendo API de terceros solicite usando crear cosa de degustación. Así que vamos a vender todos los cocteles en nuestra página principal. Como puedes ver que esta API de terceros devuelve alrededor de más de 20 cocteles. Se puede, se puede ver eso en la página principal. También puedes ver el cóctel individual para poder leer más información sobre ese cóctel en particular. Entonces, si haces clic en esto, hay botón de detalles. Navegarás hacia una sola página de cóctel donde podrás obtener más detalles sobre este es cóctel básico. Y si haces clic en Google, volverás a la página principal. Ahora también puedes configurarlo en un cóctel específico. Entonces te voy a dar una palabra clave como Adam. Se puede ver que con la palabra clave atom, está escrita para coctel. También hemos implementado esta funcionalidad de búsqueda en nuestra aplicación de coctelería solo con kit de herramientas redact. En general, esta aplicación la vamos a construir en esta sección, que el lector Toolkit utilizando crea un middleware de síntomas. Y antes de comenzar a construir esta aplicación, entenderemos poco sobre crear un middleware de think tank y que entenderemos en el siguiente video. Te veré en el siguiente video donde vamos a discutir sobre solo crear un middleware. Entonces comenzaremos a construir esta aplicación. 20. Aplicación de cócteles del proyecto 2: configuración: Ahora estoy en este directorio y voy a abrir un símbolo del sistema aquí. Así que vamos a abrir un símbolo del sistema. Y voy a crear un proyecto con el comando y px Create React app y el nombre del proyecto. El nombre del proyecto será kit de herramientas cocktail. Entonces voy a dar el nombre de este proyecto y voy a darle a Enter. Entonces creo que he usado el NPM. Entonces será n p x nada NPM. Entonces cambiemos este y vamos a darle a Enter. Y tardará alrededor de dos a 3 min en instalar toda la dependencia innecesaria. Y volveré una vez instalada toda la dependencia. Entonces parece que la configuración de nuestro proyecto ya está terminada. Entonces primero vamos a entrar en este directorio que es cóctel de kit de herramientas. Entonces vamos a entrar en este directorio. Y chicos, necesitamos instalar algunas dependencias. Antes de hacer npm start, instalemos esos paquetes. Los paquetes que vamos a trabajar como router React, dom. Necesitamos el router React para construir esta aplicación. React redux. Lo más importante es el kit de herramientas redox. ¿Bien? Redux, último kit de herramientas. ¿Pueden ustedes solo esto se requiere para construir esta aplicación con la ayuda del kit de herramientas redex Esperemos la instalación de este paquete y volveré una vez que se haya instalado todo el paquete. Chicos, son todos los paquetes que se instalaron. Ahora, voy a hacer y pagarme iniciar este proyecto que ya he abierto en el código de Visual Studio. Así que volvamos al Visual Studio Code. Y ahora puedes ver que nuestro proyecto compiló con éxito. Entonces entremos al navegador. Se puede ver que no tenemos ningún problema. Y vamos a golpear el club de lectura de diseño de materiales también en nuestra aplicación. Entonces vamos a usar este juego de mosaicos. Entonces qué voy a hacer, entonces lo que tienes que hacer, solo tienes que ir a este enlace y solo tienes que copiar esta parte. Vamos a usar esta configuración de estilo, el diseño de materiales Bootstrap five. Pero esta aplicación, y vamos a entrar en el código de Visual Studio. Así que he copiado esta hoja de estilo. Y en público index.html, tenemos que simplemente pegarlo aquí. ¿Bien? Así que terminamos con este material heredable que Bootstrap. 21. Aplicación de cócteles del proyecto 2: encabezado: Entonces ahora vamos a empezar a trabajar en el componente header. Así que hereda el archivo dot js lo que vamos a hacer. Por lo que tendrá un archivo muy básico contenido en el encabezado punto js archivo. Entonces estamos usando el estado hashtag del material para el n booster cinco. Entonces vamos a usar el nombre de la clase. Entonces el nombre de la clase con luz, navbar, luz. Entonces sé la luz. Y esto se arreglará. Parte superior. ¿Bien? Entonces esta clase ahora vamos a usar, entonces vamos a tener otro div con la clase de fluido contenedor. Entonces dentro de eso vamos a tener la palabra clave ban. Y vamos a tener otro platino que el nombre de la clase será ligero. Ellos span etiqueta y el nombre de la clase será navbar, marca. Y margen inferior cero a uno, t1, luego encabezado, título, luego cuadros de texto. ¿Bien? Entonces este será el nombre de clase para una etiqueta span. Y podemos dar tu vida, encuentra tu coctel favorito. ¿Bien? Entonces este es el contenido muy básico que tenemos en nuestro archivo hero dot js. ¿Bien? Y éste, y éste será el nav, ¿de acuerdo? No hacer. Hagamos una cadena a esta. Así que terminamos con este componente de encabezado. Por lo que esto solo debe ser el contenido requerido para el archivo header dot js. Y voy a pintar este bien nebuloso en el archivo CSS index dot. Voy a pagar al código CSS por este archivo CSS de punto índice. Y vamos a entrar en el app.js. App.js cinco minutos para traer el código VS del componente de encabezado automáticamente el código VS del componente de encabezado para este componente de encabezado. Y entremos al navegador y verifiquemos si este componente de encabezado está funcionando o no. Se puede ver que tenemos este bonito encabezado. Encuentra tu cóctel favorito. 22. Aplicación de cócteles del proyecto 2: configurar Redux-Toolkit: Ahora vamos a trabajar en la exhibición del cóctel. Entonces primero, vamos a configurar el kit de herramientas del lector en nuestra aplicación. Entonces chicos, vamos a configurar el kit de herramientas redact en nuestra aplicación. Entonces en vez de voltaje, vamos a tener otra carpeta que se llama features. ¿Bien? Y en teoría, el redux en esto, vamos a tener un archivo que es store dot js. Y en tercer lugar está la característica. Vamos a tener el archivo cocktail fly. ¿Bien? Ya que estamos trabajando con el cóctel en esta aplicación, el nombre del archivo será como rebanada de cóctel. Bien, entonces en las diapositivas de coctelería, vamos a hacer toda la solicitud asincrónica y actualizaremos la tienda. Bien, entonces primero, necesitamos traer crear diapositivas y crear un think tank a partir del kit de herramientas redux. Bien, vamos a traer esas cosas primero. Tenemos que traer crear diapositivas y crear cualquier cosa. Entonces en mayor kit de herramientas, los lectores pueden ser incluidos por defecto, y que les permiten realizar borrar lógica asíncrona antes de enviar el proceso, el desierto al reductor. Para el concreto particularmente irritante, son responsables de realizar tareas asincrónicas. Entonces es por eso que vamos a hacer para crearlos asíncronos para realizar las tareas asíncronas y crear diapositivas. Básicamente una función que acepta e inicialmente toma un objeto de función reductora y es un rayo. Y luego automáticamente genera una acción, creó un acento que correspondía al reductor y se quedó. Entonces, con la ayuda de retest toolkit, no tienes que crear básicamente una acción separada, action file action type reductor. Por lo que todo se generará automáticamente con la ayuda de diapositivas. Y escribamos toda la lógica asíncrona con la ayuda del kit de herramientas del lector. En concreto, vamos a buscar toda la lista de cócteles y mostrarla en la página principal. Entonces escribamos como dice el costo de exportación. Ok. Entonces básicamente se encargará de arreglar todos los cocteles. Con la ayuda de API, vamos a utilizar la calificación crediticia hecha. Y básicamente esto aceptará los tres parámetros que es un tipo de acento, que será la cadena, una función de devolución de llamada. Y luego opcional que es un objeto, ¿de acuerdo? Entonces este será, el tercer parámetro, será el objeto y que no es opcional. ¿Bien? Así que vamos a definirlo a diez tipo, que será la cadena. Entonces ya que estamos lidiando con el coctel, así que definamos como cocteles. Y esto va a ser como pitch. Cócteles de tono, ¿de acuerdo? ¿Cuáles cocteles? Y el segundo parámetro vamos a tener la función de devolución de llamada de luz. ¿Bien? Entonces esta función de devolución de llamada básicamente hará que la solicitud API. ¿Bien? Vamos a ser enormes, creo que aquí. Y para hacer la solicitud API, vamos a usar solamente el fago. Regresar h. vamos a pegar la API aquí. Yo sólo voy a pegar el API en este fago. Así que sólo voy a pegar la API aquí. Entonces esta APA que vamos a usar están consiguiendo todo el coctel. Así que básicamente esta API devolvió 25 cocteles, ¿de acuerdo? Alrededor del 25% de retorno. Para que veas que vuelve alrededor del 25 coctel en mi Cartero. Entonces entremos en el Código de Visual Studio y cuando se resuelva la promesa después de hacer las solicitudes API. Entonces vamos a manejar en el método den. Obtendremos la respuesta. Y esto será solo responder, Jason. ¿Bien? Chicos, parámetro en el crear está en agradecimiento no es una opción y ya terminamos con la primera acción que se encarga de conseguir todos los cocteles de esta APA. Entonces ahora esto crea un think tank con Italia generó tres ciclo de vida prometido que está pendiente, cumplido, y reflejó este ciclo de vida que vamos a manejar en el reductor extra. Así que básicamente extra reductor manejar la solicitud asíncrona. ¿Bien? Vamos a manejar todos estos tres ciclo de vida que es gasto cumplido y rechazado. Vamos a manejar en el reductor extra, que será el encargado de manejar la solicitud asincrónica. Entonces vamos a usar las diapositivas create para ese propósito solamente. Entonces ahora lo que podemos hacer aquí, const cocktail slide. Y vamos a usar todavía crear diapositivas. Entonces esto básicamente aceptará, vuela nombre, así que nombre leve se le puede dar como coctel solamente, cocteles. Y lo segundo lo intentará el estado inicial. Entonces hay que defender inicialmente, inicialmente recto nuestra aplicación será como cocteles, el temario y en PTA. Y también vamos a tomar un solo coctel. También será la única carga que vamos a usar. Entonces este será el falso inicialmente y el error también vamos a usar este será el nulo. Entonces hemos definido la tasa inicial. La tercera cosa que vamos a definir es ese reductor extra. Reductor, vamos a manejar los tres ciclos de vida prometidos que se generan al crear un think tank que está pendiente, cumplido y rechazado. Entonces vamos a usar tu pierna, que cocteles y pintura. Y después de eso, vamos a tener una acción estatal. Y esto será como estado no cargando para gobernar. ¿Bien? Entonces pintar significa que nuestros datos están en camino. No hemos recibido los datos. Entonces en la UAB, no hemos recibido los datos. Entonces mientras tanto, mostraremos algún tipo de spinner. Entonces por eso estoy usando carga amarilla. Bien. Y se cumplió. Así que fh.com, así que el lote de coctelería fago cumplió. Y va a tener el estado, la acción estatal. Y ahora lo que vamos a hacer cocteles estatales y punto. Y podemos usar aquí acción ligera, no carga útil. Entonces esto será ligero acento punto carga útil y bebidas. Entonces, ¿por qué estamos usando como x n punto carga útil punto bebida. Si vuelves al Pokémon, puedes ver que aquí tenemos que apuntar a las bebidas, bien, entonces obtendrás todo este cóctel. Entonces es por eso que estamos usando aquí x n punto de carga útil punto bebidas. Espero que entiendas el punto ahora. Y si la carga de puntos theta1 también será falsa una vez que hayamos recibido los datos en nuestra interfaz de usuario. Y definamos también a los rechazados. También hay que dar la coma aquí. De lo contrario, obtendrá este encabezado y este será el rechazado. ¿Bien? En ese caso, solo puedes tener la carga útil del punto de acción. Y este será el error de estado. ¿Bien? Ahora tenemos que exportar éste. Así que vamos a exportar por defecto, reductor de punto de rebanada de cóctel. Ahora, vamos a configurar básicamente la tienda con kit de herramientas 3D es muy fácil de configurar la tienda. Solo se requieren dos o tres líneas de código para configurar este recorrido con el kit de herramientas de predicción codo. Necesitamos traer la configuración desde el kit de herramientas de escritorio. Así configuró la restauración. Y vamos a importar reductor de coctelería. Problema reductor. Destacados. Cóctel vuela, bien. Y vamos a exportar default. Tienda proporcionada. Y podemos alcanzar el valor clave para nuestros reductores ya dichos. Y de hecho que vamos a definir la clave. Entonces voy a definir la app y tierno productor de coctelería. Con la ayuda de app key, vamos al estado, lo que sea que tengamos en nuestra tienda. Entonces, sea cual sea el estado que hemos definido aquí en nuestro tobogán de cóctel, vamos a acceder a todo esto, al estado desde una tienda usando el valor clave. ¿Bien? Ahora tenemos que hacer algún destacamento menor en nuestro archivo index.js. Entonces primero, tenemos que traer la tienda. Además, necesitamos traer lo proporcionado, proporcionado desde React redux. Así que vamos a traer lo proporcionado de React redux. Entonces del reactor te patas, necesitamos proveedor. Y lo que podemos hacer aquí, proveedor, y vamos a cortar toda esta parte. Y vamos a pegarlo aquí. Y vamos a definir la tienda y solo encontraremos la tienda. Dicen que básicamente nuestra aplicación React puede acceder a ellos, se borra que hemos definido en nuestro segmento de contenido. Bien, chicos, ahora tenemos configurados los kits de herramientas redact que está completamente en nuestra aplicación. Y también puedes verificar éste en el navegador también. Entonces vayamos al navegador, actualicemos y abramos la herramienta dev. Para que puedas ver la fecha aquí. Este es el estado inicial de nuestra aplicación. Entonces tenemos cocteles con la entrada t en un cóctel o un error de falla de carga. Esto es lo mismo inicialmente que hemos definido en nuestro, que hemos definido en nuestro archivo cocktail slide dot js, que hemos configurado con éxito el kit de herramientas redact en nuestra aplicación. 23. Aplicación de cócteles del proyecto 2: componente de búsqueda: Entonces chicos, lo siguiente que vamos a trabajar en el campo de entrada de búsqueda. Así que entremos en el código de Visual Studio. Así que vamos a crear un archivo aquí. Se puede meter en la cárcel. Y también vamos a tener un archivo CSS. Pero el tercer insumo también. ¿Bien? Y vamos a generar un fragmento aquí primero. Y después de eso, vamos a tener algunos ganchos. Entonces vamos a necesitar este gancho en nuestro archivo de entrada de búsqueda. Entonces vamos a utilizar un usuario de aquí. Y después de eso, también necesitamos traer el archivo CSS para esta entrada de búsqueda. Así que vamos a traer eso también. Eso es CSS de punto de entrada. Y voy a pagar el código CSS para este huracán put dot archivo CSS. Así que chicos, acabo de recoger el código CSS para este archivo CSS de punto de entrada de búsqueda. Puedes copiar todo esto aquí, puntaje de prueba si quisieras. Bien, al hacer una pausa en este video, espero que tengan una copia. Yo sólo voy a golpear a Export. Y vamos a entrar en este hidrógeno poner el archivo dot js. Y aquí, lo que podemos hacer a cambio, no vamos a usar la etiqueta div. Y vas a tener el nombre de la clase aquí. El nombre de la clase será la sección. Eso está bien. Entonces vamos a tener otro nombre de clase con el formulario. Entonces vamos a ser la etiqueta de formulario y el nombre de la clase será la forma más justa. No necesitamos acción, forma de verbo. E informar dónde vamos a tener algún día. El nombre de la clase, control de formulario. ¿Bien? Y de hecho que vamos a tener una etiqueta. Así que vamos a movernos con el nombre. Te podemos dar, como ese coctel. ¿Bien? Y vamos a tener entrada aquí una. Entonces esta entrada, vamos a tener el tipo. Entonces tipo será el nombre de solo texto. Sólo podemos dar nombre. Puedes dar identificación aquí. Serán sólo el nombre. Y usemos el, use el representante aquí también. Entonces const value, usa ahí. Y vamos a usar aquí, ¿de acuerdo? Valor de compensación. Entonces buscando valor, puedes dar aquí. Y el resto de la lógica vamos a escribir más adelante una vez que nos quede en toda la lista de coctelería. ¿Bien? Entonces la tasa de la lógica para este archivo de entrada de búsqueda lo escribiremos más tarde, ¿de acuerdo? Una vez que hayas exhibido toda la fecha del cóctel en la página principal. Entonces qué podemos hacer aquí a partir de ahora, así que ve al archivo index.js, ingestión, trae el componente de entrada de búsqueda, ¿bien? Y vamos a quitar esta. No necesitamos este. Y entremos en el navegador. Y vamos a ir a la página principal. Ahora. Entonces ahora puedes ver que tenemos este campo de entrada de búsqueda y luego escribiremos la lógica una vez que, una vez que mostramos toda la lista de cócteles en esta página de inicio, bien. 24. Aplicación de cócteles del proyecto 2: muestra cócteles con acciones: En lo siguiente estaremos trabajando en levantar todo el elevador de cócteles en nuestra página de inicio. Entonces vamos a definir el componente aquí. Así que definamos aquí un componente para mostrar todo el cóctel que queda en nuestra página de inicio. El nombre del componente será como list dot js. Y vamos a generar este fragmento primero. De react, necesitamos algunos ganchos como el estado UC y el efecto de uso. ¿Y del reactor cayó eso? Por lo que necesitamos que hayas seleccionado y usado en despacho. Has seleccionado y utilizas despacho de reactivado. Así que vamos a traer esas cosas también. Selector usado. Y también vas a necesitar ese axón. Eso es cócteles de fagos. De nuestra rebanada de cóctel. Tenemos que volver a la carpeta redact, luego carpeta de características, luego ven, luego rebanada de cóctel. Y tenemos que traer los cocteles de fagos. Y también vamos a usar el enlace del router React hacia abajo. Vamos a traer el enlace también. React router dom. Y primero, lo que vamos a hacer, primero, vamos a extraer el estado de nuestra tienda con la ayuda de ustedes seleccionados. Usted seleccionó. Podemos usar todavía para extraer dictado que hemos definido en nuestro código. Podemos hacer algo así. No lo hizo, porque nuestro coctel para hacerlo está registrado con la clave de la app. Si vuelves al archivo punto js de la tienda. Bien, así que con la ayuda de esta clave de aplicación, podemos extraer el estado en el que hemos definido nuestras diapositivas de cócteles. que podamos activar el estado, así podremos extraer todos estos estados que hemos definido en nuestros cocteles. Los toboganes de cóctel con el codo tienen en nuestro plato coctelero punto js file. Para levantar el cóctel. Vamos a necesitar cócteles. ¿Bien? Y también vamos a necesitar de carga. Y tenemos que definir cuando un estado todavía. Entonces eso será como cóctel modificado. ¿Bien? Así establecer cóctel modificado. Esta será la entrada D. Y vamos a almacenar también la referencia de enorme despacho Intuit variable despacho. Porque también vamos a necesitar despachar este axón de cócteles de fago. Y vamos a despachar en esta etapa bloque por dentro son enormes. Entonces aquí vamos a usar el efecto Hughes . Esta será la entrada t. Eso significa que la vamos a mostrar en la carga inicial de la aplicación. Siempre que el usuario cargue la aplicación, vamos a despachar estos cócteles de borde, ¿de acuerdo? Y también podemos verificar éste ya sea que esté funcionando o no. Así que vamos a darte una lista de cócteles ligeros de lectura. Bien. Así que tenemos que traer esta lista de cócteles aquí también en nuestra carpeta Páginas. Bien, entonces index.js, tenemos que traer la lista de coctelería. Así que ustedes podrían importar automáticamente ese componente para mí. Y vamos al navegador. Y ahora se puede ver que tenemos todos los cocteles. Así que tenemos alrededor de 25 cocteles. Se puede ver que hemos comprado todos los cocteles. Así que volvamos al Visual Studio Code. Y ahora lo que tenemos que hacer, primero, necesitamos escribir un efecto de uso más. Porque aquí vamos a cambiar algunos nombres. Para que veas que aquí tenemos algún nombre raro. ID de bebida, tenemos identificación, bebida, chicos. Un par de propiedad objeto. Vamos a renombrar. Bien. Entonces hagámoslo también. Entonces vamos a tener uno más usuarios que, y por eso he definido aquí el estado coctelero modificado aquí. Este usuario solo corra una vez que tengamos la hora del coctel para almacenar. Este enorme efecto también se ejecutará si estos cócteles tuvieron un buen cambio. ¿Bien? Entonces podemos consultar aquí, pero si tenemos los cocteles, entonces podemos tomar como nuevos cócteles. Y podemos simplemente mapear los cocteles ya que es una variedad de objetos que conseguirán pueden usar aquí. Entonces podemos usar la función map. Y a partir del artículo vamos a detectarle parte de la propiedad. La propiedad luz, bebida ordenada. Bien. Entonces sí bebí. Podemos hacer textura, luego bebida STR, luego bebida FTR, Tom, luego un TR. Así que voy a ir a copiar la cosa. Entonces este de aquí. ¿Bien? Y clase STR. Esta es la última propiedad que necesitamos. Y después de eso, vamos a cambiar el nombre esta propiedad porque esto se ve un poco raro. ¿Bien? Entonces este será el nombre del anillo agregado ligero. Podemos tener como imagen de bebida FTR. Entonces esto será como STR, bebe, entra jala. Este será el alcohólico STR. Y me alegro de que esto sea STR y vidrio. Se puede ver que estos todos los nombres estamos en. Entonces por eso, por eso he renombrado toda esta propiedad. Así podemos usar como id name image1 para vidrio. Entonces podemos exponer el cóctel modificado a los nuevos cócteles. Bien. Entonces dentro de lo demás, si no tenemos coctel entonces que el proctor modificado hasta el infinito. ¿Bien? Y usemos también la carga también. Entonces, si tienes la carga, eso significa que nuestros datos están en camino. No hemos recibido esos datos RTI hasta ahora. Hasta ese momento, podemos mostrar la carga. Bien, entonces algún tipo de spinner podemos mostrar retorno. Podemos tener aquí en vivo con el nombre de la clase div pintor. Puedo crecer. Bien. Esto va a estar teniendo el papel. Aquí estamos usando básicamente el archivo bootstrap de Material Design, ¿de acuerdo? Y podemos tener una etiqueta span con el nombre de la clase visualmente oculto. ¿Bien? Y podemos tener aquí como cargando y dentro de la devolución. Y podemos eliminar esta. Esto va a tener un contenedor LastName. Entonces vamos a tener otro nombre de clase. Entonces vamos a usar material hoy después del nombre de clase aquí. Entonces fila, puedo llamar columnas. Anexo uno, luego fila llama md guión tres, luego G guión cuatro. Y podemos usar aquí estos cócteles modificados. Puedes usar tu mapa. ¿Bien? Podemos simplemente capturar toda esta propiedad que tenemos renombrar todavía id, name, image y Fogler de item. Entonces artículo y solo podemos tomar una foto id, nombre, imagen, vidrio. Y entonces podemos tener una vuelta aquí. Y esto dentro de retorno, esto va a tener un nombre de clase con la columna. Bien. Y tenemos que aportar la clave. Entonces él será el ID. Y entonces vamos a tener el platino con el auto. Entonces el borde del auto pasa a atar eso. Vamos a tener en la imagen con la tarjeta de nombre de clase, guión IMG arriba. ¿Bien? Y vamos a definir la fuente. Entonces ya tenemos la estructura, la imagen del ítem, y podemos tener el nombre. ¿Bien? Y después de eso, vamos a tener el div con el cuerpo de la tarjeta de nombre de clase. ¿Bien? Y vamos a usar el teselas del Atlántico, así que el texto distribuido se alinea a la izquierda, bien. Y dentro del div, vamos a tener la etiqueta h5 con el nombre de la clase, el título de la tarjeta, bien. Y este título les va a tener nombre. ¿Bien? Y vamos a volver a copiar una vez más. Y este será el borde fértil. Y esta será la copa. Y vamos a tener una etiqueta p con el texto de la tarjeta de nombre de la clase, ¿de acuerdo? Y de hecho que vamos a tener en la info, ¿de acuerdo? Y después de eso, vamos a tener un botón de detalle. Vamos a usar link. Y vamos a tener un botón, botón con el nombre de la clase btn. Btn en cuatro, ¿de acuerdo? Y esto va a tener un detalle. Y esto básicamente navegará hacia la página del cóctel único. Si por lo general te interesa ver el detalle sobre ese cóctel en particular que enrutó ya registrado en nuestro archivo app.js. Entonces tenemos pediátrica específica cualquiera de las dos rutas aquí, así que ya hemos rechazado esta ruta. Eso lo puedes ver en nuestro archivo app.js, coctel, ¿bien? Y tenemos que especificar el ID. Entonces esta es una lista de cócteles. Podemos dar su identificación. Bien. Creo que ya terminamos. Bien. Y podemos verificar éste ya sea que esté funcionando o no. Entonces entremos al navegador. Así que ahora puedes ver ahí somos capaces exhibir todo el coctel que en nuestra Página principal. Bien. Entonces esto está funcionando bien. 25. Aplicación de cócteles del proyecto 2: acción para escabullirse: La siguiente característica vamos a trabajar en la exhibición de un solo elevador de cócteles en la ruta del cóctel. Así que una vez que el usuario haga clic en el detalle, así lo hará, así todos los detalles sobre ese cóctel en particular. Entonces esta cosa vamos a dejar que volvamos al código de Visual Studio. Entonces, para poder exhibir la información sobre el cóctel único, tenemos que trabajar en este archivo. ¿Bien? Entonces antes de trabajar en este archivo, entonces primero tenemos que trabajar en la rebanada de cóctel. Entonces aquí primero tenemos que escribir la acción. ¿Qué podemos hacer aquí? Así que sólo voy a copiar y pegar éste. Porque solo esta cosa, vamos a necesitar cambiar esta parte de APA, ¿de acuerdo? Sólo voy a pegar la API que se requiere aquí. Entonces el TPA vamos a usar perfeccionando el cóctel único basado en el ID. Primero, renombrar todo esto, ¿de acuerdo? Este será el primer cóctel sencillo, y cambiemos el nombre del mismo tipo también. Vamos a recibir este id de nuestro componente, por lo que menos que este detector, la luz ideal de esta manera. Y tenemos que definir los tres ciclos de vida prometidos para este Ax y Ay también. Así que voy a copiar todo esto y pegarlo aquí. Y tenemos que renombrarle este. Entonces este será el cóctel único de fagos. Y en ese caso también hay que apuntar a sus bebidas, bien. Y no te olvides de cambiar esta. Así que esta vez estamos tratando con un solo cóctel, ¿de acuerdo? Por lo que esta área solo contendrá un solo objeto porque esta será la respuesta PER para mostrar la información del cóctel único. ¿Bien? Así que de nuevo, hay que apuntar a las bebidas de punto de carga útil de punto de acento. Bien. Así que terminamos con la lógica en nuestro contexto, leve o GAS para ir a buscar el cóctel sencillo. 26. Aplicación de cócteles del proyecto 2: página de detalles: Así que vamos a entrar en este único archivo cocktail dot js. En este archivo primero necesitamos traer algún gancho de nuevo, como lo repites. Usa el efecto, ¿de acuerdo? Y también queremos necesitar enlace del router React hacia abajo. Y también vamos a necesitar usar mejor usar la permanente porque vamos, vamos a necesitar la identificación. Así que una vez que el usuario haga clic en los detalles, así que si haces clic en detalle, así podrás ver que necesitamos este ID, ¿bien? Así que este hardy lo podemos conseguir con la ayuda de, uh, padres. Y también necesitamos esa acción que acabamos de crear en nuestras diapositivas de cócteles. Entonces tenemos que ir a la carpeta redux, diez características, luego rebanada de cóctel. Y podemos traer ese cóctel único de borde. Y también vamos a necesitar selector usado y usar despacho de React redux. Entonces desde React redux, necesitamos usar el electoral, usar despacho. Despacho y seleccionaste. Y nuevamente, necesito el coctel y la carga en parte de nuestra restauración con el codo, usamos selector. Así que el estado. Y con la ayuda de theta dot AB key, podemos extraer el cóctel y el valor del estado de carga. Y nuevamente, tenemos que volver a definir esta cosa. Entonces sólo voy a copiar esta, esta parte y sólo pegarla aquí. Porque de nuevo, necesitamos cambiar el nombre de la propiedad existente del cóctel porque los que se llaman Luke, un poco raros. Entonces tenemos que renombrar algunas de las propiedades existentes de este cóctel. Para que veas que tenemos esto todo lo que somos ahora. Simplemente vamos a renombrar hum, de la propiedad existente de este cóctel que vamos a tener de nuevo, este cóctel modificado. ¿Bien? Y hemos almacenado la referencia de Eurydice pet en una variable de despacho. Y después de eso, tenemos que disipar este cóctel sencillo de página. ¿Bien? Entonces este enorme efecto ya lo es, y una vez que tenemos el ID, hasta el momento ID, lo que podemos hacer, podemos detectar que el id con la ayuda del uso. Así que sea cual sea la idea que tengamos en una URL, podemos detectar donde el id con la ayuda de enorme patrón y esta enorme mascota solo se ejecutan una vez que tenemos el ID. Entonces podemos despachar un solo coctel y solo podemos proporcionar la identificación, ¿de acuerdo? Y puedes ver que esa idea está obteniendo gran textura aquí en nuestra primera acción de cóctel sencillo. Así que volvamos al archivo single cocktail dot js. Y nuevamente, tenemos que escribir un efecto de uso más. Este enorme efecto sólo se ejecutará cuando tengamos el ID. Y luego, bien, y aquí de nuevo vamos a comprobar la duración del cóctel. ¿Bien? Entonces, si tienes algún valor, eso significa que vamos a tomar la longitud del cóctel. Y si es mayor que cero, y eso significa que tenemos el coctel, coctel en nuestra zona objeto. Y después de eso, vamos a deshacerte de la estructura. Algo de la cosa. Vamos a dictar cómo arriba la propiedad a partir de este cóctel, esta zona de coctelería con Italia sostiene el área única de objeto con, porque esto, porque este error de cóctel solo será responsable mostrar la información del cóctel único. Por lo que esto solo contendrá un solo objeto de área. Entonces este coctel, podemos llegar al índice cero porque aguantará, porque contendrá sólo la única área del objeto. Y podemos fotografiar la cosa como STR, beber. ¿Bien? Y podemos cambiarle el nombre a esto por nombre. Bien. Entonces igualmente, voy a hacer renombrados, tarareado , de la propiedad adjetiva. ¿Bien? Así que voy a pagar todas esas cosas aquí. Voy a cambiar el nombre de toda la propiedad como FTR, beber eso, beber. Al correo electrónico directamente o alcohólico a info. Entonces todo esto todo el objeto de propiedad existente un día llamado aquí. Y también vamos a usar este ingrediente. Hasta ahora ingrediente, lo que tenemos que hacer. Entonces tenemos que definir un nuevo ingrediente. Entonces ingrediente, ingredientes. Y esta será la matriz. Y dentro de eso vamos a tener todos los ingredientes. ¿Bien? Entonces los ingredientes STR como bien, voy a definir uno por uno. ¿Bien? Y después de eso, vamos a tener en el nuevo coctel, bien, llamado coctel nuevo a tener el nombre imagen, imagen corporal en categoría completa. Entonces pongamos en esa categoría. Después de eso, vamos a tener en el vaso. En vaso, luego instrucciones, ingredientes. Bien. Entonces podemos hacer así, modificar coctel a nuevo coctel. Y si no tienes los cocteles, Entonces solo hazlo que modifique coctel a nulo. ¿Bien? Entonces este enorme efecto solo se ejecuta una vez que tenemos id y un poco de información sobre cócteles, ¿de acuerdo? Y aquí tenemos que comprobar. Si no tenemos ningún cóctel modificar. Eso significa que podemos regresar. Hola. Agradable etiquetar aquí. Para con la sección de nombre de clase, guión, título. Y podemos dar alguna descripción de la vida, no hay coctel para exhibir. Lo que podemos hacer aquí. Así que sólo podemos eliminar esta. No necesitamos este. Y por dentro vamos a regresar. De lo contrario. Terminemos la estructura del cóctel modificado. De coctel modificado, necesitamos nombre, imagen, categoría en vaso lleno. Instrucciones e ingredientes. ¿Bien? Y aquí podemos regresar, devolver que podemos usar fragmento primero. Y podemos comprobar si hay una carga. Entonces voy a exhibir el spinner. ¿Bien? Así que vamos a usar el div con el nombre de clase spinner grow. Y va a tener un papel con este estatus. ¿Bien? Y dentro de eso, vamos a usar la etiqueta span con el nombre de la clase con Willie oculto. Te podemos dar una recarga en vivo. Los tres puntos. Aquí, vamos a mostrar toda la información sobre ese cóctel en particular, en particular. Ahora, vamos a tener la etiqueta de sección con el nombre de la clase, ficción, cóctel, guión, elección, y todo el estilo con este nombre de clase que ya he definido en nuestro archivo CSS de punto índice. ¿Bien? Para que veas que no tienes que preocuparte por este archivo CSS porque ya he proporcionado el enlace para todo el archivo CSS que he usado en esta aplicación. Dentro de esto, vamos a tener cinco eslabones. ¿Bien? Entonces este enlace básicamente tiene el botón Volver atrás. Y queremos usar botón, color de botón. Y vamos a usar algún botón con el nombre de clase btn, guión peligro. Y podemos darle un poco de estilo en línea. Entonces margen, arriba. Y este será el valor del botón, será la vuelta atrás. ¿Bien? Y después de este enlace, vamos a tener la etiqueta H2 con el nombre de la clase. Título de la sección. Bien. Bueno, ahí va a tener en el nombre y vamos a tener otro nombre de clase con la bebida. En emplumado. Voy a usar etiqueta de imagen, fuente. Vamos a usar el correo electrónico aquí solamente. En adulto. Vamos a usar nombre. ¿Bien? Entonces, entonces vamos a tener el div con el nombre de la clase y traer info. Entonces vamos a usar la etiqueta p. Entonces vamos a usar una etiqueta span con el nombre de la clase, bebida, abro datos. Y es un poco el nombre. Bien. Y me alegro de que hayamos ido a tener el nombre. Entonces esta cosa va a ser repetitiva. Así que sólo voy a copiar esta etiqueta p un par de veces. Así que vamos a copiar por el tiempo. Por lo que esta será la categoría. ¿Bien? Por lo que podemos usar aquí categoría. Este será el insumo. Entonces esta será la informalmente y esta será la copa. Demos vidrio aquí. Y después de eso, vamos a tener la tracción también. Esta será la instrucción. ¿Bien? Y en general, vamos a exhibir los ingredientes, ¿bien? Entonces esto va a ser un poco diferentes ingredientes en ingredientes, OK. Y vamos a quitar esta. Porque ingredientes, teniendo eso. Bien, se puede ver que tenemos ingrediente en la matriz. Entonces, ¿qué podemos hacer aquí, así podemos usar aquí para mapear, bien? Entonces ingredientes, no mapa. Podemos tener ítem e índice. Y sólo podemos devolver el artículo. Entonces vamos a usar el tiempo tanh. La clave. Si no tienes ningún ingrediente, sí, sólo voy a devolver el nulo. Y sin embargo voy a exhibir todos los ingredientes en este tiempo. Así que podemos usar este artículo y tienes que proporcionar la clave también. Así que clave aquí voy a usar el en profundidad. ¿Bien? Entonces creo que ya casi terminé con este cóctel sencillo y creo que no estamos usando la imagen. Entonces, ¿dónde está la etiqueta de imagen? Bien, entonces aquí va a ser la imagen. Entonces, actualicemos este. Entonces ya terminamos con este cóctel sencillo, y vayamos al navegador y verifiquemos si esto está funcionando o no. Así que vamos a hacer clic en el detalle. Bien, Así que hemos comprado esto no se puede leer propiedad de undefined. ¿Bien? Entonces, qué podemos hacer aquí. Así que entremos en el navegador. Vamos, vamos a la obligación religiosa primero, y vamos a hacer clic en el detalle. Entonces ahora puedes ver que hemos conseguido estos ingredientes, OK. Y veamos también los demás ingredientes. Por lo que también puedes hacer click en éste. Puedes ver que tenemos esta categoría de nombre en para vaso, en ingredientes de instrucción, toda esta información sobre este cóctel en particular, ¿bien? 27. Aplicación de cócteles del proyecto 2: búsqueda de cócteles: Entonces, lo siguiente que vamos a trabajar en el hidrógeno, el cóctel y las guías. Ya hemos hecho un poco de trabajo en nuestro componente de entrada de búsqueda. Así que vamos a completar ese componente de entrada de búsqueda. Así que volvamos al código de Visual Studio. Entonces primero, vamos a necesitar escribir la acción en nuestros cocktails live dot js file. Entonces copiemos esta. Cambiemos el nombre de éste. Entonces será el cuadro de búsqueda fetch. Y cambiemos el nombre de éste. Bien, también tenemos que cambiar esta API. Entonces esta vez vamos a recuperar el tercer componente. Entonces busca texto y tenemos que cambiar esta APA. Sólo voy a pegar la API que se requiere para buscar los cócteles. Entonces vamos a usar este API, hidrógeno, el cóctel. Y tenemos que definir nuevamente tres promesas de ciclo de vida en nuestro reductor. Entonces sólo voy a copiar estos tres. ¿Bien? Y vamos a pegarlo aquí. Y cambiemos el nombre a este cóctel de fagos, ¿de acuerdo? Bien. Y vamos a actualizar el estado de los cocteles, ¿de acuerdo? Porque puede, porque puede resultar más de un cóctel con este valor jerárquico. ¿Bien? Entonces vamos a usar cócteles JD dot y tenemos que apuntar de nuevo a que solo beba. ¿Bien? Así que terminamos con la lógica en nuestra diapositiva de cócteles, archivo dot js. Así que vamos a entrar en el archivo de entrada de búsqueda punto js. Dentro de esto, vamos a haber tocado Font submit. Al presentar. Vas a tener en el mango cumbre. Y definamos rápidamente este mango. Y este mango algunos recibirán el evento. Esto va a tener solo punto E evitar el default, ¿de acuerdo? Y tenemos que definir el onchange. Sin cambios tendrá el cambio de mango para encontrar este también. Entonces manejar el cambio y este cambio de mango y este cambio manejado. Vamos a tener esta estrategia. Es decir, ya que estamos usando al usuario. Así podemos obtener el valor como 30 valor valor punto actual valor. ¿Bien? Y tenemos que traer esa primera acción que hemos creado en nuestro archivo de diapositivas de cóctel punto js. Entonces tenemos que volver a las características de la carpeta redact, coctelería vida, y tenemos que traer esa acción, que buscan coctel. Y también vamos a necesitar aquí. Despacharás desde nuestro React redux para menospreciar la acción. Primero antes de despachar la acción, llevó a almacenar la referencia de la enorme disparidad en la variable despacho. Y aquí podemos despachar, bien. Así que página y podemos disipar tocados. Bien. Y también tenemos que hacer un poco más de inversión en nuestro archivo index.js. Y llamamos en algún momento si no consigues el cóctel aportando el valor a la búsqueda en pisadas, entonces en ese caso, tienes que mostrar algún contenido. ¿Bien? Entonces primero vamos al archivo index.js. Archivo Index.js, donde estamos levantando toda la lista de cócteles. Entonces tenemos que volver a este componente de lista de coctelería. Y aquí tenemos que comprobar, como si no tuviéramos los cocteles. ¿Bien? Entonces simplemente regresa con algunos métodos. Como el método será como no, coincide con tus criterios, ¿de acuerdo? Y podemos verificar éste ya sea que esté funcionando o no. Entonces volvamos al navegador. Refresca esta aplicación. Pensemos que te dio en el cóctel nombre Adam. Se puede ver que sólo tenemos el cóctel con la palabra clave Adam. Y también puedes ver la información sobre este cóctel en particular. Y volver atrás también está funcionando. 28. Project 3 Carrito de compras - Demo de aplicaciones: Hola a todos y bienvenidos a esta sección en la que vamos a aprender cómo podemos realizar todo tipo de operación de carrito de compras con el kit de herramientas del lector en la aplicación React. Y también vamos a usar Redux persisten aquí con kit de herramientas 3D para persistir el valor del artículo del carrito de compras. Siempre que replantees la aplicación, el valor será per se. Así que vamos a tener una rápida demostración de esta aplicación, que vamos a trabajar en esta sección. Entonces este es nuestro carrito de compras. Y si aumentas la cantidad, así podrás ver que el total se está actualizando por aquí. Y la comunidad en nuestro cartílago también se actualiza. Entonces en todas partes se actualiza. Siempre que actualices la cantidad y disminuyas la cantidad. Entonces esto también está funcionando. Puedes ver que nuestra cantidad de tarjetas se está actualizando y esta no deseada también se está actualizando. También puedes retirar el producto del carrito de compras. Entonces, para hacer clic en este icono, este artículo se eliminará de nuestro carrito de compras. Y el monto total se actualizará, y la cantidad también se actualizará. También puedes eliminar el artículo de esta tarjeta si vuelves a hacer clic en esta, porque solo tenemos una cantidad. Y si vuelves a hacer clic en esta flecha hacia abajo, esta manera también, se va a quitar de este auto se lo llevó. Y también puedes borrar el carrito haciendo clic en este botón. Puedes ver que ahora nuestro soft codificó la entrada t. y si quisieras volver a obtener todo el ítem, entonces tu proyecto da click en este botón. Y nuevamente, se puede realizar la misma operación, como aumentar la cantidad o disminuir la cantidad. Y todo este valor se actualizará. Entonces vamos a escribir una reacción redox diferente, diferente con la ayuda del kit de herramientas de Frieda. Y también vamos a persistir toda la tarjeta de compras. Entonces si actualizas esta aplicación, para que veas que nuestro carrito de compras se persiste por aquí, así sucesivamente persistiendo, estamos usando porcentaje Redux. Entonces también vas a aprender a usar paradox persisten con el kit de herramientas del editor en esta aplicación React. Entonces esta es la aplicación general que vamos a construir en esta sección. Entonces te voy a ver en el siguiente video donde vamos a montar nuestro producto cardiaco. 29. Proyecto 3 Carrito de compras - Configuración: Chicos, aquí voy a crear un proyecto. Entonces estoy en este directorio. Entonces voy a abrir una terminal. Y vamos a crear un proyecto y una aplicación Vx Create React. Y el nombre de mi proyecto será carrito de compras. Bien. Entonces este será el nombre de mi proyecto. Y esperemos a la creación del proyecto. Tomará alrededor de dos a 3 min para completar este proceso. Entonces voy a estar de vuelta. Una vez completado este proceso. Encuestas, la configuración de nuestro proyecto ya está terminada. Entonces primero vamos a entrar en esta carpeta que es carrito de compras. Y necesitamos instalar algunos paquetes antes de empezar a trabajar en esta aplicación. Así que vamos a usar el kit MDB react UI. Para trabajar en nuestro componente. Tenemos que redactar el kit de herramientas. También necesitamos React redux. También necesitamos el redox. Y también necesitamos que tus conductos persistan porque vamos a persistir nuestro artículo del carrito. Así que esperemos a la instalación del paquete y voy a estar de vuelta una doceava parte del paquete se instala. Entonces chicos, nuestra pipeta cortisol. Entonces hagámoslo primero. Y Kenneth Clark y yo ya abrimos este proyecto en mi código de Visual Studio. Entonces entremos en el Código VS. Se puede ver que tengo abierto el proyecto en mi código VS. Así que tenemos instalar estos paquetes. herramientas, reaccionar, redox, redox, redox persisten y MDB reaccionan ante usted. Yo podría. Y nuestra aplicación se está cargando en el navegador y nuestro proyecto y consiguió cargar con éxito en el navegador. Ahora, vayamos al Código VS Primero. Y hagamos un poco de limpieza primero. Entonces no necesitamos este. Bien. Y vamos a dar por ahora carrito de compras, bien. No necesitamos este logo, así que vamos a eliminar este. Eliminemos este archivo. Pongamos nuestro index.js y aquí está bien. Y vamos a crear algún archivo y carpeta. Entonces vamos a tener una carpeta redex. Y vamos a tener algún archivo aquí. Entonces vamos a tener navbar NodeJS. Vamos a tener una barra de navegación, un contenedor de tarjetas. Y vamos a tener nuestro artículo e insertar Redux. Vamos a tener una tienda que carretera de peaje. Y vas a tener una característica de carpeta. Dentro de la característica, vamos a tener nuestras diapositivas. Estamos tratando con el carro, entonces será Slice, slice dot j. ¿Bien? Y vayamos al archivo app.js y verifiquemos si este tinnitus de quedar reflejado o no reflejado. Ya que estamos usando aquí un diseño de materiales Bootstrap. Así que necesitamos traer un archivo CSS para nuestra pestaña Material Design. Voy a pegar la declaración de importación CSS o el material no se movió club. Entonces esta, tenemos que pegarla por aquí. Ahora bien, si vas al navegador, puedes ver que se llama cambio. Eso significa que hemos podido configurar con éxito el diseño de materiales Bootstrap en nuestra aplicación. 30. Carrito de compras del proyecto 3 - Configure RTK: Ahora, voy a configurar el kit de herramientas del lector en esta aplicación. Entonces vamos a empezar a trabajar en este componente que es navbar cart item id card container. Entonces voy a comenzar a configurar el kit de herramientas redact en esta aplicación. Así que vamos al carrito slash dot js file. Y necesitas traer vida creativa. Reduzca el kit de herramientas, cree diapositivas. Necesitamos. Y después de eso, hemos predefinido nuestra rebanada, rebanada. Rebanada. Somos nombre predefinido, por lo que será tarjeta. ¿Bien? Entonces tenemos que definir el estado inicial de nuestra aplicación. Entonces voy a tener artículos. Entonces básicamente tendrá todo el artículo del producto. Así que voy a elegir una falla de datos debajo de la carpeta de origen. Entonces este archivo de datos que necesitamos aquí bajo esta fuente, bien. Por lo que contiene cuatro productos con título, precio e monto. Entonces inicialmente estoy fijando la cantidad es una. Entonces esta es la cantidad. ¿Bien? Ahora vamos a las tarjetas como o archivo JS y tenemos que traer aquí el archivo de datos. Importamos datos y podemos atender este. ¿Bien? Entonces inicialmente vamos a, así que el cuarto producto de nuestra página, después de eso, vamos a tener cantidad total, ¿de acuerdo? Será cero inicialmente y conteo total. Esto también será cero. Y vamos a tener reductor dentro del cual vamos a escribir nuestro real. Inicialmente será la empatía. Exportemos esta diapositiva. El valor por defecto de exportación. Rebanada de carro, enseñado a leer dijo, Bien. Ahora vamos a este archivo punto js de tienda. Y aquí tenemos que traer la puerta de tu cochera mañana. herramientas para redactar. Desde redact toolkit, necesitamos traer tienda configurada. Ahora, también tenemos que traer nuestro reductor de carrito de esta función de rebanada de tarjeta plegada. Después de eso, básicamente tenemos que exportar nuestra tienda. Así que los conos de la puerta configurando la tienda. Y vamos a tener reductor. Así que básicamente vamos a acceder al estado que hemos definido dentro de estas tarjetas light o archivo JS con la tarjeta clave. Entonces vamos a asignar este carro, reducirlo al auto. Por lo que la configuración de nuestra tienda está terminada. Y ahora tenemos que juzgar por esta tienda, la tienda por defecto de exportación. Y el último paso, tenemos que hacer alguna configuración dentro de nuestro archivo index.js. Desde React redux, necesitamos traer proveedor primero. Así que vamos a traer proveedor para conectar nuestra aplicación React con redex. Y podemos simplemente poner este componente app, de hecho este proveedor. Y también tenemos que traer este tour. Vamos a esta carpeta. Y podemos proporcionar este histo a nuestro proveedor. Vamos a guardar este archivo y vamos a verificar si nuestro lector liquidus, nos permite configurar completamente o no. Entonces vamos al navegador. No tenemos ningún error. Entonces eso significó dos liquidus configurados con éxito. También puedes verificar con la reducción dúctil, si tienes un alto este DevTools en tu extensión Chrome. Si abres éste. Ahora puedes ver que tenemos nuestro estado inicial. Puedes ver que tenemos para producto dentro de este artículo. Entonces bien, eso significa que hemos configurado con éxito nuestro kit de herramientas de redacción en esta aplicación React. Así que la parte de configuración del kit de herramientas de reduct se ha completado todavía. Ahora vamos a empezar a trabajar en un componente uno por uno. Entonces primero empezaremos a trabajar en nuestro archivo nav bar dot js. 31. Proyecto 3 Carrito de compras - Navbar: Ahora voy a empezar con este componente Navbar. Así que amueblado menos que fragmento dendrítico por aquí. ¿Bien? Y en app.js, vamos a tener nuestro componente Navbar y contenedor de tarjetas. ¿Bien? Entonces vamos a trabajar en éste y podemos traer nuestro número de manera competente son sólo. Primero guardemos este archivo. Y entonces podemos traer esta navbar. Así que el código VS importa automáticamente este componente. Puedes verificar éste. Para que veas que está funcionando. Ahora, vayamos a este componente vecino. Y aquí tenemos que traer algún componente de nuestro bootstrap de diseño de materiales de MTV react UIKit. Necesitamos traer MDB, contenedor MDB, MDB, MDB, navbar link, MDB, marca navbar, insignia MDB. ¿Bien? Entonces este todo componente necesitamos. Después de eso, lo que tenemos que hacer. Así que también tenemos que traernos selector y enorme despacho de nuestra reacción para hacer a continuación. Vamos a traer esas cosas primero. Ya hemos definido el estado inicial dentro de este carro se encuentra. Entonces podemos tratar a este estado, ¿de acuerdo? En tercer lugar nuestro nav bar dot js file. Entonces dentro de navbar, tenemos una bolsa de carro en la parte superior, derecha. Bien, entonces ahí tenemos dos. Entonces el conteo total. Para que podamos leer el valor del estado con la ayuda de un enorme seleccionado. Y hemos explorado el reductor con la llave. ¿Bien? Podemos aceptar el estado apátrida oscuro atrapado. Y podemos capturar el conteo total. A partir de ahora sólo será cero. Entonces, trabajemos en este componente Navbar. Voy a usar fragmento aquí. Y voy a usar el número IMDB. Y aquí se ampliará. Alergia color oscuro. Te voy a dar primaria. Bien. En tercer lugar está el número IMDB. Voy a tener contenedor IMDB. Y entonces vamos a tener la marca IMDB navbar, ¿de acuerdo? Y aquí podemos dar como una tarjeta de compras redox toolkit. Bien. Y en terapia tenemos que pasarlos. Si estilizas, voy a dar un estilo como una línea. El artículo estará centrado. Vamos a dar exhibición. Demos flexibilidad a la pantalla y justifiquemos el espacio de contenido entre ellos. Vamos a guardar este archivo y podemos verificar estos cambios. Para que veas que estamos consiguiendo esta, nuestra bonita barra de navegación. Ahora después de eso vamos a tener MDB ahora Berlín. Y entonces voy a usar aquí una etiqueta con el nombre de clase MX, guión tres. Con Italia, estoy usando aquí el nombre de la clase bootstrap. Y podemos tener icono MDB. Y voy a usar iconos Font Awesome. Así que necesito poner una hoja de estilo para habilitar el Font Awesome. Por lo que se requiere este estado de teja de cresta para habilitar el torso único. Y dentro de este ícono de MDB, vamos a tener MDB malo. Bien, pasemos algunas ganancias en el ícono MDB de Faraday. Así que estamos usando el icono Font Awesome. Y puedo engranaje que voy a usar aquí intercambiando tarjeta. ¿Bien? El tamaño será grande. Y el color que voy a usar aquí bien. Ahora dentro está el valor MDB. Tenemos que proporcionar esta gota. El color será el peligro que aumente el rojo. Notificación, lo siento, incluso se notificará. Y tenemos que dar algunos tierra adentro cada embaldosado. Y voy a dar tamaño de fuente 12 pixel. Y aquí estamos con al menos mostrar el conteo total, ¿de acuerdo? Y podemos verificar éste ya sea que esté funcionando o no. Entonces entremos al navegador. Ahora puedes ver que está funcionando. Podemos leer este valor cero en nuestra tienda. Y actualmente no tenemos ningún artículo en el carrito, así que va a cero. Entonces nuestra barra de navegación es complicada por aquí. Y creo que no se requiere esta enorme disparidad. Pero vamos a eliminar esta. Así que la parte navbar se completa por aquí. Ahora vamos a trabajar en nuestro contenedor carrito. 32. Proyecto 3 Carro de compras - Diseño de carrito: Entonces ahora voy a empezar a trabajar en este componente contenedor de tarjetas. Entonces, enviémosle un fragmento por aquí. Entonces primero, tenemos que traer un gran efecto, ¿de acuerdo? Y nuevamente, necesitamos aquí enorme despacho y uso seleccionado de nuestro reaccionar a ese enorme selector. Por lo general despachar. Y necesitábamos traer algún componente de nuestro material para luego arrancar. El componente que necesitamos aquí, MDB, icono MDB. ¿Bien? Por lo que solo se requiere que estos dos competentes importen de nuestro viaje de diseño de materiales. Y aquí lo que tenemos que hacer. Entonces primero, necesitamos extraer algún estado que tenemos en nuestro sistema que tenemos en nuestro archivo cart slash dot js. Vamos a usar aquí el selector usado. Y podemos salir del estado con la tarjeta de punto estatal. Entonces necesitamos aquí artículos y cantidad total. ¿Bien? Ahora, lo que tenemos que hacer. Entonces, vamos a eliminar esta. Voy a ser cada fragmento. Y si tienes los artículos, entonces yo voy a soldar. Entonces ahora lo que voy a hacer. Entonces primero, voy ahora voy a usar tu etiqueta H2 con el nombre de la clase lead hyphen, md, hyphen, md hyphen two. Y te voy a dar un rubro como tu carrito de compras. Ahora, tenemos cuatro productos dentro de este artículo. Entonces voy a usar este componente dentro de este contenedor de tarjetas. Entonces por ahora, sólo voy a generar algún fragmento aquí. Trabajaré más tarde. ¿Bien? Y aquí tenemos el artículo, entonces artículos, ítem de mapa de puntos. Y podemos devolver aquí nuestro artículo del carrito. ¿Bien? El código VS importa automáticamente este componente y clave. Voy a ruta todavía item dot ID. Y voy a extender la altura hacia abajo. Así que este material data punto js contenido título precio. Lo hizo en Tokio. Así que vamos a guardar este archivo y vamos a entrar en el navegador para voltear este. Entonces este componente no está diciendo que tengamos que ser realmente ir a nuestro archivo app.js y tenemos que traer ese componente contenedor de tarjetas. Vamos a guardar este archivo. Ahora vamos al navegador. Así que ahora puedes ver que este componente del artículo del carrito se está renderizando por aquí. Así que tenemos cuatro ítems en el archivo data dot js. Entonces es renderizar por tiempo. ¿Bien? Después de eso, tenemos que trabajar en este carrito item dot js file. Entonces ahora voy a empezar a trabajar en este componente del artículo del carrito. Entonces aquí tenemos que traer efecto Hughes. Y nuevamente, tenemos que traer estas dos cosas. Entonces hay dos cosas que tenemos que traer. Voy a usar aquí también. Así que vamos a traer aquí. Bien, Ahora, vamos a quitar esta. Y voy a usar tu estilo inline. Entonces voy a usar aquí 70 y ver ancho, ¿de acuerdo? Ancho máximo, voy a usar aquí 90, entonces estará dentro del margen de comillas dobles. Te voy a dar un cero pixel y auto. Ahora dentro de este div, voy a tener un div más con el nombre de la clase. Pedir prestado. De nuevo, voy a tener, y otra vez voy a tener un poco de estilo inline. Margen. Arriba. Por lo que serán diez píxeles. Bien, vamos a formatear este. Y dentro de este div, voy a tener un div más con el nombre de la clase. Todo guión guión SM guión a. Este compuesto va a recibir utilería porque estamos difundiendo todo el artículo así. Entonces va a recibir accesorios aquí como identificación, imagen, título, precio y monto. Entonces voy a usar una etiqueta de imagen. En tercer pensamiento, puedo aportar esta imagen y en alternancia, puedo aportar su título. Voy a usar aquí en LastName, image fluid. Y el estilo que voy a usar aquí, ajuste a objetos, portada. Vamos a formatear este. Voy a tener ancho y alto. Voy a tener mi prime solamente. ¿Bien? Ahora, después de esta cinta, voy a tener un día más con la columna guión sm guión dos. Y voy a proporcionar el margen como un utilería. Y aquí voy a tener etiqueta h5. Dentro de esto, voy a tener título. Entonces verifiquemos éste por ahora, ya sea que esté funcionando o no. Entonces vamos al navegador. Entonces ahora puedes ver que somos capaces de mostrar el ítem for junto con el título mediano. Ahora después de esta etiqueta h5, voy a tener una etiqueta h5 más. Y este será el precio. ¿Bien? Y aquí voy a dar algo de color. Entonces el color que voy a usar aquí tiene 61, 70, 98. Bien, veamos cómo se ve. Así que nuestros precios mostrando más todavía. Ahora voy a tener icono aquí, ícono MDB. Y voy a usar todavía font-awesome. Y este será el estilo de icono de borrador que voy a dar aquí ese puntero y color. Sólo te voy a dar un rojo. Y este MDB lo convertí con un auto cerca. ¿Bien? Ahora después de esta mesa, voy a tener un div más con el nombre de clase llamado fn en ellos. Lo encontré. Y nuevamente, voy a usar el IMDB. Aunque sólo puedo. Será como flecha hacia arriba. ¿Bien? Entonces voy a usar aquí alrededor de Chevron. Y podemos eliminar este color no se requiere aquí. Y luego voy a mostrar la cantidad aquí que voy a usar etiqueta p. Y dentro de ella voy a repartir la cantidad. Y les voy a dar una línea si margen de teselas, arriba, será de diez píxeles. Y después de esto, vamos a tener flecha hacia abajo también para básicamente disminuir la cantidad del artículo. Y esto básicamente aumentará la cantidad del artículo. Entonces esto va a estar abajo, chevron abajo. Y creo que eso es todo por ahora. Podemos verificar esta ya sea que esté funcionando o no. Así que entremos en el navegador. Entonces está funcionando. Puedes ver que tenemos flecha arriba, flecha hacia abajo, o alentando o degradando la cantidad del artículo. Entonces ahora aquí tenemos dos. Entonces el monto total también. Tenemos que seguir trabajando en este contenedor de tarjetas dot js file. Entonces después de esto, voy a tener agua. Y vamos a tener una línea horizontal. Entonces en cuanto a la etiqueta. Entonces voy a proporcionar el estilo milenario. Entonces será como mostrar, flexionar y justificar el contenido. Espacio de manera uniforme. Y margen derecho, será de 50 pixeles. Y aquí voy a tener etiqueta de span total total. Y podemos ver aquí cantidad total. Y esto se ingresará en D. Bien, así que pongamos éste dentro de un div. Este div, vamos a tener MDB, btn. Ahora dentro de este MDP con él, voy a pasarles indicaciones, así que color. Será peligro. Al hacer clic, vamos a tener. Entonces definiremos el OnClick más adelante. Entonces, por ahora, eliminemos esta. Y vamos a tener cada ficha. Entonces será ancho uno para celda típica. ¿Bien? Y vamos a tener margen superior. Por lo que será de 50 píxeles. El botón valioso con una tarjeta transparente. También puedes quitar todo el artículo del auto. Así que vamos a guardar este archivo y vamos a entrar en el navegador. Ahora, se puede ver que está funcionando. Y a partir de ahora, la demanda es cero. Este también es cero porque no hemos definido ninguna acción para actualizar todo este valor. ¿Bien? Por lo que ahora comenzaremos a trabajar en cada una de nuestras hidrodisección para aumentar la cantidad o disminuir la cantidad o retirar el artículo del carrito. O si quieres que elimine todos los artículos vienen tarjeta, entonces también puedes hacer eso haciendo clic en este botón. Tenemos que definir la acción para cada operación. Hasta el momento, voy a escribir acción para obtener el total del carrito. Tenemos alguna cantidad por cada producto, así que quería mostrar el total de esta tarjeta. Bien. 33. Proyecto 3 Carro de compras - Cart Total Action: Entonces comencemos a trabajar en nuestra acción del kit de herramientas de redacción. Ahora voy a escribir una acción de kit de herramientas para obtener el valor total del artículo del carrito. Dentro de este reductor. Voy a tener esa reacción redox. Así que vamos a tener un máximo y ligero y obtener el total del carrito, ¿de acuerdo? Uno a tener un estado solamente. Y sin embargo, cuándo definir una variable, enumeraron los elementos. Entonces voy a texturizar la cantidad del hotel y el conteo total. Y voy a usar todavía reducir el método. Así reducir método con Italia ejecutar algún tipo de operación a través todos los elementos de la matriz y producirá un solo valor basado en esa matriz. Así que aquí voy a tener Carrito Total y carrito artículo. ¿Bien? Y luego del artículo del carrito, voy a tener este precio y cantidad. Bien. Después costó artículo, precio total y se los llevó a todos. Así que solo estoy aplicando matemáticas todavía simples aquí para calcular el valor de cuota más ligero. Y luego carro. El monto total es igual a por lo que será más es igual al total. Y lo mismo que voy a hacer para nuestro conteo total también. Entonces carro, total, conteo total y cantidad, ¿bien? Entre aquí no hay más que cantidad, ¿bien? Entonces podemos devolver total. ¿Bien? Ahora tenemos que aportar también el valor inicial. Por lo que el monto total y el total encontrado, será cero, es uno. Y después de eso, tenemos que actualizar nuestro monto total y recuento total. Tomemos nuestro monto total es igual a que voy a jugar un papel en dígito e ir a decirle que arregle. Así que sólo voy a fijar el valor de la cantidad total de 22 decimales. Y no lo es. El recuento total es igual al recuento total. ¿Bien? Por lo que esto se completa. Ahora tenemos que exportar esta const de exportación real. Y relacionará la diapositiva de la tarjeta, el total real de la tarjeta. Ahora podemos usar esta acción aquí en contenedor de tarjetas archivo dot js. Entonces tenemos que usar dentro de nuestro efecto de uso. Y tenemos que primero es hacia la referencia de unidad se divide en una variable de despacho. Entonces sólo podremos desesperar ese acento. Entonces Despacho, consigue carrito, total. Así que el código VS me sugirió automáticamente esta acción redex. Se importará automáticamente. Si no es importante automáticamente para ti, entonces tienes que importarlo manualmente. Entonces vamos al navegador. Ahora puedes ver que somos capaces de ver la cantidad total de este producto, lo cual es correcto. Así que la cantidad total de producto en el sopping cardiaco cuatro. Puedes ver eso aquí, porque inicialmente nuestro carrito la cantidad de artículo es uno, ¿bien? Así que esto está terminado, ¿de acuerdo? 34. Proyecto 3 Carro de compra -Aumentar, disminuir y eliminar acción: Ahora la siguiente acción que tenemos que definir para incrementar el ítem actual. Entonces, si haces clic en esta flecha, se incrementará. Y el precio también se actualizará junto con el valor de este carrito también. Entonces primero definamos la acción para aumentar la cantidad del artículo. Entonces voy a definir acción aquí en gris, la cantidad del artículo del carrito. Entonces aquí voy a haber aumentado y voy a haberme quedado junto con la acción. Y entonces voy a tener un estado punto items, items, dot map. Voy a tener artículo. Y tenemos que verificar si ID de punto del artículo coincide con la carga útil del punto de acción. Carga útil. Nada más que será la identificación. Para que pueda puntear paralelo contendrá la idea que vamos a enviar desde nuestro componente. Entonces si huele y entonces solo tenemos que aumentar la cantidad, ¿de acuerdo? Entonces en ese caso lo que tenemos que hacer, una devolución, sólo voy a extender el ítem y tenemos que simplemente actualizar la cantidad ítem punto m más uno. Y podemos devolver el artículo. Entonces esto se computa. Ahora tenemos que despachar esta acción. Entonces File exporta este. Y podemos usar este dentro de nuestro carrito item dot js file. Así que de nuevo, nos elevamos hacia la diferencia de generalmente dividido en una variable de despacho. Entonces sólo podremos despachar una acción. Entonces este es Chevron arriba. Eso significa que podemos aumentar la cantidad del artículo, el onclick que tenemos que proporcionar aquí. Y voy a disipar ese aumento épsilon. Así que el código VS sugiere automáticamente con esta acción. Y voy a pasar la identificación que estoy recibiendo año otros apoyos de nuestro componente contenedor de tarjetas. Vamos a guardar este archivo y vamos al navegador. Refresca este. Ahora bien, si aumentamos éste. Entonces puedes ver que esto va en aumento, pero nuestra tarjeta y esta cantidad de tarjeta no se está actualizando. Entonces lo que tenemos que hacer, entonces tenemos que hacer básicamente algunos cambios en nuestro efecto de reutilización. Por lo que esta acción siempre conseguirá despacho cada vez que tengamos cambios en la cantidad. Para que podamos pasar los ítems en esa dependencia. Entonces, cada vez que ocurra algún cambio en la matriz de items, entonces esto básicamente será despedido, ¿de acuerdo? Y obtendremos el valor total actualizado del artículo junto con la cantidad total. Entonces entremos al navegador y actualicemos este. Ahora, aumentemos la cantidad. Entonces como se puede ver que se está actualizando. Y sin embargo también se ha actualizado a cinco. Se puede ver que se está actualizando. Ahora lo siguiente, básicamente vamos a implementar la funcionalidad como eliminar el producto de este carrito de compras. Ahora, en la siguiente sección, vamos a tratar retirar el producto de nuestro carrito de compras. Así que podemos probarlo aquí en realidad. Entonces vamos a habernos quitado y vamos a tener un estado junto con la acción. Y estados artículos de punto y artículos de lote de estado. Filtro de puntos. Vamos a tener tu artículo. Y tenemos que escribir aquí lógica básica como si item dot ID no se empareja con la idea que estamos recibiendo de componente, entonces tenemos que guardar todos esos artículos y eliminar esos artículos en particular salen tarjeta de compras. Esto filtrará ese artículo, saldrá tarjeta de compra. Y vamos a exportar este. Ahora, podemos usar esta acción dentro nuestro carrito item dot js file. Entonces aquí vamos a tener onclick. Sólo podemos despachar ese. Elimina el código VS sugiriendo automáticamente con esta sección. Y podemos pasar la identificación. Vamos a entrar en el navegador. Éste. Y si haces clic en este ícono de eliminar, ese será eliminado, el valor del carrito se está actualizando. Este carrito de compras cuantifica también poniéndose actualizado. Entonces esto está funcionando. Eso se puede ver. Entonces ahora lo siguiente vamos a trabajar básicamente en nuestra disminución de la cantidad. Entonces esta funcionalidad tenemos que trabajar. Entonces, si haces clic en esta flecha hacia abajo, entonces la cantidad disminuirá. Y si solo tienes una cantidad, y si volvemos a hacer clic en esta, la flecha hacia abajo, entonces se eliminará de nuestro carrito de compras. Así que también tenemos que encargarnos de esta cosa, ¿de acuerdo? Ahora lo voy a escribir, irrita el acento por disminuir la cantidad. Así que sólo voy a copiar esta. ¿Bien? Será casi idéntico. Nos hacia arriba cosa de combustible de jet. Se disminuirá. Y esta vez hemos querido disminuir la cantidad si se iguala el ID. Y también queríamos hacer una cosa más. Al igual que si solo tienes una cantidad y si acabas de hacer clic de nuevo en esta flecha hacia abajo, entonces se eliminará de nuestro carrito de compras. Así que aquí podemos hacer como filtrados, ¿de acuerdo? Y podemos consultar aquí. Si me vuelvo punto entre, no es igual a cero. Eso significa que si se convierte en cero, entonces se eliminará de nuestro carrito de compras. Digamos que quita esta. Escriba donde sea su exportación este. Vamos a usar esta acción dentro de este carrito item dot js file. Así que aquí podemos usar OnClick. Por lo que se disminuirá. Código de nuevo automáticamente sugerir sin acción. Y voy a pasar la identificación. Y tenemos que básicamente camino dentro del despacho. Bien, así que sólo voy a cortar esta. Y voy a poner en tercer lugar y despachar. Entonces sólo funcionará. Vamos al navegador. Refresca este. Incluyamos éste. Vamos a graduar este. Da click en éste. Se está actualizando. Esto también dictará actualizarse también. Y si vuelves a hacer clic, entonces este artículo se eliminará de nuestro carrito de compras. Entonces esto también está funcionando. De esta manera. También puedes eliminar los artículos de la tarjeta de intercambio. Ambos estaban trabajando. Dicen hecho. Ahora tenemos que trabajar en esta tarjeta transparente. Si acaba de hacer clic en esta tarjeta transparente, entonces se eliminará todo el artículo. 35. Proyecto 3 Carro de compras - Acción del carrito vacío: Entonces ahora voy a escribir una tarjeta de datos de entrada de barra de fracciones, ¿de acuerdo? Por lo que puede tener tarjeta clara clara. ¿Bien? Bueno, no tener un estado y un estado puntean artículos a dos. Bien. Vamos a exportar esta acción. Tarjeta tan clara. Y tenemos este botón dentro de nuestro contenedor de tarjetas. ¿Bien? Entonces podemos tener un método onclick y podemos mostrar esa tarjeta de acción clara. Bien. Código soviético otra vez, automáticamente me sugirió esta reacción redox. Vamos a guardar este archivo y vamos a entrar en el navegador, leer verificar este. Esta, da clic en esta tarjeta transparente. Entonces ahora nuestro partido cartesiano, y si el carro está vacío, entonces, entonces no quiero que así que esta cosa, bien, así que quería nadar. Digo como tu carrito de compras en la entrada. Entonces aquí podemos verificar como si los artículos longitud del punto es igual a cero, eso significa que tenemos un artículo cero en el carrito. En ese caso, quería volver como tu top codificaba la entrada t. Voy a usar la etiqueta h3 con el nombre de la clase. Y voy a tener más clase y sin embargo algo de margen. Los cuatro primeros, ¿de acuerdo? Y podemos darte como si estuvieras ayudando. Y voy a usar tu icono. Voy a ser por lo general span tag. Y voy a tener el ícono de MDB. Y luego tercero es que puedo, voy a usar algún icono. Y puedo ser como ir de compras Heisenberg. Y después de esta etiqueta span, voy a seleccionar la entrada D. Se puede ver que somos capaces de ver este método. Y me preguntaba agregar un botón aquí para obtener todos los artículos de la tarjeta. Entonces, si quisieras jugar más alrededor de esta aplicación, también puedes comenzar desde cero nuevamente ajustando toda la carta desde la puntera irlandesa. Entonces podemos tener un botón aquí después de esta etiqueta h3. Entonces MDB, btn. Y va a estar teniendo buenos artículos para la pierna. Y el nombre de la clase. Yo también te voy a dar un guión mx. Bien. Y veamos cómo se ve nuestro botón. Está bien, bien. Ahora, tenemos que escribir una sección básica de lectura para obtener todo el carrito de nuestra tienda. Entonces aquí voy a escribir unas reacciones redox básicamente para obtener todos los artículos. ¿Bien? Podemos intentar la detección. Y por suerte podemos hacer como un punto de estado los elementos es igual a los datos. ¿Bien? Y podemos exportar esta acción. Consigue artículos a la carta. Podemos usar detección dentro de este contenedor de tarjetas dot js file. Y aquí podemos usar el método on-click. Podemos disipar esa. Despacho, consigue artículos de guardia. Vamos a guardar este archivo. Y entremos en el navegador. Ahora, vamos a hacer clic en esta tarjeta clara. Ahora independientemente, mis tres como si estuvieras parando por conseguir amigo. Y si hacemos clic en este elemento de la cuadrícula, recuperarás todo tu ítem que tengamos en nuestro archivo data dot js. Para que de esa manera también puedas jugar alrededor de esta aplicación. Se completa la funcionalidad. Se puede ver que todo está funcionando como se esperaba. 36. Carro de compras del proyecto 3 - Persiste el valor del carrito con Redux-Persist: Lo último se deja claro si estás haciendo referencia a esta obligación. Entonces quería persistir todo el valor como total junto con este valor y este valor. Entonces vamos a utilizar aquí para persistir todo el valor de la tarjeta. Entonces, si has leído este por ahora, se restablecerá. Entonces queríamos terminar el valor de la tarjeta. Entonces vamos a usar root x, proceder con el kit de herramientas del lector. Entonces chicos, ahora voy a configurarlo. Los rechazos persisten en esta aplicación React. Entonces lo que puedo hacer aquí, primero, tenemos que traer un almacén. Entonces ya hemos instalado este paquete al principio. Y también necesitamos Reductor número que es persistir. Persistir un reductor. Y necesitamos combinador, reductor de nuestro redox. Entonces traemos esto combinado hoy de Madrid x. Ahora, tenemos que escribir aquí persistir configuración, persistir conflicto. Tenemos que darle un papel clave en la versión uno. Y tenemos almacenamiento de dos partes. Ahora tenemos que usar este reductor combinado. Reductor es igual a combinar borrador. Y podemos estar regulados tarjeta esta. Y puedes pegar aquí. ¿Bien? Y entonces hay que persistir nuestro reductor. Por lo que el reductor persistido es igual a persistir reductor. Tenemos que pasar la configuración, esta configuración, y luego tenemos que empacar el reductor. Y aquí podemos usar esta. ¿Bien? Ahora tenemos que hacer también algunos ajustes dentro de este archivo index.js también. Entonces aquí lo que tenemos que hacer, así de redex persisten, necesitamos traer persistir una tienda. Y tenemos que importar persistir Y puerta también. Prueba Redux PR. Tenemos que ir a la integración y reaccionar. Y será persistir. Ahora después de eso, optamos por usar esto, pero esto puede conseguir, tenemos que envolver nuestro componente con la puerta Y comprada, luego persistir. Y aquí tenemos que usar led a la tienda. Y podemos pasar aquí son dos. ¿Bien? Y podemos proporcionar todavía practicado. Entonces, guardemos este archivo y verifiquemos éste en el navegador. Refresca este. Entonces no tenemos ningún problema. Entonces vamos a realizar todas las operaciones. Entonces esto está funcionando. Entonces total está levantando detalles. Este también está mejorando. Ahora, permítanme refrescar esta aplicación. Así se puede ver que después de reemplazar nuestro valor r se está consiguiendo persistir por aquí. Por lo que el valor total también está consiguiendo persistir. El cuantitativo también consiguiendo persistir y cantidad total en el auto también consiguieron persistir. Por lo que hemos logrado persistir el valor de la tarjeta también en esta aplicación. Ahora espero que hayas entendido la funcionalidad del carrito de compras con la ayuda del kit de herramientas Verita en esta aplicación React. 37. Aplicación de blog de Project 4 - Demo: En esta sección. Primero, vamos a cubrir algún concepto básico sobre el kit de herramientas Redux construyendo esta sencilla aplicación de blog en la que el usuario puede publicar un blog o al usuario le puede gustar o no a un blog en particular Con la ayuda de esta aplicación, vas a tener alguna idea básica sobre cómo trabajar con el kit de herramientas reduct en una aplicación de reacción Para este proyecto, vamos a utilizar un código de inicio para construir esta aplicación usando el kit de herramientas reduct Te veo en el siguiente video donde hablaré del código de inicio. Además, te daré el breve resumen sobre el código de inicio que vamos a utilizar en esta sección. Eso es, de esta parte de introducción. Te voy a ver en el siguiente video. 38. Aplicación de blog de Project 4: descripción general del código: Chicos, es hora de comenzar a trabajar en nuestro primer proyecto con el kit de herramientas rojo. En esta fuerza para este proyecto que vamos a construir, Rehacer kit, he proporcionado un código fuente el cual se adjunta a esta conferencia Puedes encontrar que el código fuente de este proyecto de inicio antes que sigamos adelante y escribamos algún código, déjame darte una breve descripción sobre este código de inicio. He creado este proyecto usando esta plantilla reductora. No tienes que hacer este paso. Ya he proporcionado el código fuente que se adjunta a esta conferencia. Volvamos al código VS. Se puede ver que tengo uno como archivo. También tengo uso aquí bootstrap, para que podamos evitar escribir código CSS. En el lado izquierdo, tenemos un formulario de bloque a partir del cual podemos publicar nuestro blog. En el lado derecho, estoy renderizando la lista de blogs que es enviada por este formulario de blog. Por el momento, solo tenemos una rúbrica. Si vuelvo al navegador, puedes ver que en el lado izquierdo tenemos forma de bloque y lado derecho tenemos una lista de blogs en que voy a renderizar todos los blogs. Volvamos de nuevo al código VS. Aquí tenemos el archivo JS índice. Tenemos app y función en app, tenemos una configuración de tienda. Por el momento, no tenemos ningún reductor. Esto está vacío. Tenemos una carpeta de características en la que tengo una carpeta de bloques en la que tengo formulario y lista de blogs. Bien, Esta es una forma muy básica la cual he escrito aquí para que el usuario pueda publicar el blog. Aquí, acabo de proporcionarte el código fuente de este archivo para que podamos enfocarnos más en aprender el concepto de kit de herramientas rojo. Aquí tenemos una forma muy básica. Tenemos un desplegable para seleccionar usuario. Tenemos campo de entrada para el título, y tenemos un cuerpo para nuestro blog. Ahora también tenemos una lista de blogs. Bien, entonces por el momento, estoy renderizando los dos bloques de este propio componente. Bien, aquí también tenemos un usuario de blog. También vamos a mostrar que este blog es creado por qué usuario? Bien. Por el momento es simplemente sencillo, bien. Y tenemos un botón de respuesta aquí. Básicamente te puede gustar o a diferencia del blog, este es un componente muy básico. Ahora volvamos a este archivo GS índice. Básicamente, estamos aportando la tienda a nuestra app para que nuestro componente pueda acceder al estado, que vamos a definir en nuestra tienda. Antes, ya te he informado que en este proyecto voy a usar un bootstrap versión cinco. Ya he escogido el CDN o el bootstrap versión cinco, para que podamos evitar escribir en este proyecto Ahora hablemos de este paquete, archivo Json también. Aquí tenemos este kit de herramientas reduct y react reduct, que es importante para trabajar con el kit de herramientas reduct en una Ya tengo esta dependencia dos. Cada vez que configuras un proyecto de reacción con este comando, cada vez que creas un, cualquier proyecto de reacción con este comando, vas a obtener esta dependencia de dos junto con eso. Eso es React Reduct y Reduct Tool. Se trata de la visión general de este proyecto de inicio de bloques. 39. Aplicación de blog de Project 4 - Blog Slice: Ahora comencemos a trabajar en esta sencilla obligación de blog. Primero, voy a crear una porción aquí que será como blogs. Liz, voy a importar rebanada de diapositiva roja. Básicamente se utiliza para definir nuestro estado inicial y acción y reductor. Para ello, estamos creando una rebanada, crear rebanada. Tenemos que traer después de eso, lo que tenemos que hacer aquí, tenemos que definir una rebanada de bloque. Podemos usar esta porción de creación que no puede ser objeto, y tenemos que definir un nombre de porción. Voy a dar un nombre de porción aquí, bloque, vamos a tener estado inicial. ¿Bien? Entonces déjame definir un estado inicial aquí, solo a partir de este archivo JS de lista de bloques. Sólo voy a cortar esta, ¿de acuerdo? Y yo sólo voy a pegarlo por aquí. Déjame renombrar a estado inicialmente. Bien, tenemos nuestro estado inicial, ahora vamos a tener un reductor en el que vamos a escribir una acción en este momento, que sea mascota. Déjame exportar este lider de bloque de fallas. Estamos exportando este reductor. Vamos a enganchar este reductor en nuestra tienda archivo Js. Bien, déjame volver a esta carpeta de aplicaciones de aquí. Voy a traer ese reductor de bloque. Reductor de bloque aquí. Tenemos que ir a esta característica carpeta y bloques y tenemos que usar este archivo. Ahora podemos enganchar nuestro reductor en este objeto reductor. Entonces bloques, podemos dar cualquier llave, lo que quieras. Entonces estoy cediendo bloques, solo podemos asignar bloques. Reductor. Vamos a guardar este archivo aquí. Todo está bien, supongo, Bien. 40. Aplicación de blog de Project 4: crea blogs con useSelector: Ahora vamos a este archivo de lista de blog aquí. Primero, voy a traer un selector de react reader. Porque necesitamos seleccionar el estado que hemos definido en este blog mentiras. Para ello, necesitamos, vamos a traer aquí selector. Entonces podremos tener nuestros blogs blogs a selector. Aquí podemos acceder a nuestro bloque todo desde este bloque estatal porque nuestro reductor está registrado con los bloques clave aquí. Bien, ahora tenemos todos nuestros bloques. Bien, estamos usando esta función de bloque de render para renderizar todo el blog. Tenemos contenido de título de identificación. Bien, usuario de Blog. Entonces por el momento no tenemos ningún usuario básicamente. Bien. En esta vida se puede ver que sólo va a hacer que el usuario desconocido esté bien. Escribiremos la lógica para la carta de usuario en este proyecto. Primero, centrémonos en rentar el blog En nuestra aplicación, obtuvimos este blog de nuestra tienda y estamos renderizando el blog usando esta función. Vamos a este archivo de aplicaciones y eliminemos este encabezado codificado por arte, y voy a traer el componente de lista de blogs. Bien, entonces déjame guardar este archivo, entremos ahora al navegador. Aquí puedes ver que tenemos nuestros dos bloques que hemos definido en este bloque vuela js file. Bien, tenemos este bloque inicial de dos. Esta parte se completa, donde hemos aprendido a seleccionar el estado de la tienda. Esta parte ya terminó. 41. Aplicación de blog de Project 4: crea un selector de blogs: Ahora antes de seguir adelante y usar este componente, necesitamos hablar de este enorme selector. Porque ahora mismo recibió el estado y después conseguimos bloqueo estatal. Pero si la estructura de nuestro estado cambia como en este momento, este componente debería saber algo sobre estado necesitamos saber que vamos bloque estatal, podría ser blog estatal, otra cosa en el futuro. Sería mejor si creamos selector en el slice y luego lo exportamos. De esa manera si la forma del estado alguna vez cambió en el futuro, no tenemos que pasar por y cambiar cada componente. Podríamos cambiar una vez en la diapositiva. Hagámoslo en nuestras rebanadas de bloque aquí. Vamos a crear un seleccionado, voy a exportar ese archivo. Exportar, seleccionar todos los bloques. Vamos a tener una función anónima que va al estado A. Esto va a ser bloques estatales, ¿de acuerdo? Ahora podemos traer este selector en este archivo JS de lista de bloques. Déjame traer esa de cuadra mentiras. Tenemos que seleccionar todos los bloques aquí. Solo podemos pasar, seleccionar todos los bloques. ¿Bien? Vamos a guardar este archivo. Vamos al navegador. Esto sigue trabajando con ese enfoque. La parte selectora también se completa en esta aplicación. 42. Aplicación de blog de Project 4: crea acción para agregar blogs: Ahora vamos a seguir adelante y crear función reductor o agregar el blog en nuestra aplicación. Voy a agregar acción aquí dentro de este objeto reductor. Vamos a tener un blog. Bien, va a tener una acción estatal, podemos hacer algo como esto. Estado, empuje y acción hacen carga útil aquí, acción hacer carga útil. Básicamente la información sobre nuestro blog que básicamente contiene título, cuerpo e ID de usuario. Esta es nuestra acción que hemos traído en nuestro objeto reductor. Ahora vamos a hablar de este empuje estatal en un segundo porque si estás suficientemente familiarizado con la reacción, no solemos mutar un estado Y ese empuje de puntos lo haría en una matriz. Hablaremos en un momento. Permítanme primero exportar esta función. Vamos a tener un blog mentiras acción aquí crea mentiras. Básicamente generar un acento creado con el mismo nombre que hemos definido aquí. Eso es en el blog. Va a generar automáticamente el creador de acento. 43. Aplicación de blog de Project 4: entiende el rol de js de inmersión: Ahora hablemos de este empuje estatal que hemos escrito por aquí. Generalmente acostumbramos a escribir un estado como difundir el estado. Entonces tenemos una carga útil de acción como un nuevo elemento en lugar de empuje de estado pero uso del kit de herramientas de lectura emerge bajo el capó que le permite escribir su script Java así Donde normalmente estarías mutando el estado. Pero no está mutando. El estado emerge, crea nuevo estado por debajo. Ahora nos damos cuenta de que esto solo funciona dentro de create slice, donde más en tu aplicación aún necesitas usar la forma adecuada de no mutar el estado Sin embargo, en el interior crea mentira. Puedes usar empuje de estado y puedes directamente el estado de otras maneras así emerge manejará eso Hace que sea más fácil de manejar dentro de aquí. 44. Aplicación de blog de Project 4: acción de envío para agregar blogs: Entonces, avancemos y utilicemos esta acción en nuestro componente de forma. Vamos a esto en el archivo de formularios de bloque. Vamos a utilizar esta acción que acabamos de crear. Ahora en nuestro sector de blog, ya tenemos una forma básica por aquí. Eso se puede ver por ahora. Sólo voy a encomiar este desplegable. Centrémonos en publicar el blog con título y cuerpo. Tenemos on E on Summit en que acabamos de prevenir default, tenemos este cambio de mango para básicamente rastrear el estado de cada campo. Es decir que tenemos por aquí como entrada y área de texto. Y vamos a escribir una lógica para enviar el blog en esto solo en cumbre. Entonces primero tenemos que traer un despacho enorme. Bien, entonces tenemos que traer un despacho enorme de un rojo. Para despachar una acción, despacho enorme, tenemos que almacenar la referencia de despacho enorme en una variable de despacho. Tenemos que almacenar la referencia de este enorme despacho en esta variable de despacho que podamos despachar una acción. Ahora aquí lo que tenemos que hacer primero aquí, sólo voy a comprobar como si tenemos el título entonces vamos básicamente a despachar despacho. También tenemos que llevar la acción. Vamos a traer la acción también. De nuestro blog yace un blog que he traido aquí. Podemos despachar aquí como un blog. Aquí tenemos que proporcionar primero la identificación. Voy a usar un nano ID de red toolkit folk necesitamos básicamente una identificación única para ese propósito. Para traer un kit de herramientas de conductos de nano ID, cada bloque debe contener un ID único. Aquí podemos usar nano ID y eso será con paréntesis Ahora podemos soportar título. Y después de eso, queríamos básicamente borrar cada campo de entrada, es decir, título y body set form. Hagámoslo vacío. Este título, campo de entrada y exterior de carrocería. Después de enviar el blog, vamos a comprobar si está funcionando o no. Entremos al navegador. Y aquí me he olvidado de traer el componente en nuestra app dot archivo JS. Permítanme traer el componente agregar forma de bloque. Ahora entremos en el navegador. Hay algún problema con el estilo. Déjame ver qué está pasando. Necesitamos agregar estilo en nuestro archivo CSS de punto índice. Sólo voy a pegar styling. Este estilo básico tenemos que agregar en nuestro archivo de índice. No te preocupes, este estilo siempre presente en tu estrella. No tienes que preocuparte por esa parte. Guardemos este y entremos en el navegador. Bien, bien, déjame reformular la aplicación. Se ve bien. Ahora tenemos que publicar nuestro primer blog despachando esta acción que aquí hemos definido Bien, en nuestra cumbre. Veamos si está funcionando o no. Déjame solo dar prueba. Bien, déjame ¿qué está pasando? Vamos a hacer clic en Enviar. Tenemos algunos vamos, bien, déjame ver qué está pasando aquí. Será Contenido Corporal. Asegúrate de cambiar este de contenido a cuerpo. Ahora entremos al navegador y reflejemos esta aplicación. Todavía estamos recibiendo el tema. Será cuerpo no contento. Bien, vamos a guardar esta. Entremos al navegador. Ahora tenemos nuestros dos post, bien, vamos a cerrar este. Publiquemos nuestro blog con la acción que acabamos de crear en nuestros blogs mentiras. Vamos a darle una T. Vamos a dar clic en Enviar. Se puede ver que esto está funcionando. Así que hemos logrado agregar un blog sencillo con nuestra acción que acabamos crear con la ayuda del kit de herramientas. 45. Aplicación de blog de Project 4: usa Prepara llamadas: Ahora nuestro formulario está funcionando a la perfección. Pero podría ser mejor. Hablemos de eso, porque ahora mismo necesita conocer los detalles sobre el estado. Una vez más, para poder enviarlo correctamente, tiene que enviar un objeto correctamente formateado. Y será mejor si pudiéramos atraer algo de eso. No queremos duplicar este tipo de lógica en cada componente que publique en nuestro estado global. En cambio, podemos manejar esto de nuevo en nuestra mosca con un Callback de preparación Y Prepare Callback puede generar ID único formatear los datos, devolver el objeto con carga útil Y eso es básicamente lo que estamos haciendo aquí. Esto realmente simplificará nuestro componente y se encargará de todo una vez más, vuelta en la rebanada, vamos al Slice aquí. Tenemos que modificar nuestro blog de anuncios. Lo que podemos hacer por aquí, déjame cortar esta de aquí. Vamos a tener un reductor. Bien, vamos a tener, de nuevo, lo mismo. Eso es estado y acción. Podemos simplemente hacer como estado, empujar con acción. Carga útil. Acción, carga útil. Aquí podemos definir nuestra llamada de preparación. Ahora podemos pasar el título y el cuerpo. Entonces podemos devolver objeto formateado. ¿Bien? Y va a regresar con la carga útil. Carga útil de nuevo, vamos a tener ID aquí. Nuevamente, necesitamos traer aquí nano ID. Vamos a traer nano ID, kit de herramientas rojo. Entonces podremos tener nuestro título y cuerpo. Bien, pero nos falta algo por aquí. Forma y algo que nos falta. Déjame revisar aquí. Tenemos que quitar supongo las dos cosas. Bien, y para regresar, tenemos que usar esto. Mi llamado creo que para Esto está bien. Cheque. Bien, esto también se ve bien y aquí tenemos que agregar uno más. Bien, entonces déjame formatear este ahora. Está bien. Se puede ver que aquí pasamos el título y el cuerpo que obtendríamos del componente y luego devolvió la carga útil de acción ya que necesita ser formateada. Hemos regresado por aquí y luego tenemos una carga útil donde definimos ID con nano ID junto con el título y el cuerpo. Hemos modificado nuestra porción con la llamada de preparación. Ahora tenemos que ajustarnos también a la cosa en nuestra forma de bloque. De aquí podemos quitar este objeto y podemos simplemente pasar y cuerpo el resto de la cosa manejará en nuestra rebanada con este prepare call back que acabamos de definir por aquí. Bien, volvamos a este formulario. El beneficio aquí es que nuestro componente una vez más, ni siquiera tiene que conocer en absoluto la estructura del estado. Ahora, todo se maneja dentro del tobogán. Podemos simplemente enviar los datos brutos que necesitamos. Probemos este en nuestro navegador. Voy a volver a mi navegador otra vez. Reflejemos esta aplicación. Vamos a dar alguna prueba de título, Test it Summit. Ahora se puede ver que esto está funcionando. Con esta devolución de llamada de reparación, podemos publicar con éxito nuestro blog. Esta parte se completa aquí. Básicamente simplificamos o codificamos un poco en nuestra rebanada. Ahora ya terminamos con esto y podemos eliminar éste. No necesitamos a NanoDCEO. Ya necesitamos el ID para crear blog porque todo se maneja dentro de nuestro sector. Vamos a deshacernos de esto. 46. Aplicación de blog de Project 4: herramienta de desarrollo Redux: Ahora antes de seguir adelante y en la parte donde vamos a seleccionar del menú desplegable, solo hablemos del rehacer Déjame volver al navegador, refrescar esta aplicación. Primero, voy a abrir una herramienta Redcap. Puede instalar la extensión de la herramienta de cinta adhesiva en su navegador. Voy a abrir a mi derecha. Bien, déjame refrescar esta aplicación. Aquí puedes ver que el estado de nuestra aplicación, conseguimos este bloque de dos en nuestro estado inicial. Y se puede ver el estado en un formato diferente como gráfico. Se puede ver en el gráfico. También puedes ver en el formato raw tienes un formato diferente, diferente para ver el estado de nuestra aplicación. rojo básicamente se usa para rastrear el estado de la aplicación y también puedes rastrear la acción que vas a disipar Intentemos volver a agregar un bloque. Sólo voy a volverte a hacer una prueba. Veamos, Opto, puedes ver que hemos despachado nuestra acción de blog de anuncios en el depo rojo También puedes rastrear el despacho de acción. Conseguimos esta acción. Bien, ahora tenemos tres blogs. En nuestra aplicación, se agrega este blog. Puedes ver que este nuevo blog se agrega en nuestra tienda. También puedes calcular la diferencia aquí. Bien, este nuevo blog se agrega en nuestra tienda. Esta es una acción que acabamos de enviar pulsando el botón Enviar. Se trata de la descripción básica de herramienta Reduct Tap y cómo usar esta herramienta de reducción siempre que esté usando reduct en una aplicación de reacción Ahora, voy a minimizar esta. 47. Aplicación de blog de Project 4: crea una sección de usuario: Ahora voy a empezar a trabajar en la parte del usuario en esta aplicación para que usuario pueda seleccionar al usuario del menú desplegable mientras presenta el blog. Voy a tener una carpeta más dentro de estas características. Voy a tener una carpeta como usuarios, vamos a tener una mentira, mentiras como, de nuevo, necesito crear slice a partir de Reduct toolkit Resaltemos de la rebanada del kit de herramientas Reduct. Entonces sólo voy a colocar el estado inicial. Vamos a tener algún usuario predeterminado para que puedas seleccionar del menú desplegable de usuarios Ahora después de eso, vamos a tener un slice de usuario. Vamos a proporcionar el nombre de la rebanada. Será, podemos pasar su estado inicial. El reductor será el objeto vacío. Ahora de nuevo voy a crear un selector aquí para el usuario exportar seleccionar todo. Vamos a tener una función anónima. Será estado y estados. Entonces podemos exportar el reductor predeterminado de exportación. Entonces podemos conectar este reductor en nuestra tienda. Vamos a este archivo de tiendas. Sólo puedo copiar esta, esta declaración de importación. Este será usuario, vendrá de mentiras. Tenemos que cambiar toda la parte. Vendrá de la carpeta de usuarios y luego los usuarios rebanan. Aquí estará, y los usuarios reductor. Terminamos con el slice de usuario en esta aplicación. 48. Aplicación de blog de Project 4: incluye usuarios en Dropdown: Ahora volvamos a esta forma de bloque. Aquí tenemos que traer primero a todos los usuarios. Tenemos que traer selector también. Aquí podemos tener nuestro todo usuario, bien, podemos traer el selector que acabamos de definir en este slice. Vamos a traer esto seleccionar todo el código VS de usuario va a importar automáticamente para mí. Bien, no es importar en tu caso, así que tienes que importarlo manualmente. Ahora tenemos todos los usuarios, bien, podemos simplemente descomentar esta línea de código aquí Lo que tenemos que hacer, vamos a tener una opción. Opción. Queremos a todos los usuarios, podemos mapearlo. Vamos a hacerlo, tener una opción será como usuario. Podemos clavar aquí un usuario de valor. Después dentro de este nombre de usuario. Vamos a usar esta opción de usuario aquí. En el desplegable aquí, podemos tener opción de usuarios. Veamos si podemos ver al usuario o no en el desplegable. Volvamos al navegador. Aquí tenemos a nuestros tres usuarios que hemos definido en nuestra vida de usuario, Eso es John Doe, Nancy y James Bond Esta parte está hecha, pero aún así tenemos que hacer alguna modificación también antes de publicar nuestro nuevo blog con estos últimos cambios. 49. Aplicación de blog de Project 4: modifica la acción y prepara la devolución de llamada: Qué cambios tenemos que hacer aquí. Entendamos que uno, mientras agregamos el bloque, también vamos a pasar al usuario. Bien. Aquí lo que vamos a hacer, puedes ver que para desplegable estamos usando aquí, handle, user, handle user básicamente va a restaurar al usuario, ok, va a restaurar el ID de usuario Como se puede ver que aquí en manejar la función de usuario. Pasemos aquí también el ID de usuario. Debido a que inicialmente estado hemos definido tres cosas como cuerpo del título y el ID de usuario para nuestro formulario de blog, estamos pasando este ID de usuario ya que tenemos esta parte de acción mientras despachamos este bloque de anuncios, hemos agregado un argumento más, es decir, ID de usuario, como qué usuario básicamente está publicando el blog También tenemos que modificar o preparar función de devolución de llamada que hemos definido en el blog li, vamos a entrar en ese archivo Déjame volver a ese archivo que es rebanada de blog. Entonces ahora va a recibir el ID de usuario. Bien. Por lo que el ID de usuario va a recibir y será ID de usuario. Bien. Por lo que tenemos modificar nuestra llamada de preparación. 50. Aplicación de blog de Project 4: muestra tu blog con el usuario: Ahora tenemos que hacer también algunos cambios en nuestro componente de usuario de blog. Bien, por el momento solo está mostrando al usuario desconocido. No estamos mostrando el nombre de usuario. Bien, antes de hacer eso, volvamos a este archivo de lista de blogs. Aquí. Se puede ver que estamos pasando el ID de usuario. Estamos mapeando cada bloque que estamos recibiendo de nuestra tienda. Y estamos pasando el ID de usuario aquí, bien, a este componente de usuario de blog. Podemos mencionar este ID de usuario aquí. Bien, después de eso, lo que tenemos que hacer, tenemos que traer el primer selector de React Reader. Debido a que necesitamos encontrar qué usuario básicamente está publicando el blog, necesitamos primero que todos los usuarios que tenemos en nuestro sector de usuario seleccionen primero. Entonces necesitamos antes que nada, todo el selector de usuarios. Y podemos pasar aquí el selector que tenemos definido en el sector de usuario, seleccionar todos los usuarios puerto puerto automáticamente para mí. Entonces después de eso podemos escribir aquí una lógica básica. Necesitamos encontrar ese usuario en particular que podamos usar aquí todos los usuarios encuentran que vamos a tener cada usuario, ya estamos recibiendo el ID de usuario de nuestro componente de lista de bloques. Será como punto ID. Y si el ID es coincidente, entonces vamos a agarrar a ese usuario y vamos a mostrar el nombre. Lo que tenemos que hacer por aquí, vamos a quitar éste primero. Si tenemos el usuario, entonces nombre de usuario L, será usuario desconocido. Bien, vamos a guardar este archivo. Vayamos también a este archivo js del formulario de bloque de anuncios. Aquí. También voy a vaciar el campo desplegable, ID de usuario, y estará vacío después de enviar el blog Antes de publicar un blog con todos estos cambios, quería desactivar el botón Enviar hasta que todo el campo fuera llenado por el usuario. Lo que puedo hacer, puedo tener uno es llenar. Se va a comprobar si cada campo de entrada tiene algún valor o no. Podemos usar tu título de lingotes Lingotes, será lingotes de cuerpo, será ID será Este botón se desactivará. Si alguna entrada archivada queda vacía, solo podemos verificar esta. ¿Bien? Veamos si está funcionando o no. Tenemos que volver al navegador. Reformular este Voy a seleccionar un usuario aquí, John Doe. Demos una prueba de título. Demos una prueba corporal. Ahora puedes ver que este botón consiguió después de enviar el valor en cada campo de entrada. Vamos a hacer clic en Summit. Ahora puedes ver que esta vez también tenemos el nombre de usuario. Ese es John Doe. Bien, esta parte también se completa por aquí y puedes ver que también hemos podido publicar con éxito podido publicar con éxito un blog con el nombre de usuario. Aquí terminamos con la selección del usuario y publicamos el blog con el nombre de usuario específico. 51. Aplicación de blog de Project 4: acción Redux para gustar o no: Sigamos adelante y trabajemos en el resto de la funcionalidad que tenemos en la aplicación. También tenemos que implementar la funcionalidad como y disgusto Siempre que el usuario haga clic en el botón Me gusta o no me gusta, va a aumentar Trabajemos también en esa característica. Con el kit de herramientas reduct, necesitamos escribir una función reductora para eso Y antes de escribir una función reductora, modifiquemos de nuevo la llamada de reparación. Se puede ver que en estado inicial tenemos un objeto de respuesta y diferencia vamos a tener lo mismo en la llamada de reparación también. Primero, vamos a dar respuesta, ¿de acuerdo? Y será como inicialmente, será ero, todo el conteo será cero. Ahora, cada vez que un usuario creó un blog, vamos a guardar este. Ahora comencemos a escribir una función reductora para que le guste o no me guste la p. voy a tener aquí respuesta agregada función reductora que es responsable de o no gustar el ping una acción de estado de la carga útil de acción Vamos a recibir dos cosas. Siempre que un usuario despache una acción mientras le gusta o no le gusta el P va a recibir el ID del blog y la respuesta Se puede ver que este componente aquí tiene un nombre y emoji que he usado por aquí como entrada de objeto. Debido a que este es un objeto y estamos mapeando sobre él, este nombre es clave y mog es valor Vamos a pasar dos cosas, es decir qué bloque nos está gustando básicamente y la imagen. Trabajaremos más adelante en este componente. Primero, trabajemos en esta carga útil de facción de función reductora Vamos a recibir dos cosas, es decir, ID de blog y respuesta. Tenemos que revisar el blog existente en estado. Tenemos nuestro todo blog state find, vamos a tener blog primero. Tenemos que coincidir básicamente con el blog, qué blog básicamente nos está gustando, disgustando. Primero, tenemos que agarrar blog particular y aquí podemos dar este ID de blog. Si tienes el blog existente, entonces respuesta de blog existente. Aquí, respuesta aquí, básicamente vamos a incrementar, ¿de acuerdo? 52. Aplicación de blog de Project 4: muestra cómo te gusta/no te gusta/no: Lo que tenemos que hacer a continuación. Cosa que necesitamos traer primero despacho enorme de react reducts, despacho enorme Aquí necesitamos primero la referencia de despacho en una variable de despacho. Este componente también va a recibir un blog. Bien, De nuestra lista de blogs. Bien. Se puede ver que por el momento no estamos pasando nada. Pasemos su blog y solo podemos bloquear en particular. Bien, ahora este componente de botón de respuesta está recibiendo el blog en particular. Aquí lo que podemos hacer al click, básicamente podemos despachar un despacho de acción. Podemos llevar la acción. Nosotros hemos creado la acción, pero supongo que no hemos exportado. Exportemos este. Bien. Ahora volvamos a este botón de respuesta aquí. Primero, tenemos que traer esa. Tenemos que traer esa función reductora de función blog slice. Tenemos que traer respuesta agregada. Entonces podemos despachar esta respuesta agregada. Tenemos que pasar dos cosas. Es decir, primer ID de blog, ya estamos obteniendo de este blog blog dot ID. Será, es decir, tenemos que mostrar también el conteo. Hagámoslo. Una respuesta de blog y podemos pasar aquí nombre. Entremos en el navegador y veamos si está funcionando o no. Primero, refiérase éste. Ahora se puede ver que inicialmente conseguimos el conteo cero. Bien. Si haces clic en este , no va a incrementarse. Déjame ver qué está pasando. Podemos despachar una acción o no. Primero, veamos que una acción no está despachando en absoluto En realidad, tenemos escribir esta función reductora fuera de este objeto reductor, ¿de acuerdo? Se está cerrando aquí. Tenemos que escribir aquí en realidad. Bien, éste. Y pegarlo por aquí. Refresca este primero. Esto está funcionando, ¿de acuerdo? Como se puede ver que esto se está incrementando. Agreguemos un blog aquí con Nancy. Vamos a darte una prueba. Vamos a copiar éste. Vamos a enviar, veamos si podemos dar me gusta o no a este blog recién creado. Esto también es trabajo. Puedes ver que nuestra funcionalidad también está funcionando en esta aplicación. Con la ayuda del lector tomó. Parece que todo está funcionando en esta aplicación de blog Imple 53. Resumen: Si estás viendo este video, eso significa que has completado con éxito este curso y espero que tengas una comprensión completa sobre cómo trabajar con reduct toolkit en la aplicación React. Después de eso, también podrás integrar redact toolkit en cualquier reaccionar existente rechazado. Y también puedes convertir esos proyectos React en los que el viejo código Redux utiliza esos proyectos que puedes convertir fácilmente en Reduction Toolkit. Eso es todo desde mi final. Si tienes alguna consulta o punto, entonces puedes poner tu consulta en la sección de comentarios. Voy a intentar mi nivel mejor para resolver su consulta. También puedes visitar mi canal de YouTube para obtener más contenido sobre reactivo o producto que puedes adquirir más conocimientos sobre React y editor el jueves, siempre puedes visitar mi este oficial Canal de YouTube para más grieta de un reactivo. Y si miras mi lista de reproducción, tengo una deuda pose diferente, diferente en un React. Tengo algún proyecto principiante, proyecto reduct. También los he construido aplicación clon, y también tengo una aplicación full-stack. Entonces chicos, siempre pueden visitar mi canal oficial de YouTube para más de un reactivo Redux. Eso es todo desde mi final. Muchas gracias chicos por tomar este curso. Te veré en otros cursos.