Aprende a Redux-Saga con Redux-Toolkit

1. Introducción: Hola y bienvenidos a este curso en que vamos a aprender cómo puedes usar redact saga con redact tool grid en rehabilitación gs. Mi nombre es Tom con división y seré tu instructor en este curso. Si usted es un desarrollador de React, entonces podría estar usando un enrutador como administración estatal para que su aplicación React mantenga el estado de la aplicación. Y es posible que también estés usando middleware saga reductant o redox para manejar efectos secundarios en tu aplicación React. 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 la aplicación front-end. No solo con React, sino que es muy popular con la biblioteca React. Entonces esa es la visión general de Rudolf. Con la ayuda de esta aplicación, vas a aprender cómo puedes integrar tres taxa con timón a líquido. En este curso, vamos a construir una aplicación de búsqueda de películas con la ayuda de la saga reduct y hacer kit de herramientas oscuras. Por lo que redact kit de herramientas ya de nuestra diferente solución para manejar operación asíncrona, es probable que puedas gestionar el efecto secundario de la aplicación con crear un think tank son consulta RTK, pero a veces es posible que lo desee para ir con enfoque de saga redact para manejar tu efecto secundario de aplicación. Con esta aplicación, vamos a integrar con rid of total gate. Y espero que tengas algo de comprensión de redox ADA y función del generador porque redox saga función de generador juvenil para escribir lógica asíncrona. Pero hasta que te daré una breve visión general sobre redox AGA y la función del generador más adelante en este video. Pero primero, vamos a tener una demo rápida de publicación de datos. Entonces en esta película es que cada aplicación estamos buscando película relacionada con su polvo. Inicialmente, encaja alrededor de diez películas con la ayuda de API de terceros llamada OEM DBAPI. Siempre que lo establezcas en una película con un nombre específico o API IMDB, devuelve solo diez películas. Y tú hiciste este circuito. Digamos Jim, quería buscar la película con la palabra clave S. Esta vez con volver a muchos resultados. Además, vamos a manejar con heterodox y redact toolkit solamente. Y también puedes iniciarlo con un nombre de película diferente, como Batman. También puedes iniciar la película con un nombre de película diferente. Y si querías saber más sobre una película específica, puedes hacer click en esta tarjeta. Nunca llegarás hacia la película soltera donde tenemos un poco más de detalle sobre esta película específica, como nombre, oreja, trama y dirigida. Si hacemos clic en la unidad GoBear, navegue de nuevo a la página de inicio. Chicos, esta aplicación también va a ser receptiva porque estaremos usando biblioteca de interfaz de usuario material para construir el componente React. Se puede ver ahí esta aplicación también es receptiva. Entonces esta es la obligación general que vamos a construir en este curso con la ayuda de relativa saga y redact toolkit en Riad. Ahora, hablemos de la habilidad requerida para este curso. Este curso está diseñado de tal manera que cualquiera puede unirse a este curso que esté interesado en aprender concepto redox moderno, solo necesita tener comprensión básica de HTML, CSS, JavaScript, así como Reaccionar conocimientos básicos. Al finalizar este curso, entenderás cómo integrar saga redact con redact toolkit en cualquier aplicación React. ¿ A qué esperas unirte a este curso para aprender todo este concepto moderno? Y si tienes alguna consulta o sugerencia, entonces siempre puedes contactarme. Voy a intentar mi nivel mejor para resolver su toda la consulta. Eso es todo. Desde mi final, te veré en la sección del curso. 2. ¿Qué es Redux y por qué lo utilizamos?: 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. ¿Qué es Redux-Saga?: Redact saga es una biblioteca que tiene como objetivo hacer aplicación de efectos secundarios de aplicación. Tercer efecto aquí significa como hacer una solicitud HTTP, financiar evento WebSocket, o buscar datos del servidor GraphQL. Nuestro guardado algún tipo de información en caché, nuestro navegador la almacenó localmente. Esta cosa viene bajo el efecto secundario que V manejó con la ayuda de redact saga, con la hipótesis de que tambalear se vuelve muy fácil de manejar, más eficiente de ejecutar, y mejor en el manejo de valor. Todo esto se trata de la saga redact. Aquí saga usa la característica ES6 llamada función del generador con el fin de escribir código asíncrono. Con este enfoque, nuestro código asíncrono parece si tierno código JavaScript síncrono. Entonces todo se trata de la función del generador. 5. ¿Qué es Generator?: Ahora comprendamos el concepto de generador. Entonces el generador es un tipo especial de función JavaScript. Lo hicimos introdujo en el EF fijo y esta función con Italia puede detenerla a mitad de camino y luego continuar desde donde se enseña. En JavaScript, conserje es una función que devolverá un objeto en el que se puede invocar un siguiente método. En cada invocación del método neto, devolverá un objeto de esta caja fuerte. Tendrá un valor. Y el valor podría ser cualquier cosa y hecho será falso o verdadero. En su mayoría será falso. Y se hará realidad cuando no tengamos ninguna declaración de rendimiento. Entonces te explicaré los malos tratos más tarde. Así que cada vez que no encuentra ninguna declaración de rendimiento en la función del generador, entonces el generador se desvaneció y no generará ningún valor. En cada invocación, generará un nuevo valor. Una vez que viste que el valor de hecho es a través, eso significó nuestro conocimiento generativo y no generará ningún valor. Este es el código básico es fragmento de la función del generador, cómo se veía. Se puede ver que tenemos una marca de estrella aquí, la función, por lo que eso significa que esta función es la función del generador. Por lo que se puede ver que tenemos un rendimiento anual de declaración. Se trata de un operador en el que el generador puede pausar a sí mismo. Entonces básicamente aquí nuestra ejecución es con Italia. Y una vez que, una vez que llames a este método como dotnet iterado, cualquiera que sea el valor que tengamos aquí, lo hará, rápidamente devolverá ese valor en la forma de este objeto. Por lo que devolverá un valor como uno. Y el valor de w1 será el falso. Si voy a este GFP y se puede ver que tenemos el mismo código aquí. Contamos con una función de generador. Tenemos un rendimiento de un año, de dos años, de tres años para éste. Si hago clic, se puede ver que conseguimos este valor uno y hecho las declaraciones de Paul. Todavía tenemos algún rendimiento si declaración. Ahora con el fin de obtener este valor, este valor. Por lo que hay que invocar nuevamente el siguiente método. Si acabo de copiar este registro de consola y simplemente pegarlo aquí. Y si solo lo dejo de nuevo y efecto, si vuelvo a correr. Ahora se puede ver que tenemos este valor aquí y el valor de Danny's sigue siendo falso porque todavía tenemos la declaración anual. Si copio, de nuevo, si acabo de borrar éste. Ahora, tenemos aquí el valor tres, y luego sigue siendo falso. Y si vuelvo a copiar, si acabo de borrar éste, y si hago clic en ejecutar de nuevo, tenemos este valor y todavía lo hemos hecho repetidamente, la ejecución está en pausa. ¿ De acuerdo? Y si vuelves a trabajar el siguiente método. Ahora aquí descubrirá que no tenemos ninguna declaración de rendimiento. Si vuelves a hacer clic, obtendrás ese valor indefinido y hecho a través del admin. Nuestra función de generador ahora tiene parada aquí. Esta es la forma básicamente una función de generador que se ejecuta en JavaScript. Es como o yacía de esta manera, función del generador funciona en el JavaScript. Espero que ahora entiendas el concepto de una función de generador. 6. Configuración de proyectos: Chicos, vamos a montar este proyecto. Entonces voy a abrir un símbolo del sistema. Vamos a crear nuestro proyecto aquí con el comando N dx create. El nombre del proyecto será como app de película. Vamos a golpear Enter. Y tomará alrededor dos a tres minutos instalar toda la dependencia necesaria. Así que volveré uno a otro dependencia, me digan que nuestra configuración del proyecto ya está terminada por aquí. Se puede ver que primero vamos a entrar en esta carpeta que se está moviendo hacia arriba. Antes de hacerlo y empezar PMI. En este proyecto, estamos utilizando interfaz de usuario material para construir nuestro componente React. Así que primero vamos a copiar este 15 tiempo instalando todos los paquetes que se requieren para construir esta aplicación. Aquí. Solo necesitamos material material de interfaz de usuario. También necesitamos estilos de interfaz de usuario materiales. Y aparte de eso, necesitamos algunos paquetes más como React, una lectura x. También necesitamos redact saga todavía reaccionamos al altar abajo. Ahora. Necesitamos x, sí. Así que instalemos estos paquetes. Paquetes instalados. Ya he abierto este proyecto en mi Visual Studio Code. Entrémonos en el código VS. Entonces este es nuestro proyecto que he abierto en mi Código VS. 7. Configure la clave de OMDB API: Antes de empezar a escribir cualquier código, primero configuremos nuestra clave API o IMDB. Voy a entrar en navegador y género o clave API IMDB para obtener todo el objetivo en movimiento. Si voy a configurar esa, tienes que ir a este sitio web o a IMDB APA. Y después de eso hay que hacer clic en esta clave API. Y aquí hay que seleccionar tres. Ahora hay que proporcionar algunos retail como correo electrónico, nombre, y qué usaron para decirte que tienes que proporcionar y después de eso, tienes que golpear Enviar. Una vez que proporcione el detalle. Y si haces clic en el botón Enviar, evitarás un método como un enlace de verificación para activar tu clave a este inválido. Tienes que abrir tu cuenta de Gmail. puedas ver que tienes tu llave aquí y tienes que verificar tu clave haciendo clic en este enlace. Puedes copiar esta clave en tu código VS y tienes que hacer click en este enlace para verificar esta clave. Ahora, nuestro gay se activó aquí. Vamos a cerrar este. Estoy copiando esta llave. Voy a pagarlo en mi código VS. Voy a pegar la clave que hemos generado hasta ahora. Ahora, sólo estoy pegando la llave aquí. Y veamos si nuestro paquete se puso más alto, nada nuestro paquete total. Ahora, se puede ver esa mano vamos a hacer aquí, y esperemos a que la aplicación se cargue en el navegador. Se está cargando en nuestro navegador. Por lo que nuestra aplicación se carga con éxito en el navegador. 8. Estructura de aplicaciones y limpieza: Ahora vamos a entrar en el código VS. Voy a capturar nuestro proyecto. Vamos a tener para bordes de luz LED. Entonces vamos a tener una carpeta para componentes. Entonces vamos a tener una carpeta para redox. En la raíz, vamos a tener una variable de entorno, punto a y B. Aquí, voy a tener mi clave API de película, película APA, clave pública, y pegarla por aquí. Desde que estamos creados una variable de entorno en esta aplicación, tenemos que reiniciar de nuevo nuestro servidor. Permítanme reiniciar éste. Ahora, lo que voy a hacer cinco, así que cinco veces va a hacer alguna limpieza, en efecto aplicación. Vamos a quitar todo esto que no necesitamos. Aquí. Sólo voy a dar rumbo. No se requiere logotipo, así que vamos a quitar este. Voy a eliminar este archivo. No necesitamos éste. Vamos a quitar este también. Logotipo dot SVG. En el archivo index.js. Esto será aditivos de estancia. Entremos primero en el navegador. Trabajando, no tenemos ningún tema ahora. 9. Configure Redux-Toolkit y Redux-Saga: Ahora voy a configurar redact toolkit en esta aplicación. Voy a crear algún archivo dentro de esta carpeta reduct. Voy a tener un archivo yep, tienda dot js. Voy a tener una carpeta para la función. En tercer filtro, voy a tener nuestras diapositivas. Estamos lidiando con la película. Entonces vamos a dar esta diapositiva aquí. Películas rebanada dot js. Dentro de este redex, voy a tener un par de expedientes también. Voy a tener APA dot js. Voy a tener saga, también una película sagas dot js. Esto sostendrá todo solo abrazador que vamos a conseguir van a tener una saga raíz también. Eso es todo. Este tanto archivo se requiere de adentro hacia afuera reduct carpeta. En primer lugar, configuremos redact toolkit en esta aplicación. Para dentro de este archivo, necesitamos traer el kit de herramientas reduct de deslizamiento de borde. Vamos a crear diapositivas. Ahora, vamos a aclararlo. Nuestras películas rebanan, rebanan, rebanan, rebanan nombre por aquí. B película. Definamos el estado inicial de nuestra aplicación. Vamos a tener lista de películas en el estado inicial, que contendrá todas las películas que vamos a recibir de nuestro IMDB. Será error, que estará entrando inicialmente. Y vamos a tener un estado inicial más que llevará a cabo película individual y detalle. Será en el objeto T. Después de eso, podemos exportar éste. Exportar por defecto, películas lyse ni reducido. Ahora vamos a venir al archivo js de la tienda. Aquí tenemos que traer configures hacia más redact toolkit. Configure se rasgó. Entonces tenemos que traer crear saga, un middleware Rameau o redact saga. Tenemos que traer de redact sag solamente, no núcleo. Quita este. Ahora tenemos que traer nuestras diapositivas de películas. Tan importante rebanada de película. Película tan importante lo reduzca. Entonces se desliza, nada más que lo redujimos. Disminuirlo de la rodaja de películas. Tenemos que sacar también la saga raíz. Saga Raíz. Ahora, tenemos que crear el instante de la muerte Crear Diagrama middleware llamado saga middleware. Middleware. Hagamos aquí causa tienda. Estamos configurando nuestra tienda. Configura pobre. Lo vamos a haber reducido todavía. Y ha sido una clave pionera de la película. Signo. Estoy ofendiendo reducirlo aquí, esa es nuestra película el reductor. Ahora tenemos que usar también tu middleware. Entonces estamos usando aquí saga añadir un middleware. Por lo que tenemos que especificar también un modelo donde nuestro y esto es hacia middleware predeterminado. middleware predeterminado. Hagamos concur. En tercera que vamos a poner nuestro middleware saga. Después de esa saga middleware dot run. Aquí vamos a pasar la saga roots export default store. Sólo voy a hacer un comentario, esta línea de código porque por el momento no tenemos fútbol alguno. Lanzará un error una vez que hayas configurado el reduct a líquido con nuestra app React hasta ahora. Ahora, solo pongamos un comentario por aquí. Vamos al archivo index.js. Aquí tenemos que traer proveedor de nuestro reactor hacer de reaccionado con proveedor de x minuto. También necesitamos traer una carpeta de tienda. Vamos a envolver nuestro componente de aplicación con proveedor. Cortemos éste y peguémoslo por aquí. Y vamos a restaurar. Vamos a guardar este archivo y vamos a entrar en el navegador y verificar si la herramienta de redact creada correctamente configurada no están en nuestra aplicación. Reparar éste, no tenemos ningún problema. Entonces vamos a abrir la reducción DevTools. Se puede ver que somos capaces de ver nuestro estado inicial. Y esta herramienta de reducción de profundidad que hemos definido en nuestro archivo de diapositivas de películas dot js, valor de estado que podemos ver en este video. Acreditaremos que está totalmente configurado en nuestra aplicación React. 10. Enable el ruteo: Ahora habilitemos el enrutamiento en esta aplicación. Vamos a tener sólo dos páginas en esta aplicación. Eso es casa, no JS. Vamos a tener moverlo o GIS en el que vamos a resolver una sola película con algún detalle. Vamos a engendrar toma inhibir aquí. También generemos un fragmento reactivo en este archivo. Ahora, vamos al archivo app.js. Vamos a quitar este. Vamos a traer componente de nuestra reaccionada. Necesitamos rutas del router del navegador. Veamos, mueve éste. Deja que encaje por el componente de nivel superior que es el router del navegador. En tercero, están en tercer lugar, esto vamos a tener rutas en las que vamos a tener múltiples rutas. Encontremos nuestra ruta domiciliaria. Vamos a traer nuestro código de componente casero de forma automática. Importar esa página. Vamos a tener cuatro películas individuales también. Así que la identificación de la película, está bien. Vamos a renderizar componente de película. El enrutamiento está configurado. Puedes verificarlo en el navegador. Así que vamos al navegador. El enrutamiento está funcionando. Vamos a poner a la película también. También. ¿ De acuerdo? Por lo que ambos enrutaron trabajando en esta aplicación React. 11. Trabajar en acciones y API - Películas de fetch: Voy a empezar con la siguiente parte donde vamos a buscar todas las películas de nuestra propia API IMDB para buscar toda la película cuando también, derecha, acción y Saga. Cinco veces va a empezar con esta película desliza el archivo dot js. Voy a escribir acción. Entonces acción en reduct toolkit, escribimos en su interior se reduce su primera vez va a tener buenas películas. Inicialmente estamos encajando la película con el nombre es piridina. ¿ De acuerdo? Entonces vamos a recibir este nombre, componente Pramod y podemos simplemente devolver sí nombre. Después de eso, tenemos que configurar las películas, algunas películas. Esto tendrá un estado. Pongamos aquí también coma. lista estatal de películas de puntos es justa a la acción. Carga útil de punto. Dejar exportar este axón también. Así exportar Películas, diapositivas, acentos de puntos. Por el momento tenemos dos acciones que son películas. Películas. Esto lo hemos creado a XN. Ahora voy a empezar con nuestra APA. Entonces trabajaremos en nuestras sagas. Por lo que primero tenemos que precisar también el punto. Voy a importar axial. Después de eso, especifiquemos el punto final, API. Punto final. Vamos a tener este punto final. Este punto final que vamos a utilizar para buscar toda la película RAM o IMDB APA. Ahora, tenemos que especificar el método para obtener todas las películas de exportación de películas. Inicialmente, estamos encajando toda la película con el nombre de la película es paradigma. Aquí tenemos que especificar el nombre de la película. Después de ahí. Podemos tener retorno x, sí. Y podemos especificar que endpoint API, endpoint amperios tiempos que tenemos que usar S es igual a la película. Ahora, también podemos ordenar esto en profundidad. Por lo que no necesitamos usar el retorno. Si tienes una línea de código, eliminemos esta y déjame también eliminar esta devolución. Esto también se acabará. 12. Trabajar en Saga: Ahora trabajemos en saga. Tenemos que importar algún efecto de saga reduct. Efecto. Tenemos que traer efecto como pongamos. Después de eso. Tenemos que especificar un reloj o un año. Vamos a usar la función generador. Entonces en las películas de carga, vamos a ceder esta. Entonces, vamos, estamos utilizando aquí, que afecte a esta deuda, dejemos que la acción básicamente se ejecute a la vez. Y si disparamos otra acción, y si la tarea anterior aún se está ejecutando, entonces la tarea anterior con Italia se cancelará. Y esta tecnología le dejó ejecutar la tarea con los nuevos datos. En general. Evita la concurrencia por aquí. Por eso estoy usando aquí tomar, déjanos siempre tomar la última. Entonces aquí tenemos que especificar la x y el tipo. Entonces tenemos que usar año después y conseguir películas que viene o mover las diapositivas tipo dot. Aquí tenemos que especificar una saga más que está en las películas de carga. Hemos puesto pagado por este oyente. Esta será también una función de generador. Función en Load Movie. Creo que va a recibir un componente de verano de carga útil. Y aquí vamos a usar efectivo de mano si tienes algún tipo de error. Entonces solo voy a hacer un registro de consola después de eso e intentarlo. Vamos a especificar una variable llamada nombre de película. Cargar. Vamos a ser datos de carga útil y mudarnos. No te confundes por aquí. Para que así he declarado una variable aquí. Payload contendrá nuestro nombre de película. Ahora, definamos una variable con bonos automovilísticos. Vamos a llamar, vamos a usar aquí efecto de llamada, reductar hacia abajo, escalonar, hacer solicitudes de API para que encajen películas. Y podemos pasar el nombre de la película y el argumento aquí. Esta primera hipoteca recibe particularmente este nombre de película aquí. Ahora lo conseguiremos como bonos. Y aquí vamos a comprobar si response.status 200. Entonces vamos a dispersar otra acción con el método Alpha PUT. Soporte permiten dispersar nuevo Weimar, redactar middleware escalonamiento. Entonces aquí vamos a dispersar las películas de paso de acción. Aquí podemos conseguir que se extienda nuestra respuesta que viene de o API IMDB para response.data. Después de eso, ¿qué tenemos que hacer? Exportar sagas de películas. Vamos a formar esta tarea en películas de carga. Ahora, vamos al escalonamiento de raíces. Aquí. Tenemos que traer, aquí, tenemos que traer efecto Hall de nuestro escalonamiento. También llevemos nuestras películas, Uigur. Las películas o bien traen sagas de películas. Aquí, exportar, por defecto. El Silvia también generó solamente. Serán nuestras raíces. Aquí estamos usando todo se usa cuando se tiene que ejecutar un efecto saga múltiple en un Padlet. Esa falla usando todavía. Estamos terminados con nuestras raíces. Y vamos al archivo de la tienda dot js. Y ahora podemos descomentar esta línea de código. Ahora queremos cualquier tema en nuestra aplicación. Así que vamos primero al navegador. Todo no se formó aquí lo que nos falta. Entonces tenemos que traer de efecto. Ahora vamos al navegador. No tenemos ninguna cadena nuestra aplicación después de escribir nuestra saga flash. 13. Trabajar en búsqueda: Por lo que hemos creado nuestro primer escalonamiento. Ahora, despachemos esta acción desde nuestro componente. Tenemos nuestra página de inicio aquí y película. Entonces primero vamos a trabajar en esta página de inicio. Esta página de inicio con Italia tendrá dos componentes. Entonces vamos a quitar este. Y voy a usar tu fragmento. Ir a tener un tercer componente. Ese componente que vas a tener como componente de lista de películas, ¿de acuerdo? Uno por uno, vamos a trabajar. Trabajemos en este tercer componente. Voy a crear un archivo en carpeta de componentes federales. Dentro de esta raíz dos, vamos a tener un estilo de archivo, así que voy a usar tus estilos dot js. Generemos un fragmento por aquí. Después de eso, lo que tenemos que hacer de reaccionar cuando TI para traer usos estado, Usa el factor. También es necesario traer cartón competente del material cuando falló. Entonces también necesitamos traerte seleccionado y utilizar este camino Pramod. Usted selecciona usado en Despacho. Ahora dentro voy a tener fragmento. En tercera deuda. Voy a tener etiqueta h2. Darte una película. Voy a usar tu nombre de clase. Voy a usar tu material UI Style. Traigan aquí. Usa estilos aquí para defender este alicatado. Compró nuestro componente. Vamos a traer ese estilo de uso de. Así que vamos a traer estos enormes estilos de este dice archivo tipo. Y de hecho, voy a definir este azulejo para nuestro tercer componente. De hecho, los azulejos dot js. Aquí lo que tenemos que hacer, tenemos que hacer un estilo a partir de nuestro estilo de interfaz de usuario material, estilos para estilos predeterminados. Y dentro de ella voy a definir la parte de tallying. Nombre de clase diferente, diferente. Vamos a tener título. Título. Voy a tener una luz diminuta. Vamos lo primero que voy a tener 0.1 altura de línea, voy a tener 1.25. Entonces voy a tener margen inferior 0.15. Voy a tener tamaño de fuente. Ahora. Vamos a tener un mosaico para nuestro campo de entrada también. Entonces forma. Y va a tener anchura. Voy a dar aquí 90 viewport, anchura máxima. Voy a dar aquí. Entonces voy a tener margen, auto, margen, margen superior, mortero, que estaremos todos fijados. También vamos a tener un nombre de clase por error. Para esto, voy a colorear. Voy a usar el color todavía. F 914. Ahora voy a tener relleno, top. 0.5. Entonces tamaño de fuente, voy a tener 2.15 gramos. De acuerdo, vamos a esto, nuestro componente de búsqueda. Después de eso, lo que tenemos que hacer cinco, voy a definir un estado o nuestro nombre de campo de entrada, nombre. Y en un principio vamos a la película relacionada con una araña, vamos a precisar el paradigma del compendio literario inicial. Ahora, tenemos que crear esta décima para este enorme estilo, El costo más theta al cuadrado para usar los Estilos. Ahora después de eso, vamos a ser utilizados aquí, nuestro estilo. Por lo que las clases dot title. Después de eso voy a tener Formulario, nombre de clase que voy a usar aquí. De nuevo clases a partir de ella. Voy a tener muy básico en algún punto medio prevenir default. Ahora dentro de este formulario, vamos a tener tipo textual. Anchura. Se nombrará el valor. Y voy a hacer algún mosaico de borde aquí para este campo de entrada. Ser un ancho. Voy a dar TCH. Vamos a tener un método onChange nombre punto punto, valor de punto. Ahora tenemos que despachar una acción también desde este componente solamente. Guardemos la referencia de nosotros es mejor. Y luego la variable de despacho. Será un despacho. Ahora voy a correr aquí para usar efecto. Este es un efecto enorme. Vamos a correr cada vez que estamos cambiando el campo de entrada del circuito y cuándo proporcionarlo de forma independiente aquí en el nombre. Y podemos despachar como código de películas importar automáticamente esa acción. Películas como aquí podemos pasar un nombre. Ahora, tenemos que traer este componente en nuestro archivo home dot js. En lugar de j, puedes sacar tercer componente. Ahora, vamos al navegador. Deja que éste. Tenemos dos altos, esta emoción también. ¿ De acuerdo? Lo que tenemos que hacer toda esta emoción. Dejar instalar éste. Ya tenemos esta interfaz de usuario material. Olivia. Sólo actualizamos todas estas dos pipetas. Para instalar estos dos paquetes. Ambos paquetes consiguieron un total. Ahora vamos a cerrar este. Entrémonos en el navegador. Tenemos este tercer campo de entrada. Y se puede ver que en un principio nosotros en la instalación del elevador de películas relacionado con se dispara sobre. Vamos a abrir. Vamos a abrir éste. Se puede ver que estamos consiguiendo nuestras películas más antiguas. Y tercero es lista de películas. Consigue solo diez películas con esa API IMDB. Se puede ver que somos capaces de terminar la película relacionada con esta araña. 14. Manejo un error: Y si hiciste éste, y si tratas de falsificar la película solo con la palabra clave F, ahora conseguirás eta. puede ver que están recibiendo aquí error como demasiados resultados. Por lo que también vamos a ordenar el método editor también. En esta aplicación, voy a resolver este método de error. Y después de eso, voy a mostrar toda la película, el nombre relacionado con su araña. Vamos a poner el portafolio VS. Entonces cuando se tomó traer nuestro estado, usaría seleccionado. Podemos utilizar aquí selector usado. Nuestras rodajas de películas registradas con la película clave reductor. Y podemos tener aquí lista de películas en tercera película tarde, o bien tenemos película, nuestro error. Tenemos que ir un nivel más. Y esto será un error. Y podemos traerles éste al error. Ahora, podemos revisar Lotus TextField. Al igual que si tienes el error, entonces solo vio el error. Y cuando usar el nombre de la clase, voy a usar tu material nosotros azulejos miran risa. Error de punto F. Contando. Ya hemos definido en nuestro archivo de estilo dot js. Podemos. Ahora pasemos al navegador. Tenemos algún tema. Será lista de películas. Si miras nuestra diapositiva de películas o archivo GIF, no la movió lista. Ahora vamos a entrar en el navegador. Lee este. Ahora no tenemos ningún tema. Ahora, vamos a quitar este. Se puede ver que también podemos mostrar el método de error. 15. Renderización de la lista de películas: Ahora lo siguiente vamos a mostrar toda la película relacionada con su araña debajo de este campo de entrada. Para eso, tenemos que crear un componente. Actualmente, lista de películas, lista de películas, no JS. Generemos este fragmento. Aquí. Tenemos que traer algún componente de nuestra interfaz de usuario material. El componente que vamos a utilizar tu auto contenidomultimedia contenido tipo robot off. Después de eso. También vamos a utilizar aquí, seleccionarás un redux. Permítanos traerte seleccionado. Vamos a necesitar el enlace de nuestro router React dom. Y primero voy a conseguir toda la lista de películas que tenemos en nuestra es hacia. Así que sólo voy a copiar esta línea de código. Voy a pegarlo por aquí. Y no lo necesitamos que sólo estamos en 13 lista de películas. Este de aquí. Digamos que elimine este. Entonces voy a usar tu grilla. Vamos a proporcionar un poco de estilo. Así que vamos a crecer. Será un contenedor. De nuevo, voy a estar usando grid. De nuevo, voy a usar grid aquí. Contenedor, justificar contenido. Y será un espaciamiento central. Voy a dar aquí tres después de eso. Películas. Voy a mapear, estamos consiguiendo las películas en esta búsqueda, vale, Así que si miras el patrón, así que si refresco esta obligación, son todas las películas se almacenan en esta búsqueda. En cambio es que tenemos nuestra película. Así que pongámoslo el código VS. Entonces aquí podemos escribir así. Una vez que tengamos los datos en nuestro WR, entonces sólo se atenderá a toda la película. Tonto. Ahora aquí de nuevo, voy a usar grid y key. Puedo usar aquí como índice. El índice. Puedo usar tu clave están en profundidad. Será el ítem. Voy a usar aún componente de tarjeta, algún estilo en línea, Sx, max, ancho, ancho. Te voy a dar un 350. Entonces voy a tener mi tarjeta de medios. Medios de tarjeta. Voy a tener componente. Componente solo será enviado por correo electrónico. Entonces. Hola, voy a dar 350. Vamos a renderizar la imagen dentro de este medio de tarjeta. Yo volco. Nuestra imagen se almacena dentro de este objeto. Entonces si abro esta imagen, no hemos tenido esta propiedad. Aquí, punto punto Porter en alterno, puedes dar aquí ítem dot title. Después de esto, voy a tener contenido de tarjeta. Y voy a usar aquí material topográfico, tú estás aquí. Estoy renderizando elemento punto título variante. Voy al espacio por color corporal. Te voy a dar primaria punto punto. Ahora también voy a esperar araña aquí, parte de la película en la que se estrenó la película del oído. Vamos a copiar este. Pega por aquí. Vamos a conseguir el soporte aquí. Todo este medio de tarjeta que voy a envolver con el enlace. Enlace se pondrá a continuación. Debajo de este contenido de la tarjeta. Podemos especificar a dónde fue para navegar. Este enrutado ya digital donde estamos mostrando la película individual con algún detalle. Yo término punto aquí, voy a usar aquí IMDB, IMDB ID. Ahora lo siguiente que tenemos que utilizar básicamente este componente dentro de nuestro archivo home dot js. Podemos quitar éste. Podemos traer nuestra lista de películas. Ahora, vamos al navegador. Ahora, somos capaces de mostrar que todos ellos estarán relacionados con una araña. Y si haces clic en alguna película, nunca llegarás a la película soltera. Si encuestaste un nombre de película diferente. Como Batman. Estamos consiguiendo película relacionada con Pac-Man. Hemos completado nuestra página de inicio. Lo siguiente vamos a trabajar en nuestro sencillo en el que vamos a mostrar alguna información sobre película como, como, ¿cuál es la historia de la película en qué año llegó a lanzar? Dirigido. Todo esto para contar. Vamos a mostrar en esta sola página de película. En primer lugar, vamos a trabajar en nuestra parte API saga acción. Entonces trabajaremos en esto. 16. Acción, API y saga: película individual: Cinco veces va a empezar con nuestra acción APA y escalonar. La película soltera. Vamos al archivo de las películas dot js. Aquí. Bueno. Película. Va a tener una devolución de identificación. Enviaremos ID desde nuestro componente para obtener el detalle sobre una sola película. Será como la acción estatal. Punto estatal. La película no es carga útil. Vamos a formatear este. Exportemos esta película de acción. Ahora tenemos que trabajar en nuestro archivo api dot js. Lo que tenemos que hacer, sólo voy a copiar éste. Y serán películas o buscará más. Vamos a ver esa identificación de película. ID de película. Será una identificación de película. Aquí tenemos que dar I. Ahora vamos a trabajar en nuestra saga. Ponlo en películas. Tengo un archivo dot js. Sólo voy a copiar este. Será exactamente lo mismo. Será como en Load Movie solamente. Será en Load Movie y piensa que esta será una película. Y tenemos que definir este también. Entonces este es tu oyente, y esto es un vigilante. Este tipo, está escuchando. Entonces cada vez que dispares esta acción, esto se va a quitar de la cola. También hemos predefinido a este tipo. Será casi igual. Sólo película B. Vamos a recibir una carga útil, tener una identificación de película. Entonces será ID de película. Será buscar películas solamente, no películas. Película. Se configurará película. Tenemos que bifurcar esta tarea, la película de carga de bifurcación. No tenemos que hacer nada en ella. Eso es lo que saga dot js archivo. Terminamos con nuestra saga cada vez que un gran acento de película disparó desde nuestro componente. Este argumentador ayudaba a escuchar en este eje y tipo. Terminará con Italia. La educación y 1 tercera promesa y conseguir que se resuelva. Nuestro generador se reanudará. Terminamos con nuestro servicio. 17. Página de detalles de la película: Ahora vamos a trabajar en esta página que es película. Entonces tenemos que traerte el efecto. Ahora también tenemos que llevar a EE.UU. navegue y use params Tom o React router abajo. Vamos a traer eso a EU. Navegar. Y usa param. Porque necesitamos el ID que tenemos más aún de URL. Ahora, también necesitamos traerte seleccionado y usar disperse de nuestro React redux. Vamos a traerle seleccionado y utilizar despacho. Tenemos que traer algún componente de nuestro componente de interfaz de usuario material para traer su botón de tipografía. También llevemos el estilo de usuario. Enormes estilos. Este interruptor alicatado Pi. Contamos con preespecificar. Uno también se titula esta página. Déjame ponerlo este archivo de diálogo JS. Vamos a tener dos secciones. Sección. Voy a copiar el mosaico para esta sección nombre de clase para esto, qué mosaico voy a usar para esta x, y puedes copiar éste. Ahora volvamos a nuestro archivo de la película dot js. Por primera vez va a almacenar la referencia de enorme disparidad en la variable de despacho. Voy a copiar a una pareja aplicando esta lista de películas dot js. Para copiar esta línea. Nos interesa solo objeto de película, no en movimiento porque guarda el detalle sobre la sola película. Sólo necesitamos película. Ahora tenemos que crear la fuerza de estos enormes azulejos, así llamados pluses. Por lo general, estilo. También necesitamos el DNI. Nos van a hacer estallar params. Ahora vamos a definir gran efecto todavía. Este enorme efecto se ejecutará mes. Tenemos el DNI. Tenemos el DNI. Entonces podemos mostrarlo la acción que es conseguir película. Y tenemos que pasar el DNI. Deje que nuestra sexta o la referencia de la juventud navegue hacia ella. Navegar variable. Ahora podemos verificar éste si estamos obteniendo los datos detallados de la sola película en el ID o no. Así que vayamos al navegador y peleemos. Vamos a esta página, refresque esta. Demos clic en cualquier película. Veamos su deducible. Vamos a abrir esta película donde se puede ver eso. Se puede ver que tenemos nuestro objeto cinematográfico en el que tenemos un detalle sobre esta película. Eso es increíble. Es paradigma y tenemos algunos detallados como director de título en nuestra trama. Vamos a usar alguna información de este objeto y vamos a mostrar en esta página ahora son lo que tenemos que hacer. Voy a quitar esto puede hacer. Y voy a tener sección el nombre de la clase. Voy a usar tus clases materiales. Y de hecho que voy a usar la etiqueta de imagen. Voy a usar aquí como póster de película y en alterno y vamos a proporcionar el título de la película, título de película. Voy a tener un div. Voy a usar tipografía. Y vamos a alinear variante izquierda. Mantengamos S3, S2. Aquí. Voy a mostrar el título de la película, título de punto. Voy a copiar éste un par de tiempo. Así que voy a contar el título de la película, trama ese vector. Ok. Copiemos este un par de tiempo. El tiempo que voy a usar la Variante cinco. Pero aquí podemos tener todavía como la película dot p aquí. Entonces voy a usar aquí cuerpo uno. Será trama. Ahora también voy a resolver el nombre del director, y aquí será a las seis. Vamos a darle la vuelta seis. Directora plateada, director de puntos de cine. Y podemos darte un director. Y también vamos a tener un botón Volver atrás. Veamos, enorme botón teniendo volver variante que voy a usar aquí. Y luego voy a tener el método onClick. Nunca llegará hacia la página de inicio. Navegar. Podemos usar aquí. Guardemos este archivo. Vamos al navegador. Ahora podemos ver esta sola película con algunos detallados. Por lo que tenemos nombre de película, trama y dirigida. También puedes añadir un poco más de detalle según tu conveniencia. Estoy usando sólo este tanto detalle en esta página. Y si hacemos clic en volver atrás, nunca llegarás hacia la página de inicio. También puedes ver esta película. Esto está funcionando. Abramos este control. Entonces no tenemos ningún problema en nuestra consola. 18. Resumen: Si estás viendo este video, que cuando hayas completado con éxito este curso, ahora espero que hayas tirado bajo tendiendo integrarte con redact toolkit en la aplicación React. Y espero que hayan disfrutado del curso con algunos nuevos conceptos redex. Y si aún tienes alguna duda o consulta relativa a este curso, siempre puedes poner tu consulta o duda en la sección de comentarios. Voy a intentar mi nivel mejor para resolver su consulta. Entonces eso es todo. Desde mi final, te veré en redes.