Guía completa de la consulta de RTK con React JS

1. Introducción: Hola y bienvenidos a este curso, guía completa de consulta RTK con React js, daños menores, alguna iteración. Y seré tu instructor en este curso. Y en este curso vamos a aprender herramienta muy poderosa para la obtención de datos y el almacenamiento en caché llamada consulta articulada. Si usted es un desarrollador de React, entonces podría estar usando el enrutador como una administración estatal para que su aplicación React mantenga la aplicación en su lugar. Y es posible que también esté usando la lengua Redux o middleware del registrador redox para manejar el efecto deseado en su aplicación React. Por lo que definitivamente redact equipo se le ocurrió el nuevo enfoque para escribir lógica. Por lo que la edad de consulta del artículo introducido por el mismo reductivo para hacer el ajuste de datos y el almacenamiento en caché con la redacta lo más fácil posible. Y está construido sobre el kit de herramientas redact. Eso significa que no tienes que instalar paquete adicional para trabajar con Arctic jQuery, solo tienes que agregar paquete Toolkit en tu aplicación React. Con la ayuda de la consulta de artículos, nuestra lógica de Rudolf será más relable y concisa. Ahora, permítanme darles el breve panorama de Rudolf a aquellos de ustedes que no saben de qué es. Entonces redact failure es biblioteca de administración estatal que usamos en nuestra aplicación React, así como vas a usar dentro de tu aplicación. No solo con React, sino que es muy popular con la biblioteca React. Entonces 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 algunos conceptos teóricos. Al igual trataremos de entender el problema central de React y por qué usamos Redux con el React. Entonces entenderemos como qué es un kit de herramientas y qué APA en pegado dentro de la consulta de artículo. Todo este concepto lo vamos a entender con la ayuda de la pubertad. Y después de eso, construiremos nuestra solicitud de crédito React con la ayuda de RTK query y JSON fijo. Con la ayuda de esta aplicación, vas a entender cómo escribir una serie de endpoint con la ayuda de RTK query API, vas a aprender a hacer solicitudes api que consiguen, pongan, publiquen y eliminar. Esto golpeó la aplicación general que vamos a construir en este curso con la ayuda de jQuery duro. Ahora, hablemos del requisito básico antes de inscribirse en la discordia. Este curso está diseñado de tal manera que cualquiera puede unirse a este curso que esté interesado en aprender el concepto moderno de Redux, solo necesita tener comprensión básica de HTML, CSS, JavaScript, así como Reaccionar los conocimientos básicos. Y al final de este curso, tendrás plena comprensión del concepto de consulta RTK y también podrás implementar consulta articulada en tu cualquier proyecto de React adictivo. También podrás reemplazar si la vieja lógica redacta presente en tu cualquier proyecto React con esta consulta de artículo, ¿qué estás esperando para unirte a este curso con el fin de 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-Toolkit?: Así que ahora vamos a entender cuál es el buen lector total para liquidar también utilizar para administrar aplicación if declaración 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. Los routers 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 configurarlo, para optimizar ese nivel básico. Y con ello demasiado código de calderas, lo 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. En general, el lector para mirar su periodo de la reducción y desarrollo mediante la inclusión lector Corbett redact herramienta buenos párrafos que creen que se llenan para construir una aplicación nativa. Así que redact toolkit 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 contador. 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 tener, note aquí, 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 escribir la mutación lógicamente, reduciendo. Todo esto se trata del kit de herramientas del lector con el escenario básico. 4. Comprender consulta RTK: Ahora vamos a entender qué es la consulta RTK. Rtk consulta ya sea poderosa herramienta de búsqueda de datos n rastreo. Se utiliza principalmente para obtener el servidor com de datos y su caché, los datos para su uso futuro. Y aquí también se menciona que está diseñado simplificar los casos comunes para cargar datos en aplicación web, eliminando el nicho para escribir a mano la obtención de datos y la lógica de almacenamiento en caché usted mismo. Aquí, no tenemos que escribir lógica manualmente, cargando, lanzando nuestra parte de error cada vez que tengamos que hacer una solicitud API. Entonces, en general, ¿qué pasó? Consulta articulada se encargará de toda esta tarea detrás del escenario. Consulta general del artículo proporcionó un poderoso conjunto de herramientas para definir la capa de interfaz API para nuestra aplicación. Y no es necesario instalar un paquete adicional para trabajar con la consulta de artículo porque la consulta artículo se construye en la parte superior de la otra API en el paquete kit de herramientas del lector. Por lo que no tienes que instalar la consulta de artículo adicionalmente en tu aplicación. Ahora veamos qué APA, incluyendo científicos RTK consulta archivo para crear API. Por lo que el PI creativo es el núcleo de la funcionalidad de consulta de artículos que le permiten definir un conjunto de puntos finales. Describir cómo recuperar los datos de una serie de endpoint, incluida la configuración de cómo pescar transformar esos datos. Y en la mayoría de los casos, debemos usar esto una vez por. En general en VA creativo, definimos un endpoint diferente, diferente, se puede llamar serie de endpoint. Todo esto se trata de lo creativo aquí. Ahora hablemos de la consulta base. Consulta basada en la creencia. Es pequeño envoltorio alrededor de ajuste. Para simplificar la solicitud. En el interior se llena de consulta, definirá la URL base para nuestra API. Ahora vamos a hablar el proveedor de API del proveedor de API se puede utilizar como proveedor si no tiene un reduct está almacenado. Si no lo tenemos almacenado en tu aplicación. Para que puedas usar este proveedor de API. En este curso, no vamos a seguir este enfoque. Seguiremos el enfoque tradicional. Por lo que básicamente traemos al proveedor de React redact library y envolvemos nuestro componente de aplicación con el proveedor y pasamos nuestro restaurado al componente de aplicación. Este APA proporcionó enfoque que no vamos a utilizar en este curso. Ahora, hablemos de la última que es utilidad de escucha de configuración utilizada para permitir la investigación sobre em en y reflexionar sobre la reconexión que tenemos aquí. Todo esto se trata de la consulta del artículo. 5. Configuración de proyectos: Chicos, ahora vamos a configurar nuestro proyecto React. Voy a usar plantilla TypeScript. Así que vamos a copiar este comando aquí. Y ahora voy a entrar en mi directorio. Aquí. Voy a abrir un símbolo del sistema, y vamos a pegar ese comando. Y voy a cambiar el nombre de la aplicación. Por lo que tengo RTK guión actual. Vamos a golpear Enter. Tardará alrededor de dos a tres minutos para instalar toda la dependencia necesaria. Volveré 12 toda la dependencia que se diga sobrevive. Ahora se crea nuestro proyecto. Y ya he abierto este proyecto en Visual Studio Code. Entremos primero en el código VS y abramos el archivo package.json. Veamos lo que tenemos en nuestro archivo package.json. puedas ver que ya nos hemos deshecho un toolkit y un paquete dxdt Redux porque hemos usado este comando para crear nuestro proyecto React. Si está utilizando este comando, entonces no es necesario instalar manualmente el kit de herramientas del lector y reaccionó ydx. Por eso he usado este comando para crear nuestro proyecto React. Tenemos nuestro kit de herramientas reduct y paquete de índice cardiaco. Ahora, ¿qué tenemos que hacer? ¿ Hasta ahora? Voy a hacer una limpieza aquí un poquito. Por lo que no necesitamos carpeta de características para este proyecto. Vamos a quitar este. Todos, tampoco necesitamos esta carpeta de aplicaciones. Digamos que elimine este también. Un archivo TSX de punto de aplicación. Lo que tenemos que hacer una pelea, voy a eliminar todo este contenido no deseado que no se requiere para nuestro proyecto. Vamos a quitar este. Mantengamos este rumbo. Al igual que no me gustó la consulta RTK. Digamos que mueva toda esta cosa. Eliminemos también el archivo de prueba. Y un expediente en profundidad o TSX. Blush para comentar aquí esta línea de código. Y también dejó para comentar éste. Vamos a hacer descomentar esto más adelante una vez configuramos nuestra herramienta redacta, la grilla en esta obligación, y además comentar esta línea de importación y esta línea importante porque después se va a requerir antes de que hagamos npm, instalamos algunos paquetes, voy al directorio y voy a instalar paquete como React, router down. Y también voy a llamar reactivo, porque también vamos a utilizar la notificación de par en este proyecto. Entonces cualquiera de los dos métodos de error, nuestro mensaje de éxito instalemos primero estos dos paquetes. En tanto, voy a crear archivo db.json porque vamos a utilizar el servidor JSON en este proyecto. Vamos a crear el archivo db.json en el directorio raíz. Aquí voy a pagar algunos datos. Por lo que acabo de pintar algunos datos iniciales que podemos empezar nuestro trabajo. Y también puedes crear los datos a partir de la orina. Tienes que inyectar add name, te pondrás en contacto con un ID. Para poder ejecutar este servidor JSON, tenemos que escribir un script en nuestro archivo package.json. Voy a escoger un guión por aquí. Ves el script requerido para poder ejecutar nuestro servidor JSON. Jason cerebral encenderá 5 mil puerto. Veamos si nuestro instalador de paquetes no. Entonces nuestro paquete se puso alto. Ahora, vamos a hacer aquí y también voy a recortar anuncios de servidor JSON. Bueno, este es nuestro directorio de proyectos y voy a anexar un símbolo del sistema más aquí. Y voy a hacer aquí y el servidor. Podemos acceder a este recurso en esta URL. Así que vamos a copiar esta URL. Por error. Scott cancela. Empecemos de nuevo este servidor Jetsons. Podemos acceder a este recurso en esta URL. Así que vamos a copiar este. Entrémonos en el navegador. Se puede ver que somos capaces de mostrar todos los datos que tenemos en nuestro archivo y db.json. Entonces este es nuestro dato inicial que he puesto en mi archivo db.json. Este es nuestro dato inicial que se muestra en nuestro navegador en esta URL. 6. Estructura: Por lo que ahora voy a recoger sentado o proyecto. Voy a crear un par de carpetas aquí. Carpeta voy a tener páginas. La siguiente carpeta vamos a tener generalizada. Siguiente carpeta vamos a tener modelo porque estamos usando aquí TypeScript. Por lo que tenemos que crear un modelo para estos datos de contacto. Ahora, vamos a tener un recorrido bajo la fuente. Así que vamos a crear aquí si dor dot dS, no JS, porque estamos usando TypeScript, por lo que podría ser TSX. Aquí, obtendrás un error. Hasta el momento. Ahora, lo que podemos hacer aquí, exportar, const store. Podemos darle a su consola dot log la barra de error. Ahora, vamos a quitar esto más adelante. Ahora lo que voy a hacer, voy a rechazar esa nuestra ruta. Entonces voy a crear algunos archivos aquí. Agregado, voy a crear editado consiguió THF. Aquí vamos a utilizar el mismo archivo para agregar el nuevo contenido o actualizar el contacto saliente. Para esto lo agregó. También vamos a tener archivo CSS para este caso, así que lo agregué dot CHS. En la siguiente página vamos a tener casa en la que vamos a mostrar todo el contacto en un componente de tabla. Para esto también, vamos a usar archivo CSS. Así que casa dot CSS. La última página que vamos a tener en página completa en la que vamos a mostrar un solo detalle de contacto. Para esto también, vamos a utilizar el archivo CSS info dot css. Y por ahora, solo voy a generar aquí un fragmento reactivo. Y sólo voy a dar rumbo tenía porque voy a rechazarla esta ruta en nuestro archivo app.js. Generemos este fragmento aquí también. Será en casa. Y generemos un fragmento en nuestro archivo txt punto de entrada también. Será en su totalidad. Primero vayamos a nuestro archivo app.js, que voy a registrar toda esta ruta desde el router React hacia abajo. Tenemos que traer componente superior izquierdo. Necesitamos aquí rutas, rutas, navegador, router, y vamos a quitar esta. Y aquí voy a usar el router del navegador. Rutas en las que voy a rechazarla toda ruta de sequía va a ser la ruta de casa. Estamos usando la sequía del año, aunque no necesitamos proporcionar la palabra clave exacta. Entonces aquí estamos usando la versión actualizada del router reaccionar hacia abajo. Se puede ver que en nuestro paquete o archivo JSON reacciona con el Dr. Dom consiguió un amargo a vergencia. Vas a ver que tampoco estamos usando switch aquí. Estamos usando rutas y aquí no será componente, será el elemento. Podemos traer nuestro componente hogar código VS importar automáticamente ese componente para mí. Copiemos este par de veces. Este será el add, add context. Vamos a traer el componente agregado. Ahora, éste será el Editar Contacto. Vamos a leer el contexto y en base al ID, vamos a usar el mismo componente, pero actualizando el contacto de expulsión. El tiempo de vida, vamos a tener una página de entrada en la que podamos ver el solo detalle de contacto. Estará involucrado. Y vamos a ser el único contacto. Se basará en el DNI. Aquí. Vamos a traer el componente info. Vamos a verificar en el navegador si todos estos enrutados, rechazados o no. Entrémonos en el navegador. Se puede ver esa ruta domiciliaria llamada el detector. Muy mal al contacto. Dijeron todo surjetivo, Vamos a verificar editar contacto. En caso de que hiciéramos contacto tenemos con ante su DNI. Por lo que va a renderizar la misma página porque estamos utilizando la misma página antes de agregar el nuevo contenido o actualizar el contenido existente. Ahora vamos a verificar la info también en caso de arriba en false. Por lo que vamos a proporcionar el DNI. También fue rechazado. Hemos rechazado con éxito nuestra antigua ruta en esta aplicación. 7. Configuración de consultas RTK: Ahora vamos a empezar a trabajar en nuestra consulta RTK. Para que como se puede ver que en nuestro archivo db.json, ya tenemos algunos datos iniciales. Voy a escribir una consulta para enfrentar todos los datos que tenemos en nuestro archivo db.json. Voy a crear un archivo aquí y carpeta de cosecha. El nombre del archivo será como contextos, APA dot TSX. En este archivo, vamos a crear una serie de endpoint con la ayuda de crear API desde toolkit. Y tenemos que ir a Query, luego reaccionar. Y tenemos que traer crear API y muy basado en la fe álbum en el que vamos a proporcionar nuestra URL base. Y tenemos que crear también un modelo aquí. Por lo que será como modelo de punto de contacto, dot ts. En esto voy a crear una interfaz para nuestro contacto. Puedes ver que nuestro contenido tendrá ID, nombre, correo electrónico, y contacto. Dejar ir a este contexto API dot txt archivo. Aquí. Vamos a traer esa interfaz desde nuestra carpeta modelo. Contacto. Ahora aquí vamos a crear nuestra serie de endpoint con el álbum crear API, exportar, contactos API. Vamos a usar tu API. Aquí. Voy a reducir su camino. Esto es un requerido porque necesitamos conectar este servicio con nuestro código. Podemos darle una parte reductor Contexto API solamente. Aquí vamos a tener nuestro emparejamiento base en el que vamos a especificar nuestra URL base. Y Thaddeus consulta basada en la creencias. Nuestra URL base, http localhost. 5 mil. Después de eso, vamos a crear un odio al punto final. Vamos a usar tu patrón. Después de eso. Vamos a crear nuestra consulta aquí. Contextos consulta de puntos. Aquí. Vamos a recuperar toda nuestra consulta en forma de área de objeto. Tenemos que proporcionar este modelo. Y tenemos que especificar esta área porque nuestra, nuestro contactado if tour en una matriz de objeto en nuestro archivo db dot JSON. Se puede ver eso aquí. Por eso lo tengo dividido por. El segundo argumento será el cableado porque no estamos pasando nada al argumento. Será cableada. Dentro de eso vamos a escribir consulta. Y aquí estamos. Por favor especifique nuestro punto final. Será contacto. Esta consulta básicamente expone una rodilla. Espero que podamos conseguir este gancho de rodilla de esta manera. Desde nuestra API de contactos. El gancho de rodilla será como enorme consulta contextos. Cualquiera que sea el nombre que te vas a dar, vas a exponer un nuevo gancho como esta manera. Veamos si estás dando aquí sobre los datos. Ahora, nuestro nuevo gancho se convertirá en EU. Usar consulta de datos, ¿de acuerdo? Depende de ti cualquiera que sea el nombre que vas a dar. Por lo que la consulta se cambiará. Ahora será consulta de contextos de uso. Espero que estén recibiendo mi punto aquí. Ahora ya terminamos con nuestra primera consulta, cual es la encargada de obtener los datos que tenemos en nuestro servidor JSON. Tenemos que configurar nuestra tienda. Entonces vamos a quitar este pedazo de código y vamos a traerlo configurado a nuestro kit de herramientas. Tienda tan configurada. También tenemos que traer esa API de contexto, carpeta de servicio, API de contactos. Aquí vamos a configurar. Nuestra exportación se almacena, es igual a configurar tienda. Aquí lo voy a usar. Es contextos api dot reducer path. Tengo que especificar la ruta del reductor en nuestros contextos api dot txt file para que se pueda conectar con nuestros contextos históricos api dot reducer. Y aquí también voy a usar middleware, middleware. Y voy a usar middleware predeterminado. Tan bueno por defecto, vajilla media. Buen middleware predeterminado. Conquistado. Y vamos a convertir nuestra API de contacto. Con Middleware. Estamos terminados con la configuración de la tienda. Ahora vamos al archivo índice dot txt. Y podemos simplemente hacer descomentar todo el tratamiento importante y éste también, el proveedor uno. Estamos lanzando el camino de si torr. Ahora está en carpeta fuente, por lo que podemos especificar el espacio por esta ruta. Ahora podemos verificar éste si estamos configurados con éxito nuestro kit de herramientas reduct o no. Pasemos al navegador. Vamos a la página de inicio. Abramos nuestra herramienta de reducción de profundidad. Veamos si el estado. Ahora se puede ver que tenemos esta consulta es mutación proporcionada y suscripciones. Y que cuando hayamos configurado con éxito nuestro kit de herramientas reduct en esta aplicación React. 8. Obtener datos con RTK Query: Ahora vamos a mostrar todos los contextos que tenemos en nuestro archivo db.json en un componente de tabla. Así que vamos a entrar en el Código VS. Para que puedan ver que ya tengo algunos datos en nuestro archivo db.json. Entonces primero, voy a mostrar los datos en ese componente de tabla en el archivo home.html. Vamos a hacer eso desde React 5k. Vamos a traer efecto de Estados Unidos. También necesitamos traer el modo link, React router dom. Después de eso, también vamos a necesitar tostadas también. Demo reactor. Vamos a traer este también. También vamos a traer este archivo CSS también. Entonces importa casa, no CSS. Voy a pagar el código CSS por este archivo. No te preocupes por todo este código CSS porque ya tengo en este archivo CSS a esta conferencia. Puedes encontrar este archivo CSS en esta propia conferencia. Vengamos a este archivo home.html. Ahora, lo que tenemos que hacer, vamos a utilizar que se pondría en contacto con consulta para obtener los datos que tenemos en nuestro archivo db.json. Usar consulta de contacto. Se puede ver que nos llaman automáticamente importar ese. Ahora, ¿qué tenemos que hacerlo una vez que se haya escalonado el servidor de base de datos, por lo que básicamente nuestro auditor presentará en los datos. Se puede ver que en estos datos vamos a tener todos los datos que tenemos en nuestro archivo db.json. Ahora también puedes atraer alguna más propiedad. También puedes traer como carga. Cargando, también puedes usar aquí cada conmutación. Se puede ver que esta consulta proporcionada en propiedad diferente, diferente como más fácil cada pitcheo éxito. Puedes usar este. Y vamos a utilizar sólo los datos está cargando n parte de error también. Según su conveniencia, también puede usar otra propiedad también si lo desea, pero voy a usar solo la propiedad tres de esta enorme consulta contextos. Ahora tenemos todos los datos. Ahora, tenemos que mostrar datos en un componente de tabla. Vamos a quitar este. Voy a dar algún año de azuleado Atlantis. Vamos a dar aquí margen top 100 pixel. Después de eso, voy a tener un enlace. Básicamente nunca llegará hacia la página de contacto de la cabeza. Contacto. Entonces vamos a tener un botón con el nombre de la clase. Agrega el valor de qué envolvente con el contacto add. Ahora, después de este enlace, vamos a tener un par de descanso. Entonces vamos a tener una mesa con la tabla de estilo de nombre de clase. Ahora, esta tabla está fallando de tabla es incorrecta, por lo que será una mesa como esta manera. Ahora dentro de esto, vamos a tener cabeza de mesa primero, tercera mesa, vamos a tener fila de mesa. Entonces vamos a tener cabeza de mesa. Primera columna será el ID. Podemos darle un azulejo como un centro de longitud, línea, centro. Y voy a hacer un par de copiar esta línea de código. Esto se convertirá en nombre, correo electrónico, contacto con la acción en la que podemos realizar una operación de eliminación, se consulta RTK. Ahora después de esta cabeza T, formateemos esta. Entonces después de esto escalonado, vamos a tener nuestro cuerpo T. En el cuerpo, vamos a mostrar nuestros datos que tenemos en nuestro archivo db.json. Así mapa de puntos de datos, mapa de puntos de datos. Podemos tener artículo. Podría ser cualquier sentido. Estamos utilizando aquí TypeScript, así que tenemos que proporcionar éste. De lo contrario, obtendrás un error. Índice será también el enemigo. Ahora después de esto, vamos a ser juguetones. Devolver la fila de la tabla. Tenemos que definir clave aquí. Id. del punto del artículo. Dentro de la fila de la mesa. Vamos a tener primer cabezal de mesa de edición fotográfica solamente. Podemos darle una fila de alcance. Aquí vamos a usar index más uno porque en área en profundidad iniciaron desde 0. Por lo que vamos a ser éticamente aumentar el índice más uno. Por lo que esto no será ID, puedes dar aquí número. No debe ser IID. Y después de esto, ¿qué tenemos que hacer? ¿ Ahora? Vamos a tener nuestros datos de tabla dentro esto y podemos mostrar el nombre de nuestro artículo. Voy a copiar un par de tiempo. Este tipo de tablero, esto enviará por correo electrónico contacto en la última columna, que, en la que tenemos una acción. Esta acción vamos a tener tres botones para realizar la operación, borrar operación y V datos de intervalo de operación. Vamos a tener el enlace aquí. Y hay que proporcionar dos aquí. Queríamos navegar hacia la página de edición. Primero tomemos la ruta. Tenemos añadir contacto, luego Editar Contacto, Contacto, luego dólar, ítem dot ID. Ahora después de esto, vamos a hábitat. Entonces vamos a mantener el nombre de clase aquí, belleza y belleza y editar. Ahora después de este botón, vamos a tener un botón más para realizar la operación de eliminación. Así botón con el nombre de la clase, btn, btn guión Lily. botón Evaluar será el delete. Pronto definiremos el método onClick aquí también. Primero definamos el botón. Ahora vamos a tener un botón de vista que navegará hacia una sola página de contacto. También tendrá un botón con el nombre de la clase, btn, btn vista de guión. El valor de un botón será la vista. Vamos a navegar hacia la página de información. Info. Podemos especificar aquí dólar. Aquí tenemos que especificar el ID. Revisemos también la página de contacto individual. Con la info Solamente. Vamos al archivo home.html. Y podemos revisar cinco, donde nuestros datos se muestran o no en componente de tabla. Ahora se puede ver que somos capaces de ordenar los datos en un componente de tabla. Tenemos nombre, correo electrónico, contacto y acción. Ahora, también vamos a utilizar esto está cargando también. Por lo que podemos usar aquí la luz está cargando es verdad. Que vamos a mostrar algunos métodos como cargar. De acuerdo, vamos a entrar en el navegador y también podemos verificar éste. Entonces volvamos a cargar esta aplicación. Ahora se puede ver que ella un breve momento, estamos consiguiendo esto cargando. Ok. 9. Manejo de errores: También utilicemos éste también error. Hasta ahora error, voy a usar aquí el efecto de Estados Unidos. Vamos a usar un efecto enorme. Aquí. Voy a camino teatro independiente en este enorme efecto sólo correr si tenemos algún tipo de error. Podemos darte métodos como tostadas, como algo. También podemos tomar éste, ya sea que esté funcionando o no. Entonces, lo que voy a hacer ahora, vamos al archivo CSS de punto API de contenido. Y aquí sólo podemos modificar éste. Entonces vamos a modificar éste. Tomemos éste. Entrémonos en el navegador. Refresca éste. No vamos a conseguir nada. Deje que la consola inicie sesión este. En realidad estamos recibiendo error de registro de consola. Ya sea que estemos cortando algo o no. Entrémonos en el navegador, actualicemos éste. Por lo que se puede ver que tenemos objeto y tenemos el estado siempre que no estamos recibiendo la notificación porque no hemos configurado nuestro reactor activo alto en el archivo de la app dot txt. Entonces tenemos que configurar este reactor. Entonces sólo podemos ver la notificación. Entonces hagamos eso 1 primero, solo voy a escoger las dos líneas de declaración de importación relacionadas con el reactor. Y podemos usar el contenedor. Entrémonos en el navegador. Ahora se puede ver que tenemos este método como que algo salió mal. También tenemos gusto éste. Ahora, digamos revertir nuestros cambios aquí. Serán contextos. Entrémonos en el navegador. Ahora todo se ve bien. Lo siguiente vamos a trabajar en nuestra agregando el contacto, click en Agregar contenido. Entonces vamos a ser mortal componente de granja solar aquí, en el que cualquiera puede proporcionar el contacto, nombre, correo electrónico y contacto. Entonces hagamos eso en el siguiente video. 10. Escribir POST RTK Query: Entonces para sumar nuevos contextos de tiempo, voy a escribir aquí una consulta. Entonces voy a escribir una consulta como al contacto. Y aquí vamos a escribir nuestro patrón constructor, constructor de mutación de puntos ya que estamos agregando un nuevo dato. Entonces aquí tenemos que escribir una mutación. Aquí lo que podemos hacer aquí, el primer argumento será el objeto, porque vamos a enviar un detalle de contacto en forma de objeto. Y luego nuestro contacto. Después de esto, lo que tenemos que hacer consulta aquí. Entonces póngase en contacto. Vamos a recibir un contacto de nuestro componente. Entonces tenemos que especificar la URL. El URL un poco de contexto único método que tenemos con PHP. Hasta el momento, agregar un nuevo método de contacto los pondrá a ambos. Entonces cuerpo, cuerpo, vamos a enviar el contexto que estamos recibiendo salido componente. Tenemos con pagado por cualquiera de los dos contactos. Aquí. Ahora, vamos a exponer nuevo gancho aquí. Vamos a escribir un nuevo gancho como uso en mutación de contacto. Estamos terminados con la parte de consulta relacionada con agregar un nuevo contacto en nuestro archivo JSON. 11. Componente de forma: Ahora tenemos que crear un componente de formulario en este archivo ID añadido dot txt. Así que hagamos eso de React, voy a traer un enorme efecto de uso estatal. De React, router dom. Tenemos que traer US para y usar navegar. Nosotros paréntesis requeriremos más adelante una vez que realizemos la operación de actualización. Ahora también necesitamos que los jóvenes naveguen para poder navegar hacia el hogar después de agregar un nuevo contacto. También se requiere. Vamos a traer los dedos de los pies también. Vamos a imprimir el brindis. Llevemos este archivo DHS también para esta página. Así que lo agregué dot CSS. Voy a escoger el código CSS aquí y este archivo CSS. Y no se preocupen chicos, ya he adjuntado archivo CSS a esta conferencia para que puedan obtenerlo desde ahí. Ahora, trabajemos primero en nuestro componente de formulario. Entonces voy a definir algún componente inicial de estado o estado. Inicialmente. Nombre, correo electrónico y contacto. Demos tu nombre. Debe estar en masilla email con empatía. Contacto, que será el impétigo. Ahora aquí voy a definir un estado, valor de costo. Set. Valor. Por lo general estatal. Voy a pasar este estado inicial aquí. Ahora puedo tomar todos estos valores de nuestro valor de forma. Podemos hacer taxa como nombre, correo electrónico, y contacto. Y tenemos que también, hacia los esfuerzos de nosotros navegar hacia una variable de navegación, selección a esa también. Lo básico que hemos hecho aquí. Ahora, ¿qué tenemos que hacer primero? Voy a trabajar primero en nuestro Componente de Formulario. Vamos a quitar éste, decide etiquetar. Voy a proporcionar algún estilo en línea. Eso es otra vez, margen, top 100 pixel. Voy a tener aquí. Aquí voy a paguear que alguien línea le está diciendo. De nuevo, hay una línea delgada que está diciendo. Me opongo aquí en la foto. Esta forma o componente de forma estará en el medio. Ahora, después de eso, vamos a tener una etiqueta que será como nombre. Porque será el nombre. Vamos a tener InputField. En esto, vamos a tener un ID de tipo. Nombre. El nombre será sólo nombre. El placeholder será como nombre. Entonces podemos dar tu nombre. Y vamos a tener en el cambio. Depende de ésa también. El cambio de entrada del mango. Definamos éste. Manejar retorno de los forasteros de cambio de entrada. Definamos también el manejador enviar, realizar envío, manejar enviar. Podemos usar manejar Summit aquí. Al presentar. Presentar. Ambas funciones recibirán un evento. Vamos a trabajar más tarde en esta función. Ahora, voy a copiar esta entrada por un par de veces en nuestro correo electrónico y contacto. Esto se convertirá ahora en correo electrónico. Este será el correo electrónico. El ID de correo electrónico se enviará por correo electrónico, nombre será el correo electrónico. Puede darle como correo electrónico evaluado con el correo electrónico y la entrada de luz para disponible el contacto. Contacto. Esto se convertirá en contacto. Este será el único número. Permítanos darte un número tipo. Se convertirá en contacto, nombre se convertirá en contacto. Aquí estará en contacto. Número. El valor se convertirá en contacto. Tenemos dos advertencias aquí. Entonces ya que estamos usando TypeScript, así que aquí puedes dar cualquiera, está bien. Así que vayamos al navegador y verifiquemos si nuestro componente de granja se está mostrando o no. Entonces nuestro componente de formulario se muestra aquí. Ahora nos encontramos con un botón aquí. Así que vamos a añadir ese botón también. De crédito InputField, vamos a agregar ese botón. tipo de entrada será la cumbre. Y te vamos a dar un valor ligero. Valioso, valioso ser como. Vamos al navegador. Ahora se puede ver que tenemos nuestro botón también. Entonces nuestra fórmula está lista ahora. 12. Usa POST Query para añadir datos: Ahora lo siguiente vamos a sumar nuestro nuevo contacto y ese archivo db.json. Entonces vamos a utilizar la consulta. Primero. Trabajemos primero en esta función. Manejar el cambio de entrada, separarlo de un destino de punto, nombre y valor. Entonces sobre el valor. Podemos extender el valor de la bomba. Entonces podemos hacer como nombre, valor de columna. Así maneje la entrada hecha. Ahora, vamos a trabajar en manejar presentar. Lo vamos a hacer es prevenir el incumplimiento. Para evitar el comportamiento predeterminado de un navegador. Después de esto, solo vamos a verificar que el usuario no hubiera proporcionado nombre o e-mail nuestro contacto con ellos. No se lo quiero a alguien en formato PDF. Entonces en ese caso, quería editar un método en el mismo en forma de ambas notificaciones. te podamos dar un error de punto de antorcha. Podemos dar método como Por favor proporcione valor a cada entrada. Vamos a salvar este. Y en la otra parte, vamos a ser éticamente, utiliza esa consulta que hemos creado en nuestro archivo de contacto api dot txt. Entonces aquí tenemos que hacer algo. En la parte superior. Tenemos que traer esa consulta. Utilice la mutación de contacto. Tenemos trayendo aquí. Ahora, necesitamos agregar contacto. Contacto. Y este contacto que vamos a utilizar aquí en nuestra cumbre de mango. Hizo manejar presentar será la cosa. Veamos enorme escuchar cualquier cosa. Después de eso. Podemos simplemente hacer como un extraño en contacto. Aquí. Podemos proporcionar nuestro valor de forma, valor de forma completa. Después de eso, podemos navegar a la página de inicio y podemos darle un mensaje de éxito como contacto agregado con éxito. Contacto agregado con éxito. Ahora, podemos verificar éste si está funcionando o no. Así que vamos a entrar en el navegador. Recarguemos la app. Luchemos varíe por la validación del campo de entrada de empatía. Así que vamos a hacer click en Agregar. Ahora puedes ver que tenemos nuestra notificación de torque. Ahora vamos a añadir un contacto aquí. Así que vamos a darle un nombre lactasa por ahora. Y luego en gmail.com, mantengamos algún contacto. Y vamos a hacer clic en la mano. Ahora puedes ver que somos capaces de agregar con éxito el contenido en nuestro componente de tabla. Entonces chicos, hemos realizado la operación de add con la ayuda de consulta RTK. 13. Escribir consultas: Ahora vamos a realizar la operación de eliminación. Entonces para diluir un contacto, primero, vamos a escribir una consulta en el contexto API dot txt file. Vamos a escribir cinco consultas para borrarlo contacto. Después de esto vamos a tener una consulta más como borrar contacto. Eliminar contacto. Vamos a construir un patrón aquí. Esto también será mutación. Vamos a pasar el primer argumento ancho aquí. Será cableada. Tren. Por qué estamos pasando una cadena, porque vamos a pasar el ID. Puede eliminar el contenido basado en el ID. Por eso será la cuerda aquí. Porque vamos a pasar el ID de nuestro componente. Vamos a escribir su consulta. Vamos a tener identificación. Aquí. Vamos a especificar URL. Y la URL será como contexto. Tenemos que especificar el ID aquí. Y el método. Te voy a dar diluir porque estamos realizando la operación de eliminación. Ahora, este eliminar contenido de nuevo, exponer el gancho de la rodilla. Dejar que el detractor que supiera quién usa eliminar contextos mutación. Ahora vamos a usar éste en nuestro archivo de punto txt casero. Porque en el archivo home.html tenemos nuestro botón Eliminar. Vamos a tener nuestro método onclick, que vamos a definir un método, light, delete, ok? Podemos pasar ítem dot ID. Ahora tenemos que definir esta función afuera, volver a esa. Eliminar. Y también será una cosa. Y aquí recibirá un DNI. No podría ser ninguna. Después de eso. Primero, quería ventana emergente confirmarte un mensaje ahí. ¿ Lo sientes, querías eliminar ese mensaje. Algún tipo de métodos que quería mostrar al usuario antes de eliminar el mensaje. Será como una relación que quisieras eliminar ese contacto. Si haces clic en Okay, y entonces básicamente vendrá en estado estacionario. Aquí podemos usar esa consulta de mutación. Por lo que tenemos que traer nuestro uso eliminar mutación de contacto. Podemos utilizar éste para eliminar nuestro contacto. Esto será ligero borrar contacto. Podemos utilizar aquí eliminar contacto, y podemos pasar el ID. Aquí. Podemos mantener esta instalación tanto hacia el éxito. Contacto, eliminado con éxito. Ahora vamos al proyecto. Ya sea que seamos capaces de diluir el contacto o no. Refiremos esta aplicación. Eliminemos el cuarto. Ahora vamos a hacer click en Okay. Ahora se puede ver que hemos llamado el método de contacto ocular eliminado que dice matón. Pero desde nuestro componente de tabla, no se está eliminando. Si tienes miedo de esta aplicación. Verás ahí el cuarto grabado pero eliminado ahora de nuestro componente de tabla. ¿ Por qué está pasando? Porque tenemos que agregar alguna más propiedad en nuestro contexto API dot txt archivo. Por lo que tenemos que proporcionar un tipo de etiqueta. Podemos darte tipos de ataque. Aquí estará contacto porque el nombre de modal es contacto cada vez que ocurra algún cambio en todo nuestro contexto, por lo que se va a refrescar. Podemos usar este tipo de etiqueta como esta manera. En cada consulta. En GitHub Query, vamos a usar etiquetas proporcionadas. Aquí. Podemos volver a pasar este contacto. En caso de mutación, vamos a tener etiquetas invalidadas. Aquí. Tenemos que usar impuesto invalidar. Será contacto. Aquí también. Tenemos que usar invalidar. Si ocurrió algún cambio en nuestros datos, entonces nuestra interfaz de usuario se volverá a rendir con los datos actualizados. Vamos a intentarlo de nuevo. Volvamos a cargar esta aplicación. Y intentemos eliminar de nuevo una palabra, grabar. Elimine éste y haga clic en. Ok. Ahora se puede ver que esta vez se eliminó sin recargar esta aplicación. Tienes que proporcionar estas etiquetas para poder ver los datos actualizados en UI. Hemos realizado la operación de eliminación en esta aplicación con la ayuda de nuestra consulta de decaimiento. 14. Vista de página: Ahora vamos a ver el registro único basado en el ID en esta página de información. Hagamos eso. Entonces cinco, vamos a escribir una consulta para esto. Vamos al archivo Content API dot txt. Aquí vamos a escribir una consulta. Contacto. Nuevamente, vamos a escribir aquí un patrón constructor . Consulta de puntos. El argumento de hecho será el contexto porque vamos a conseguir un solo contacto en el objeto. Y el segundo argumento será la cadena, porque vamos a pasar el ID de nuestro componente para obtener el único contacto de nuestro archivo db.json. Aquí hemos dirigido consulta. Vamos a especificar el ID. Ajuste más punto final aquí. Será el DNI. Y tenemos que especificar también la etiqueta del proveedor aquí. Así que vamos a copiar éste y vamos a pegarlo aquí. Vamos a darte una coma. Ahora, este contacto exportará el nuevo gancho. Podemos definir este nuevo gancho aquí. Usar consulta de contacto. Ok. Ahora vamos al archivo info dot txt donde vamos a dividir un solo detalle de contacto. Ahora aquí lo que tenemos que hacer de reaccionar por Tenet para traer efecto estadounidense. También vamos a necesitar aquí, usó porque necesitamos IID de nuestra URL, de React router dom. Necesitamos usar paralelo así como un enlace. Porque lo estamos, porque también vamos a tener un botón Volver atrás. Con el fin de navegar hacia la página de inicio. Vamos a sacar a reaccionar. Ahora, vamos a traer el archivo CSS. Este archivo Info.plist también. Info dot CSS. Voy a pegar el código CSS aquí, o este archivo info dot CSS. Y ya se adjunta un archivo CSS a esta conferencia. Para que puedas descubrir fácilmente ese archivo CSS y esta conferencia que ya está adjunta. Aquí, lo que tenemos que hacer primero, vamos a agarrar el DNI. Si vuelvo a nuestra solicitud. Si hace click en Ver, puede ver que tenemos lo que este id2. Si necesitas agarrar esa identificación con la ayuda de EU párr. Vamos a utilizar mejor el uso. Y necesitamos a Heidi. ¿ De acuerdo? Ahora después de eso, vamos a utilizar ese uso consulta de contacto. Esta consulta de contacto juvenil. Vamos a pasar una identificación. Aquí. Tenemos que dar signo de exclamación. Aquí. Vamos a desmontar los datos. Por lo que contendrá un único objeto en que tendremos nuestros datos de contacto, nombre, correo electrónico, y contacto. También vamos a usar el error II aquí. También vamos a usar error. Así que vamos a traer esa también. Parte árida que vamos a usar aquí en lugar de nuestro efecto juvenil. Este enorme efecto sólo se volvió. Si tienes algún tipo de error. Podemos darte un error. Estamos comprobando. Si tenemos error, entonces error. Y podemos dar algo metilato, algo salió mal. Ahora, tenemos nuestro solo detalle de contacto aquí dentro de estos datos. Aquí lo que podemos hacer es estilo. Puedo dar algún margen, punta superior Excel. Voy a usar clase, clase de tarjeta. Voy a usar una clase más, el encabezado de la tarjeta. Dentro de esto. Voy a tener Beta, algún rumbo. Usted los datos de contacto. Después de esta etiqueta p. Lo que vamos a tener. De nuevo, voy a tener una clase más con el contenedor. Y ahí dentro, vamos a usar una etiqueta fuerte. Vamos a usar tu ID. Entonces vamos a tener una etiqueta span, que voy a mostrar el ID. Hemos agarrado el id con Delta, usamos patrón. Ahora voy a tener un par de descanso aquí. Y voy a copiar esto un par de veces porque también vamos a mostrar el nombre, correo electrónico y contacto. Esto se convertirá en nombre. Esto se convertirá como nombre de punto de datos porque estos datos contendrán un solo objeto en el que tendrá todos los detalles de contacto como nombre, contextos MLN. Por lo que esto se convertirá en un dato masculino. Más tarde dot mal. El último se convertirá en contacto. Contacto. En esta almohada, vamos a tener nuestro botón Go Back, botón. Voy a usar el nombre de clase tn, tn en ella. Mantengamos el valor del botón. Vuelve atrás. Vamos a usar link aéreo. Cortemos este botón y lo peguemos aquí. Vamos a navegar hacia la página de inicio. Entonces si hace clic en el botón Copiar aquí, estamos particularmente navegar hacia la página de inicio. Veamos si está funcionando o no. Así que vamos a entrar en el navegador. Entonces veamos este detalle de contenido. Ahora puedes ver que somos capaces de ver los datos de contacto de un solo usuario en nuestra info. Y si haces clic en volver para que nunca llegarás a la página de inicio occidental. Ahora, estamos terminados con el detalle de contacto de un solo usuario basado en la idea con la ayuda de nuestra consulta de decaimiento. 15. Populate datos de forma: Ahora vamos a realizar la operación de actualización. Por lo que si hace clic en el botón Editar, aquí, navegaremos a Editar página de Contacto. Vamos a poblar el valor existente en ocho independientemente del campo de entrada para nombre, correo electrónico y contacto. Y el botón Evaluar también se cambiará de had to update. Hasta ahora, hagamos todo esto. Entonces vamos a realizar la operación de actualización en el archivo ID dot txt agregado. Lo que tenemos que hacer aquí, voy a usar usar param con la ayuda de u es paralelo. Vamos a sacar nuestras ideas de nuestra URL. Ahora después de eso, lo que tenemos que hacer primero, nuestro trabajo es poblar los datos en cada campo de entrada respectivo. Voy a tener un estado aquí que se llama modo Editar. Modo. Será inicialmente falso. Ahora, vamos a correr enorme efecto aquí. Efecto de uso. El efecto de uso solo se ejecuta una vez que tengamos el ID y una vez que tenga los datos. Aquí, vamos a utilizar esta consulta para obtener el peso detallado del contacto del dedo en el ID con el fin de poblar en él campo de entrada respectivo. Aquí en editado consiguió EL archivo. Lo que tenemos que hacer. Entonces vamos a usar esa consulta también. Usar consulta de contacto. Y vamos a conseguir datos. También llevemos el error. Este enorme efecto solo se ejecuta una vez que tengamos datos. Aquí, vamos a comprobar si tenemos el DNI. Eso significa que los usuarios actualizan el detalle de contacto existente. Ese caso, quería hacer el modo paisaje a la verdad. Aquí vamos a comprobar si tenemos el valor del formulario conjunto de datos. Solo voy a difundir los datos porque estos datos tendrán un solo objeto que contendrá el valor como nombre, correo electrónico, y contacto. Por lo que está imprimiendo este valor para poblar el valor vacilante en su respectivo y portafolio. Ahora en esta condición, lo que vamos a hacer stat modo de edición a falso valor a nuestro estado inicial. También utilicemos una palabra, efecto juvenil. Este enorme efecto con Italia se ejecutará si tienes algún error. Aquí. Podemos comprobar si tienes error. Además, vamos a proporcionar una identificación. Podemos dar aquí metilato, punto encendido. Algo salió mal. En caso de actualización, sólo estamos tomando esta parte del error. Podemos darle como si algo saliera mal porque en caso de sumar los nuevos contextos, no obtendrás ID. Primero comprobemos si somos capaces poblar el valor existente. Y aquí tenemos algún error. Aquí con Italia, tenemos que proporcionar el ID. Por eso estamos recibiendo ese error. Podemos usar éste después de esta línea. ¿ De acuerdo? Primero vamos al proyecto y veamos si somos capaces de poblar el valor de salida en él independientemente y poner lleno o no. Por lo que ahora se puede ver que somos capaces de publicar el valor de salida en cada campo de entrada respectivo. Volvamos. Demos clic en este registro de 1 segundo. Está funcionando. 16. Actualización con RTK Query: Ahora con el fin de actualizar los datos de contacto existentes. Por lo que tenemos que escribir una consulta aquí en nuestro contexto, más pesado archivo dot txt. Aquí. Lo que tenemos que hacer aquí, sólo voy a cubrir éste. Quémonos aquí. Esto será como actualizar método de contacto será la salida. Y aquí vamos a recibir un contacto. Y el segundo será la cadena porque vamos a actualizar el contenido basado en el ID. Aquí. Lo que puedo hacer necesita ID y podemos pasar tasa de los aditivos de contenido como nombre, correo electrónico, y contacto. Por lo que sólo podemos darte un cuerpo. Podemos inyectar. La ruta es roja porque el objeto hilo contendrá nuestro detalle de contacto actualizado como nombre, correo electrónico, contacto. Aquí tenemos algún error. Aquí. Estamos recibiendo un error porque será cableado. Será contenido porque estamos obteniendo este objeto contextual de nuestro componente. Estamos recibiendo este contenido de nuestro componente el cual contiene ID, nombre, correo electrónico, y contacto. Es por eso que detectar sólo el ID. Y solo estoy pasando la tasa del detalle como correo electrónico, nombre y contacto en el cuerpo. Tenemos que hacer este pequeño ajuste aquí. Esta consulta volverá a exponer una Nueva Esperanza. Deja que dv estructurara esa nueva esperanza aquí, La mutación de contacto de actualización de Estados Unidos. Ahora vamos al archivo de punto txt adecuado y maneja cumbre. Tenemos dos particularmente actualizar la lógica existente en mango presentar con Italia tenemos que actualizar nuestra lógica adjetiva. Entonces aquí hemos puesto determinar si estamos en modo inmediato o no. Entonces si ya no eres, eso significaba, ese usuario significaba que está agregando un nuevo contexto. Podemos cortar este pedazo de código y podemos pagar para desgarrar. Tenemos que hacerlo primero tenemos que traer esa mutación de contacto de actualización de uso. Sólo vamos a copiar este. Y se usará actualización sobre mutación tecnológica. Y esto se actualizará contacto. Ahora, maneje enviar. Sólo podemos copiar éste. Aquí. Esto actualizará contacto. También queríamos guardar el modo de edición a false. Después de actualizar el contenido, queríamos nunca llegar hacia la página de inicio. También hemos especificado y navegamos aquí. Y vamos a actualizar el método también. Será contacto operado con éxito. Ahora aquí también tenemos que cambiar el valor de botón basado en el modo de edición. Si estás en modo de edición. Pero cualquiera con la actualización y en caso de añadir, será el anuncio. Entrémonos en el navegador. Refresca esta obligación. Ahora, vamos a hacer click en editar. Ahora vamos a actualizar este nombre. Y esto se volverá como James Gunn. Y hagamos click en Actualizar. Ahora puedes ver que somos capaces de actualizar con éxito el detalle de contacto existente. Hemos realizado la operación de actualización con la consulta RTK hair pop y esta aplicación React. Ahora es el momento de realizar todas las operaciones una por una para que no rompamos nada. Agreguemos un nuevo contacto de nuevo. Y esta vez te voy a dar la tarifa gmail.com. Haga clic en Agregar, nuevo contacto agregado con éxito en nuestro componente de tabla. Repasemos este. Por lo que también somos capaces de ver el contenido. Ahora, editemos los datos de contacto existentes. Así que hagamos clic en él, él. Ahora el momento en que te voy a dar un reportero. También actualicemos el correo electrónico. Reportado. Demos clic en la actualización. También somos capaces de realizar la operación de actualización. Ahora vamos a realizar la operación de eliminación. Por lo que voy a eliminar el segundo registro. Demos clic en Eliminar. Hagamos click en Okay. También somos capaces de eliminar el registro sale tabla comparado con la consulta articulada anterior. 17. Demo del proyecto 2: En esta sección, vamos a construir una aplicación de recetas de alimentos con la ayuda de la consulta RTK en React. Y vamos a utilizar la plantilla de TypeScript en esta sección para construir esta app de recetas de comida. Con la ayuda de esta aplicación, vas a entender cómo trabajar con API de terceros. En el artículo preocupación, usaremos API de terceros de Edmund para sacar la receta diferente y diferente en nuestra GUI. Entonces en esta aplicación, puedes buscar diferentes, diferentes recetas. Entonces intentemos buscar el TP con pan. Así que vamos a hacer clic en Buscar. Para que veas que estamos consiguiendo la receta relacionada con el pan. Y si eres un poco consciente de la salud, entonces puedes seleccionar aquí los mínimos sobre. Otra vez. Se va a filtrar nuestro resultado en base a esta categoría de salud. Y si haces clic en alguna tarjeta de recetas, entonces surgirá un modal en el que he incluido un poco más de detalle sobre esta receta en particular. Entonces esta es la aplicación general que vamos a construir en esta sección con la ayuda de Arctic una consulta. En React. Siguiente video, vamos a configurar la API de terceros de edema. Y después de eso, empezaremos a hacer proyectos establecidos. Entonces te voy a ver en el siguiente video. 18. Project 2 Configurar la API de la receta de Edamam: Configuremos nuestra API de recetas de alimentos en el sitio web de administración. Así que asegúrate de crear una cuenta. Y una vez que crees una cuenta, aterrizarás en esta página. Y en esto, estaremos usando 31. Con tres, solo podremos hacer diez solicitudes por minuto, que es suficiente para construir esta aplicación de recetas de alimentos. Entonces, bajo documento, obtendremos nuestra API de búsqueda de recetas. Así que aquí estamos usando la versión anterior. Entonces vamos a desplazarnos hacia abajo y necesitamos esta APA. Así que vamos a copiar el TPA y guardarlo en algún lugar del Bloc de notas. Ahora necesitamos App ID y app key. Así que tenemos que hacer clic en Obtener clave API. Después de eso, tienes que hacer clic en esta Ver bajo API de búsqueda de recetas. Así que esta es nuestra app ID y app k. Así que vamos a almacenar esta información también en solitario par. 19. Configurado del proyecto 2: Ahora comenzaremos a trabajar en la configuración de nuestro proyecto. Entonces, para trabajar en nuestra receta de ubicación, vamos a usar una plantilla de script de tipo redox. Entonces copiemos este comando. Y voy a pegar en mi terminal. Y sólo voy a cambiar el nombre de mi app aquí. Será la receta RTK, ¿bien? Y vamos a darle a Enter. Tomará alrededor de dos a 3 min para configurar nuestro proyecto React con plantilla de script tipo redox. Entonces esperemos a que se pongan en marcha los proyectos. La configuración de nuestro proyecto se completó a lo largo del año. Entonces primero, vamos a entrar en este directorio. Esa es nuestra receta de decaimiento. Antes de hacer una etiqueta de imagen, necesitamos instalar un paquete para nuestro proyecto. Entonces en este proyecto, vamos a utilizar el refuerzo de diseño de materiales cinco. Entonces vamos a copiar este. Y abramos esta terminal. Voy a pintarlo aquí. Y vamos a darle a Enter. Instalará el paquete. Entonces nuestro paquete obtuvo una estrella. Hagámoslo y pagueme empezar. Y ya he abierto este proyecto en mi código de Visual Studio. Entonces vamos al Código VS. Entonces como puedes ver que el proyecto está abierto en mi Código VS. Y todavía tenemos algo de código estándar porque hemos creado este proyecto usando la plantilla de script de tipo redox. Así que vayamos a este archivo package.json. Como puedes ver que creando proyecto con la plantilla redact TypeScript, no necesitamos leer el paquete Toolkit así como tampoco necesitamos instalar React redux. Así que no necesitamos instalar estos dos paquetes usando TypeScript. Entonces chicos, ahora vamos al navegador porque nuestro servidor de desarrollo se está ejecutando, así que no tenemos ningún problema. Entonces veamos en el navegador. Entonces hemos comprado este contenido y este contenido con Italia. Se muestra de nuestro archivo de texto ab.js. Entonces tenemos este contenido que se muestra en nuestro navegador. Y vamos a explorar estas dos carpetas también. Así que hemos comprado característica y tengo carpeta dentro de esta, hemos restaurado. Entonces tenemos alguna configuración básica sobre si tenemos ganchos aquí. Y tenemos una carpeta de características en la que tenemos carpeta de contenido. Esta carpeta de contenido no es obligatoria. Así que vamos a quitar toda esta carpeta, fufechada. No se requería la carpeta de contenido. Entonces ahora vamos al navegador. Así que ahora nuestra aplicación y consiguió descanso por aquí. Así que tenemos que hacer alguna limpieza todavía. Así que vamos al archivo CSS de punto de la tienda. No necesitamos este. Vamos a quitar esta. Vamos a quitar esta. Y guardemos primero este archivo. Pasemos al archivo app.js. Y voy a quitar todo nuestro contenido. Te podemos dar como una receta. Por ahora. Digamos que elimina esta porque hemos eliminado toda esa carpeta. A nivel local tampoco se requiere. También podemos eliminar esta importante declaración de React. Vamos a guardar este archivo. Y vamos al navegador. Ahora, no tenemos ningún problema en nuestra aplicación ya que estamos usando el diseño de materiales Bootstrap en este proyecto. Entonces necesitamos traer el archivo CSS para el diseño de materiales Bootstrap. Entonces, qué podemos hacer por eso. Entonces podemos copiar esta importante declaración y podemos pegarla aquí. ¿Bien? Para que podamos ver los cambios en nuestro navegador. Entonces vamos al navegador. Ahora puedes ver que tenemos alguna rúbrica diferente. Para que cuando hayamos configurado con éxito un Club de lectura de Material Design en este proyecto. 20. Estructura de la carpeta del proyecto 2: Entonces ahora lo siguiente lo vamos a hacer por estructura. Así que vamos a tener algunas carpetas y archivos en esta aplicación. Vamos a tener una carpeta componentes en que vamos a tener algunos archivos como model, no TFX, spinner dot t sets. Y vamos a tener un componente de tarjeta. Entonces solo voy a generar un fragmento en cada componente. De otra manera, obtendremos algún error en el navegador porque estamos usando TypeScript en este proyecto. Entonces, vamos a enviarle también un fragmento para este componente. Después de eso, eliminemos esta carpeta de características. En cambio, vamos a tener servicios para eso. Porque vamos a crear un punto final. Y dentro de eso, vamos a tener ese STP, APA dot ts. 21. Project 2 Configurar la tienda y la consulta de RTK: Entonces, primero configuremos Arctic una consulta en este proyecto. Entonces aquí necesitamos traer algunos APA de nuestro kit de herramientas. Entonces de redactar a líquido, tenemos que ir a la consulta. Reacciona, ¿de acuerdo? Y tenemos que traer crear APA y Fitch bit query. Ahora voy a tomar mi clave API y mi ID de aplicación que tenemos de Adam. Y así esta es la clave API y app ID que hemos generado en nuestro elemento. Ahora, tenemos que crear un punto final aquí. Entonces exporta ese NCP, APA. Crear APA. parte reductora predefinida porque tenemos que conectar esta receta APA a nuestra restauración. Entonces tenemos que definir la parte reductora por aquí. Después de eso, hemos predefinido la consulta base de nuestra API de administración. Por lo que queremos usar su consulta basada en la fe y tenemos que proporcionar la URL base. Entonces la URL será como HTTPS, apa.admin.com. Después de eso, vamos a tener endpoint. Y vamos a escribir algún patrón constructor. Aquí. Vamos a tener recetas de conseguir. Mutación de lote constructor. Si eres un poco consciente de la consulta RTK, esta mutación de punto constructor que normalmente usamos para hacer sondeos o eliminar solicitud. Pero desde aquí, tenemos que conseguir la receta en base a nuestra consulta de búsqueda y salud. Entonces tenemos que variedad o una mutación porque necesitamos recibir búsqueda, consulta y salud de nuestro componente. Entonces aquí tenemos que escribir mutación. Entonces dentro de esto, vamos a tener consulta y vamos a recibir consulta, es decir consulta de búsqueda. Y luego podemos regresar. Entonces aquí tenemos que especificar la URL. Así que sólo voy a copiar esta. Entonces esta es nuestra URL base, que ya hemos especificado en la consulta de bases de fagos. Bien, vamos a pegarlo por aquí. Y vamos a recibir esta consulta del componente Tamar. Entonces podemos usar aquí la consulta, ¿de acuerdo? Y la salud. También vamos a recibir de nuestro componente solamente. Entonces, reemplacemos esta. Entonces vamos a formatear este. Y esta receta va a exponer New Hope. Entonces lo que podemos hacer todavía, exportar llamar a la receta APA. Esta receta va a exponer tu nuevo anzuelo para que podamos probarlo por aquí. Así que vamos a guardar este archivo. Y tenemos que hacer algún trabajo en nuestra tienda punto archivo CSS. Entonces aquí, vamos a eliminar este. No necesitamos importar un mejor oyente de nuestro kit de herramientas. Entonces desde redact toolkit, necesitamos ir a dist, folder y query. Y tenemos que traer configuración oyente. Y ahora vamos a traer nuestra receta APA, de nuestro servicio para plomo. Vayamos al sitio de series. Y tenemos que traer nueva receta si VA. Ahora tenemos que conectar nuestro reductor con esta receta APA. Así ven parte del reductor PABA en STP, reductor de puntos APA. Después de eso, tenemos que usar también middleware aquí. Así que vamos a usar middleware predeterminado. Tan bueno middleware predeterminado. Ese middleware predeterminado. Y tenemos que cortar ese APA STP a nuestro middleware. Vamos a formatear este 15. Y aquí podemos eliminar esta. ¿Bien? Y podemos tener configuración oyente, tienda, no despacho. Bien. Vamos a guardar este archivo. Así que hemos configurado si gira en este proyecto. Entonces abramos terminal, tengamos algún problema o no. Entonces no tenemos ningún problema a partir de ahora. Entonces vamos al navegador. Entonces aquí tampoco tenemos ningún problema. Verifiquemos si nuestra consulta de decaimiento se ha configurado correctamente o no. Entonces voy a abrir leer una herramienta de desarrollo. Y se puede ver que estamos consiguiendo algo en nuestra herramienta reductora. Eso gana. Hemos configurado con éxito nuestra consulta de decaimiento en esta aplicación React. Entonces ahora podemos empezar a trabajar en nuestra comida. Esa aplicación SAP. 22. Proyecto 2 campo de entrada de la navarre y la búsqueda: Primero voy a mostrar la receta en un componente de tarjeta. Entonces voy a empezar a trabajar en esta app dot txt file. Entonces aquí necesitamos traer algunos ganchos de nuestro React. De reaccionar. Vamos a traer ese uso. Y por lo general el estado. Y tenemos que traer también la consulta que hemos escrito bajo la carpeta Servicios. Entonces tenemos que acudir a estos servicios. Y tenemos que traer esa consulta. Usa obtener mutación de receta. Después de eso, necesitamos traer algún componente de nuestro bootstrap de diseño de materiales. De MDB, reaccionan UHC. Necesitamos MDB, entrada MDB, MDB, NAB, pero soy contenedor Davy, MDB, marca navbar. Bien. Después de eso, vamos a definir algún pedazo de estado. ¿Bien? Entonces vamos a tener un valor de barra estatal. Entonces básicamente estamos definiendo un estado, nuestra tercera onda de entrada por aquí. Y después de eso, tenemos que poner este valor en un dictado diferente, es decir, consulta. Lo acabas de hacer. Y esto será ingresado. También vamos a la empatía. Ahora tenemos que definir la salud. Por lo que básicamente se lleva a cabo categoría. Se fijará la salud. Y por defecto, básicamente vamos a exhibir un vegano, ¿de acuerdo? Y vamos a tener cada estado para nuestro modelo también. Vamos a definir. Y también vamos a tener que exhibir una sola receta en un modelo. Entonces vamos a usar objeto. Entonces básicamente estamos dispuestos a actuar hacia esa única receta en objeto. Así que vamos a definir aquí en el objeto de la Parte D. Ahora, vamos a quitar esta. Ahora no necesitamos. Y aquí sólo voy a dar algo de estilo inline. Y vamos a darle tu auto de margen. Vamos a darle relleno de diez píxeles. Te voy a dar un ancho máximo, mil píxeles y alinear contenido. Estará centrada. Ahora dentro de este div, vamos a tener barra de navegación MDB. Y este será un color de fondo claro. Podemos dar luz también. Entonces vamos a tener contenedor MDB y eso se cargará. Entonces vamos a tener m dv, marca navbar. Podemos darle un nombre de clase, centro de texto. Entonces este es un nombre de clase Bootstrap que estoy cediendo todavía. Después de eso podemos tener la etiqueta h5 con el nombre de clase f, w. pasé negrita, guión vacío dos. Y voy a usar aquí emoji. Entonces voy a usar tu hamburguesa, hamburguesa después de esa receta. Este es nuestro título para esta aplicación. Guardemos este y veamos en el navegador cómo se ve. Así que ahora ya hemos terminado nuestra bonita barra de navegación. Sigamos trabajando por otra parte. Entonces después de esta barra de navbar, vamos a tener el div, el nombre de la clase, rho, d guión uno, align items, center, md guión también. Y dentro de este div, voy a tener campo de entrada. ¿Bien? Y aquí, vamos a dar una clase alta que será nivel automático. Vamos a dar receta. Vamos a mantener el tipo de texto. Después de eso, vamos a tener un valor que ya definimos. Entonces vamos a tener en el método del estaño. Así que definamos ese también. Entonces esto va a recibir el valor objetivo del punto del evento. Después de este campo de entrada, vamos a tener un día más. El nombre de la clase Ball auto. Y vamos a tener un botón. Entonces MDB, belleza y búsqueda. ¿Bien? Vamos a definir el método onclick más adelante. 23. Recetas de la lista de los proyectos 2 en la tarjeta: Entonces ahora tenemos que diseñar básicamente una receta diferente, diferente en un componente de tarjeta. Entonces vamos a usar esta consulta para obtener toda la receta. Entonces usemos esa consulta. Entonces los contras usan obtener receta, mutación. Y tenemos que pasar esta consulta y salud. Entonces tenemos que traer esta receta también. Entonces aquí, primero, vamos a traer eso, obtener las recetas. Después de eso, vamos a cavar textura, diferente, diferente pieza del estado que se genera por nuestra consulta de artículo. Se puede ver que tenemos una luz diferente. O bien está cargando, es que todos estos estados diferentes, diferentes lo van a generar por nuestra consulta decaimiento. Entonces esa es la razón por la que se llama poderosa herramienta de ajuste de datos. Entonces solo necesitamos cada carga y datos. Dentro de estos datos, contendrá nuestra, toda la receta. Después de esto, lo que tenemos que hacer. Por lo que hemos predefinido cuando desertas. Y este enorme efecto. Se ejecutará cada vez que estemos receta o estemos cambiando la categoría de salud. Entonces en ambos casos, tenemos que ejecutar esta consulta. ¿Bien? Entonces voy a definir un método todavía. Así que consigue receta de comida. Así que definamos este método por debajo de este enorme efecto. Así que cuesta y consigue la receta. Y esto va a ser una cosa porque vamos a realizar una operación asincrónica. Para que veas que en get recipe, estamos haciendo la solicitud de API. Y aquí tenemos que definir también una cosa más, es decir el método. Entonces aquí tienes este caso si me pongo bien. Así que vamos a especificar el método también. Después de esto. Simplemente podemos hacer como un peso, obtener las recetas. Y tenemos que pasar consulta y salud en forma de objeto porque estamos recibiendo aquí en forma de objeto solamente. Entonces tienes que pasar por este camino. Después de eso. Lo que tenemos que hacer. Para que podamos verificar éste, ya sea que esté funcionando o no. Entonces entremos al navegador y abramos la tasa de mortalidad. Se puede ver que nuestra promesa, Dios cumple por aquí. Y aquí tenemos alguna receta. Para que veas que dentro de los datos que tenemos son todos los ATP. Datos internos. Hay que ir a grados y dentro de golpes. Tendrás receta diferente, diferente. Entonces tenemos que apuntar de esta manera. Entonces vamos al código VS. Entonces aquí puedes ver que ya tenemos datos de estructura profunda. Tenemos que apuntar de esta manera, los datos dot hits y dentro de los hits. Tenemos nuestra receta diferente, diferente. Entonces ahora para poder exhibir la receta, tenemos que trabajar en nuestro componente de tarjeta. Entonces comencemos a trabajar en este componente de tarjeta. Entonces alguna vez vamos a mostrar nuestra receta todavía de MDB reactivado. Necesitamos traer algún componente del diseño de materiales. Necesitamos traer m dv, columna, grupo MDB, no belleza y grupo. Grupo de tarjetas mdb. Mdb, imagen de tarjeta MDB y cuerpo de tarjeta IMDB. ¿Bien? Después de esto, tenemos que hacer algún ajuste a este componente funcional porque estamos usando TypeScript. Entonces tenemos que escribir de esta manera, React dot componente funcional. Y aquí tenemos placas pay-to-play La función de Rob. Definiremos éste fuera de este componente. Y va a recibir una receta de utilería. Así que cada vez que pasamos una sonda a un componente funcional en un TypeScript, entonces tenemos que escribir nuestro componente funcional de esta manera. Y fuera de este componente funcional, tenemos que definir nuestra interfaz. De lo contrario obtendremos un rojo. Vamos a definir esta función prompt. Y vamos a recibir una receta. Entonces podría ser cualquiera, bien, después de esto, lo que tenemos que hacer. Para que podamos eliminar esta. Y aquí será color MDB, cuerpo de tarjeta MDB. Entonces voy a usar el auto MDB. Y aquí voy a usar el nombre de clase Bootstrap. Será guión de borde, guión md a guión d flujo SM. Entonces vamos a tener imagen de tarjeta MDB. Fuente interior. Voy a ser especificado en imagen STP. Así receta imagen de punto. En alternancia, podemos esperar pagar niveles. Entonces receta no etiquetada. Petición será superior. Estilistas. Dame un puntero de carácter. ¿Bien? Vamos a tener el método OnClick. Entonces definiremos éste más adelante. Entonces por ahora vamos a eliminar este. Y después de esto, vamos a tener cuerpo de tarjeta MDB. Y aquí voy a usar la etiqueta h5 con el nombre de la clase, tener w y negrita. Aquí. Vamos a tener el nivel de receta. ¿Bien? Entonces formateemos este. Y aquí serán grupos de tarjetas MDB, cuerpo de tarjeta. Así que vamos a usar aquí grupo de tarjetas MDB. Vamos a guardar este archivo. Para que puedas ver esa herramienta en profundidad, tenemos imagen nivelada. Así que estamos usando esta propiedad dentro de nuestro componente de tarjeta. Así que vamos a minimizar este. Y voy a usar este componente de tarjeta dentro de nuestra app dot txt file. Entonces después de este div, vamos a tener fila MDB. ¿Bien? Y voy a usar aquí el nombre de la clase. Fila llama vida, y una fila llama guión, md, guión tres, G, guión cuatro. Y hemos puesto golpes objetivo. Como puedes ver esa herramienta en mayor profundidad dentro de nuestras cabezas, tenemos nuestra receta diferente, diferente. Tenemos que apuntar como esta palabra datos, aciertos de puntos. Y estoy usando aquí la expresión ternaria. Entonces, ¿por qué estoy usando este? Porque si no usas esto, entonces tienes que escribir así, data dot hits, entonces podrás usar data dot hits, dot map. ¿Bien? Entonces su ciudadano, estoy usando esta expresión ternaria. Por lo tanto, los datos de puntos golpean, punto, mapa y ítem cualquiera. Porque estamos usando aquí TypeScript, así que tenemos que especificar éste. Y usemos tu componente de tarjeta que hemos creado. código soviético importa automáticamente el componente de la tarjeta para mí. Y aquí tenemos que especificar los apoyos de la receta. Entonces item dot receta. Tenemos que dar así. Vamos a guardar este archivo. Y verifiquemos éste ya sea que esté funcionando o no. Entonces entremos al navegador. Así que ahora puedes ver que somos capaces de renderizar diferentes, diferentes recetas en nuestro componente de cartas. Bien. 24. Proyecto 2 Receta de búsqueda y Spinner: Ahora después de eso, lo que tenemos que hacer, tenemos que implementar la funcionalidad de búsqueda. Entonces hemos creado el botón, botón Buscar, pero no hemos probado ninguna lógica para realizar la funcionalidad de búsqueda. Entonces aquí vamos a tener un método onclick. Y luego definamos éste fuera del mango de la cláusula de retorno. ¿Bien? Así que aquí podemos hacer set query y puedes pasar el valor. Y después de hacer clic en el botón de búsqueda, queremos que borre el campo de entrada de búsqueda. Podemos hacer como valor de ajuste a la entrada t. Ahora, podemos realizar funcionalidad de búsqueda en nuestra aplicación. Entonces entremos al navegador. Y lo voy a poner SAP con el pan. Entonces vamos a escribir aquí el pan. Vamos a hacer clic en Buscar. Ahora puedes ver que somos capaces de pescado receta basada en el pan. Bien, entonces la funcionalidad de estado también se implementa en esta aplicación. Ahora volvamos al código VS. Y voy a usar, esto está cargando es theta también. Entonces voy a trabajar en nuestro componente spinner. Entonces aquí lo que tenemos que hacer. Entonces aquí tenemos que traer un componente de nuestro diseño de materiales Bootstrap, que es impresora, es decir el MDB es cacahuete. Y dentro, vamos a tener un div con el nombre de la clase text, md guión cinco. Y vamos a usar aquí MDB spinner. Y aquí vamos a tener una etiqueta span con el nombre de la clase visualmente oculto. ¿Bien? Y aquí voy a dar carga con tres puertas. Y en MDB spinner tenemos que pasar alguna sonda que es grow class name. Demos aquí guión vacío dos. Mantengamos un poco de estilo en línea. Voy a dar aquí Tres de ellos. Voy a darles éste. Y podemos eliminar esta . No necesitamos. Vamos a usar este componente dentro de nuestro archivo txt dot app. Y aquí estamos trayendo esto está cargando. Entonces lo que podemos hacer, podemos comprobar si tenemos es cargar true. Entonces en ese caso, lo que quería hacer está pintado, bien, así que el código VS automáticamente importa este componente spinner para mí. Ahora, vamos al navegador. Ilustremos éste. Entonces ahora puedes ver que hemos comprado un spinner por nuestra obligación. Ahora, lo siguiente. 25. Proyecto 2 Obtén recetas en la categoría de salud: Vamos a implementarlo caído aquí abajo. Entonces vamos a tener una salud y desplegable, que contendrá alguna opción para filtrar en función de diferentes, diferentes categorías de salud. Entonces, vamos a trabajar en esa. Entonces vamos a tener esta categoría de salud en nuestro desplegable. Así que vamos a crear un desplegable por aquí. Entonces aquí vamos a tener desplegable y no vamos a usar un componente desplegable, materia prima que Bootstrap, vamos a usar HTML normal y vamos a cada azulejo que uno con CSS. ¿Bien? Entonces aquí vamos a tener un div con el nombre de clase llamado auto. Será auto. Y dentro de eso, voy a usar Select. Y vamos a tener un nombre de clase, categoría, desplegable. Y vamos a tener uno sobre el método Jane. Se maneja bien. Y podemos pasar tu valor. Dentro de eso. Vamos a tener opciones. Entonces vamos a mapear esta opción que hemos definido, nuestras estrategias, que hemos definido fuera tienen función. Entonces usemos la adopción y el índice. Entonces usemos tu etiqueta de opción. Entonces aquí voy a usar no están nivelados. Y vamos a usar aquí el valor. Entonces los valores de opción son, estará en por día. Vamos a darte una llave. Y vamos a salvar esta. Y definamos y hagamos doble clic. Fuera de esta devolución puede manejar clic. Y esto recibirá un evento. Y podemos caber como el valor objetivo del punto E. Después de eso, vamos a indexar el archivo CSS de punto. Entonces tenemos que espaciar por el estilo para esta categoría desplegable. Así que sólo voy a pegar el estilo para ese nombre de clase. Entonces esto es decir que voy a solicitar nuestro menú desplegable. Entonces, vamos a salvar esta. Y entremos en el navegador. Ahora para éste. Así que ahora puedes ver que nuestro estilo aplicado en desplegable. Selecciona de nuevo el pan de receta aquí. Ahora estamos buscando con SAP relacionado con el pan. Y aquí, seleccionemos la categoría de salud. Entonces voy a seleccionar aquí servidor bajo. Por lo que ahora en esta ocasión obtendremos diferentes resultados de receta relacionados con el pan. Por lo que puedes ver que ahora tenemos diferentes resultados basados en nuestra categoría de salud. Por lo que esto también se implementa en esta aplicación React. 26. Project 2 Mostrar detalle de la receta en modal: Entonces, lo último, tenemos que trabajar en nuestro componente modal. Así que siempre que hagas clic en cualquier tarjeta competente. Así que vamos a mostrar alguna información adicional sobre esa receta en particular. Entonces, trabajemos en ese componente del modelo. Entonces tenemos que volver a VS Code. Y ya hemos creado un modelo competente por aquí. Eso se puede ver. Entonces en este componente modelo, necesitamos traer algún componente del diseño de materiales Bootstrap. Entonces componente Vineet como MDB, diálogo modal MDB, contenido del modelo MDB, encabezado modal MDB. Entonces también necesitamos butano MDB. Modelo IMDB fangoso y modelo MDB. Bien, vamos a formatear este. Después de esto, tenemos que definir interfaz para los prompts que vamos a obtener un tip de nuestro componente app. Así que definamos ese también. Entonces hemos sido buenos si ustedes entonces vamos a recibir la densidad. Entonces esta es una función de esa manera he escrito así donde este es un objeto. Puedes darle cualquiera si lo deseas. Entonces cualquiera, entonces será booleano. ¿Bien? Después de esto, tenemos que modificar este componente funcional porque estamos trabajando con los grupos de tareas. Por lo que será React dot FC. Y aquí tenemos que pasar esta función prox. Esta función de indicaciones, y va a alternar así receta, mostrar y establecer. Entonces ahora dentro del término, vamos a tener un fragmento. Y aquí vamos a tener modelo IMDB. Aquí vamos a ser judíos. Entonces, entonces una vez que este verdadero modelo se abra, ¿de acuerdo? Y tenemos que definir también ayer. Entonces, entonces MDB diálogo modal. Entonces vamos a tener contenido modal MDB. Entonces vamos a tener encabezado modal MDB. Entonces tenemos la etiqueta h5 con el nombre de clase f, w, guión negrita. Entonces esto será nivelado, el nivel de receta. Después de esto. Después de esta etiqueta de estilo, vamos a tener MDB, BTN. ¿Bien? Entonces aquí voy a dar className btn, guión cerrar, Taylor, ninguno. Onclick. Ya vamos a dar. Entonces después de este encabezado y vamos a tener cuerpo del modelo MDB. Sin embargo voy a usar la etiqueta de imagen. ¿Bien? Entonces pensamientos, dentro de fuente, vamos a tener receta Doherty laberinto. En el interior alterno. Vamos a haber desaparecido nivel DOD. Entonces vamos a tener el div con el nombre de la clase y el iPhone. Entonces vamos a tener la etiqueta h5 con el nombre de la clase, texto, inicio, guión F, W, negrita, texto, guión silenciado. Y vamos a darle un estilo inline. Eso es flotar. Izquierda. Dentro es cinco veces. Vamos a tener nivel como calorías. ¿Bien? Después de eso, vamos a tener de nuevo la etiqueta h5 con el nombre de la clase, que terminé comienza. Y aquí vamos a resolver el conteo de calorías. Entonces receta, no galerías. Y también podemos dar la unidad. Aquí. Hasta el momento caloría, será caso. T a L. Después de esta etiqueta h5, vamos a tener ingrediente. Yo sólo voy a copiar esta. Voy a pegarlo por aquí. Y vamos a quitar este estilo. No necesitamos este estilo. Ingrediente de barra. Ingredientes. Ingredientes básicamente contenidos en matriz. Entonces vamos a usar mapa aquí. Entonces, si nos fijamos en esto, entonces este es nuestro campo, ¿de acuerdo? Entonces aquí dentro de la mutación, tenemos que ir a esto. Vamos a Flujo de Datos para golpear. Encontrará ingredientes para una línea de ingredientes específica de información de recetas. Bien, entonces aquí tenemos la línea de ingredientes, que es array. Entonces por eso voy a usar el mapa de aquí para mostrar el ingrediente esa receta en particular. Entonces tenemos que apuntar así, el ingrediente de punto de receta, línea, mapa de puntos, ítem. Podría ser cualquiera. Entonces vamos a usar todavía ascensor con el nombre de la clase, texto amueblado inicio. Y aquí vamos a tener nuestro artículo. Entonces después del cuerpo, vamos a tener uno. Así modelo IMDB. Entonces para eso vamos a tener un botón de cierre. Entonces MDB, belleza y cerca. Y aquí, el color, voy a darle al país. Y OnClick. Vamos a usar alternas. Entonces tenemos que definir esta función en nuestro componente padre, que es el archivo de texto ab.js. Entonces ahora vamos a trabajar en el resto de la pieza en nuestro archivo app.js. Entonces aquí lo que tenemos que hacer. Así que cada vez que hagas clic en la tarjeta, aparecerá un modal. Fuera de retorno, tenemos que definir una función. Y dentro de esto, voy a pasar en STP. ¿Bien? Y así solo podemos hacer oponernos a ello, sea lo que sea que tengamos el valor estatal de. Entonces podemos establecer aquí en SAP lo que sea que estemos recibiendo. Así que básicamente estamos almacenando objetos en objeto. Entonces esta receta objeto contenido diferente, diferente detalle sobre receta particular, como ingredientes a nivel de imagen. Bien, entonces estamos almacenando objetos incluso tres que hemos definido esta receta de conjunto como un objeto vacío. Estamos explorando todo en un objeto. Entonces este toggle, para que podamos usar aquí. Entonces en tarjeta, tenemos que pasar este toggle. Entonces, bien, ahora vamos a este componente. Y aquí también tenemos que definir eso también. Bien, así que sólo voy a copiar este porque va a ser lo mismo. Y aquí tenemos que pasar toggle. Así que aquí OnClick, lo que podemos hacer. Entonces en onclick, podemos usar ese toggle para que podamos pasar esta receta. Bien, vamos a guardar este archivo y vamos al archivo de texto ab.js. Ahora, una vez que esta plata me veía se hizo realidad, entonces tenemos que abrir el modelo. Entonces después de esta fila MDB, tenemos que básicamente para que ese componente modal. Entonces, si es cierto, entonces tenemos Bu, componente de modelo de visualización. Entonces, llevemos ese modelo competente que hemos creado. Así que habíamos tirado automáticamente importante ese componente para mí. Y aquí tenemos que pasar accesorios como set de espectáculos. Entonces porque esto incita y ya lo hemos definido en nuestro componente modelo, aquí será el NCP. Y aquí tenemos dos caminos también. Ahora guardemos este y verifiquemos en nuestro navegador si está funcionando o no. Entonces vamos a refrescar este. Vamos a hacer clic en cualquier componente de la tarjeta. Ahora puedes ver que somos capaces de mostrar algo más de información sobre esta receta en particular, como calorías e ingredientes. Entonces esto también se hace. Entonces todo está funcionando. Ahí se puede ver. Así que hemos construido esta app de recetas de comida con la ayuda de la consulta de artículos en React. Entonces voy a abrir una consola ya sea que tengamos algún problema o no en esta aplicación actual. Para que veas que tenemos algún tipo de advertencia. La advertencia por ahora podemos ignorar. Y arreglemos esta segunda advertencia. Voy a entrar en mi código VS. Y aquí podemos usar clave. Entonces t es igual al índice. Vamos a guardar este archivo. Vamos al navegador. Refresca este. Ahora bien, no estamos viendo esa advertencia relacionada con nuestro componente de tarjeta. Y vas a ignorar esta advertencia por ahora. Entonces, vamos a cerrar esta. 27. Tipos de fijación de proyecto 2: Trabajemos en el tipo que realmente no hemos trabajado hasta ahora en esta aplicación. Entonces volvamos al Código VS. Y si acabo de decir Amy, bien, para que veas que en todos estos archivos diferentes, diferentes, tenemos que usar el tipo como cualquiera. Así que no se ve cada vez que estamos trabajando con el TypeScript. Para que veas que hemos usado alguno aquí. Nosotros hemos usado alguno aquí. Trabajemos en este tipo. ¿Bien? Entonces lo que voy a hacer medio tiempo, voy a crear una carpeta aquí que sea común. Y voy a crear un tipo de archivo. ¿Bien? Ahora bien, si nos fijamos en el componente en el modelo punto TSX. Entonces aquí tenemos una receta. La receta debería ser un objeto bien, que contenía datos de imagen de ingredientes. Bien, entonces vamos a definir el tipo para eso. Así que vamos a exportar el tipo. Y esto debería ser un tipo de destinatario y contenido de receta, la propiedad como etiqueta. Por lo que se entrenará imagen. También será un manantial. Entonces tenemos una Calorías, que serán unas líneas de ingredientes. Línea de ingredientes de ingredientes. Esto se agregará y estará tomando una copa. Bien. Ahora vamos a guardar este archivo. Vamos a este modelo punto css. Y aquí podemos traer éste. Entonces esto será en código de tipo STP automáticamente importar este tipo para mí. Entonces he traído este tipo de receta de esta parte. Y aquí también tenemos una amplia tipificación de cualquier otro tipo. Entonces aquí x sería tipo LTP. Y entonces qué podemos hacer por esto, porque viene de nuestra app dot txt file. ¿Bien? Entonces aquí lo que tenemos que hacer, así que React dot dispatch. Y aquí será react.net axial y la falla booleana. Tenemos que asignar Booleano. ¿Bien? Ahora después de eso, lo que tenemos que hacer. Entonces aquí se puede ver que tenemos una advertencia. Pasemos a este archivo app.js. Aquí. Se puede ver que aquí tenemos una advertencia. Entonces, ¿por qué estamos recibiendo esta advertencia? Porque si vuelves a este archivo de texto ab.js donde es novedoso, entonces aceptando una receta como argumento. Bien, entonces lo que podamos hacer, podemos proporcionar la receta. Y a partir de aquí también tenemos que proporcionar la receta aunque estés cerrando el modelo. Porque ahora estamos trabajando con ese grupo, así que tenemos que aportar la receta. Después de eso. Pasemos a este archivo de texto ab.js. Y aquí, ¿qué tenemos que hacer? Entonces no podemos volver a escribir como ninguno aquí, porque estás trabajando con el TypeScript. Entonces lo que podemos hacer por aquí, así será sólo de tipo LTP. Entonces tenemos que traer de nuevo al tipo tippy de esta ruta, el código VS automáticamente importa este para mí. Aquí. Será una amplia, ¿de acuerdo? Y aquí tenemos que simplemente no devolver nada. Entonces esta es la corrección más pequeña, pequeña que estoy haciendo en esta aplicación relacionada con el tipo. Ahora, también tenemos que trabajar en el clic de mango. Manejado haga clic en nada pero es un desplegable. Entonces aquí será React evento de cambio de punto. Y será elemento HTML, elemento HTML select. Debido a que se puede ver que se han manejado más tarde, hemos utilizado en un desplegable solamente. Bien, entonces es por eso que es tan HTML select elemento. Ahora tenemos una advertencia. Bien, así que entremos al navegador. Ahora se puede ver que se trata de decir como objetivos cumpliendo, siguiendo propiedad de tipo receta, tipo de artefacto, este problema. Lo que podemos hacer todavía. Entonces ahora no debería ser objeto vacío. ¿Bien? Oh, sí. Tenemos que traer este tipo de receta. El tipo tippy ya está importado. Ahora dentro de esto, tenemos que definir el valor inicial. nivel será la cadena ingresada solo porque todo será la entrada D inicialmente. Y la imagen debería estar también en poner tarifas que tenemos, por lo que será cero. Y tenemos las líneas de ingredientes. Entonces no debería ser, debería ser en la era bonita. Ahora esa advertencia se ha ido. Y trabajemos también en esta parte, donde hemos definido un estado diferente, diferente. Entonces tenemos que mencionar también el tipo aquí también. Entonces aquí va a ser cadena. ¿Bien? Esto también es un árbol. Esto también es una cuerda. Y éste es un booleano. Vamos a salvar a éste. Y ahí es donde hemos usado cualquier otro tiempo en este archivo. Así que hemos usado alguno aquí también. Para ello, lo que podemos hacer índice, podemos dar aquí número. Y aquí. Podemos usar esta función. En archivo modelado o TFX. Hemos definido esta función. Así podemos traer esta interfaz de este archivo y podemos usarla por aquí. Función de utilería. Entonces creo que tenemos que exportar, exportar, exportar nuestra interfaz. A ver, úsalo por aquí. Función. Agregamos código automáticamente importado este para mí. Por lo que ahora no tenemos otro tiempo en este archivo hasta el momento. Volvamos a otra vez, modelada o archivo TSX. Así que aquí también otra vez, compramos cualquiera. Entonces esta es la JSX, bien, Entonces debería ser una extraña primavera epitelial. Bien. Y vamos a usar tu profundidad también. No debería ser un número y dejarte usar tu llave. De lo contrario recibirás una advertencia. Como cada niño debe ser un único. Entonces usemos tu índice. Y creo que en el componente de tarjeta también, estamos usando cualquier otro tipo. Entonces aquí podemos traer este tipo de receta, tipo de receta en este camino. Y para esto también, debería ser una receta. ¿Bien? Aquí ya estamos pasando la receta. Cualquier lugar que nos quede, hemos reemplazado ME por el tipo adecuado en nuestro antiguo archivo donde hemos usado cualquier otro tipo. Ahora, volvamos al navegador y comprobemos si está funcionando o no. El hecho de que definitivamente creo que esa obligación Estamos trabajando. Bien, vamos a refrescar esta aplicación. Seleccionemos cualquier cosa. ¿Bien? Esto también está funcionando. La aplicación está funcionando como de costumbre después de definir el tipo adecuado en nuestro código. Entonces eso es todo de este video. 28. Wrap-up del proyecto 2: Así que hemos podido construir con éxito esta aplicación de recetas de comida con la ayuda de RTK query. En esta sección, espero que ahora hayas aprendido a usar API de terceros con consulta de artículo. Así que espero que hayas aprendido algunos conceptos importantes relacionados con el arte k query en esta sección. Así que muchas gracias chicos por ver esta sección. Seguiré agregando más proyectos relacionados con redact toolkit, un artículo, una consulta. En este curso. 29. Resumen: Si estás viendo este video, eso significa que has completado este curso. Ahora, estoy totalmente seguro de que tienes poca comprensión del arte concepto jQuery con React. Espero que hayan disfrutado de este curso con alguna nueva redacta cuantitativa y aún tengan alguna duda nuestra consulta relacionada con este curso, entonces siempre se puede portafolio valioso pensamiento en la sección de comentarios, Voy a intentar mi nivel mejor para resolver su consulta. Eso es todo. Desde mi final, te veré en el próximo curso.