Aprenda Redux-Saga com kit de ferramentas Redux-Toolkit React JS

1. Introdução: Olá e seja bem-vindo a este curso no qual vamos aprender como você pode usar a saga redact com grade de ferramentas redact em rehab gs. Meu nome é Tom com divisão e serei seu instrutor neste curso. Se você for um desenvolvedor do React, talvez esteja usando um roteador como gerenciamento de estado para que seu aplicativo React mantenha o estado do aplicativo. E você também pode estar usando middleware reductant ou redox saga para lidar com efeitos colaterais em seu aplicativo React. Agora, deixe-me dar-lhe a breve visão geral de Rudolf para aqueles de vocês que não sabem o que é. Portanto, a falha de redact é biblioteca de gerenciamento de estado que usamos em nosso aplicativo React, assim como você usará dentro do aplicativo front-end. Não apenas com o React, mas é muito popular com a biblioteca React. Então essa é a visão geral de Rudolf. Com a ajuda deste aplicativo, você aprenderá como integrar três táxons com leme para líquido. Neste curso, vamos criar um aplicativo de pesquisa de filmes com a ajuda de redut saga e fazer kit de ferramentas escuro. Então, o kit de ferramentas já redija nossa solução diferente para lidar com operação assíncrona, provavelmente você pode gerenciar o efeito colateral do aplicativo com criar um think tank é consulta RTK, mas às vezes você pode querer para acompanhar a abordagem de saga redact para lidar com o efeito colateral da sua aplicação. Com esta aplicação, vamos nos integrar com a eliminação do portão total. E espero que você tenha alguma compreensão do ADA redox e função gerador porque redox saga youth generator função para escrever lógica assíncrona. Mas até eu lhe dar uma breve visão geral sobre redox AGA e função gerador mais adiante neste vídeo. Mas primeiro, vamos ter uma rápida demonstração da publicação de dados. Então, neste filme é que cada aplicativo estamos buscando filme relacionado ao seu pó. Inicialmente, ele se encaixa em torno de dez filmes com a ajuda de API de terceiros chamada OEM DBAPI. Sempre que você configurá-lo para um filme com um nome específico ou API IMDB, retorne apenas dez filmes. E você fez esse circuito. Digamos que Jim, eu queria pesquisar o filme com a palavra-chave S. Desta vez, com o retorno a muitos resultados. Além disso, vamos lidar apenas com kit de ferramentas heterodox e redact. E você também pode começar com um nome de filme diferente, como Batman. Você também pode iniciar o filme com um nome de filme diferente. E se você quiser saber mais sobre um filme específico, você pode clicar neste cartão. Você nunca chegará ao filme único onde temos mais detalhes sobre esse filme específico, como nome, ouvido, enredo e dirigido. Se clicarmos na unidade GoBear, volte para a página inicial. Pessoal, esse aplicativo também será responsivo porque usaremos a porque usaremos biblioteca de interface do usuário material para criar o componente React. Você pode ver que esse aplicativo também é responsivo. Portanto, essa é a obrigação geral que vamos construir neste curso com a ajuda de saga relativa e redact toolkit em Riyadh. Agora, vamos falar sobre a habilidade necessária para este curso. Este curso é projetado de tal forma que qualquer pessoa pode participar deste curso que esteja interessado em aprender o conceito redox moderno, você só precisa ter uma compreensão básica de HTML, CSS, JavaScript, bem como Reaja o conhecimento básico. No final deste curso, você entenderá como integrar a saga redact com o kit de ferramentas redact em qualquer aplicativo React. O que você está esperando por ingressar neste curso para aprender todo esse conceito moderno? E se você tiver alguma consulta ou sugestão, então você sempre pode entrar em contato comigo. Vou tentar o meu nível melhor para resolver toda a sua consulta. É isso. Do meu lado, verei você na seção do curso. 2. O que é Redux e por que usamos o recurso?: Neste vídeo primeiro, entenderemos o problema central da gestão imobiliária React js. Temos nosso principal componente de aplicativo. Então, obtivemos nosso subcomponente. Se quisermos alterar um texto , não podemos fazer diretamente. Em vez disso, tenho que informar um pai e alterar o texto lá. E se eu tiver um componente adicional , ele ficará ainda mais complexo. Portanto, temos uma leitura sobre a qual tem uma abordagem diferente. Então, aqui temos nossa visão, nossa aplicação e, neste aplicativo, em qualquer componente, será despachado e agirá. Em seguida, faça a marca através do redutor. Reducer trabalho ou tarefa bastante simples. Isso tomará uma ação, então levará todos os manipulados e dará um novo estado. Essa manipulação acontecerá, asse no imutável. Isso significa que não mudará o vetor antigo. Ele tomará todo o circuito como base e, em seguida, criará uma nova cópia de todos os retratados com as mudanças na ploidy permaneceram intocadas. Acabamos de criar um novo levantado e devolver esse novo estado. Isso imutável oferece um estado exclusivo em seu aplicativo. Agora estamos recebendo um novo estado pode ser reduzido , então ele será armazenado em uma loja. E teremos apenas uma loja em nosso aplicativo. Este vetor tem uma tarefa simples, empurre em direção ao nosso estado. É por isso que se chama Restore. Você pode ter um redutor múltiplo, mas teremos apenas um armazenado em nosso aplicativo. Em seguida, nosso aplicativo assina esta loja. Sempre que estiver datado, seja atualizado. Novo parque estadual para a loja. A loja enviará automaticamente para todo o componente e direcionado e o aplicativo será atualizado. Agora, voltemos ao exemplo anterior em que tínhamos nosso componente de aplicativo com outros componentes. E agora também temos uma loja. Agora, se quisermos mudar algo, o componente do usuário do MainComponent, então vamos despachar e agir. Em seguida, o estado o introduz. E então o caminho é caro para todos os componentes nesses dados, tudo sobre o que é reduzido e por que usamos Redux no React js. 3. O que é Redux-Toolkit ?: Então, agora vamos entender qual é o leitor total bom para liquidar também usa para gerenciar aplicativos if declarar um aplicativo React de forma eficiente. Ele forneceu algumas baterias incluídas conjunto de ferramentas para um desenvolvimento eficiente. Essas baterias incluíram o termo do conjunto de ferramentas, parecem um pouco chiques aqui, mas você entenderá esse termo mais tarde. Os roteadores já eram uma opção popular para gerenciamento de estados em nosso aplicativo React. Então, por que o kit de ferramentas redact é necessário? Com o kit de ferramentas redact, havia muito código necessário para configurá-lo, para otimizar esse nível básico. E, assim, muito código boilerplate, o que torna nosso código, vamos limpá-lo eficiente. Além disso, muitos pacotes precisam ser instalados para criar um aplicativo escalável. Com o redox tradicional, costumávamos escrever ação e redutor em arquivo separado. E isso se torna mais complexo quando nosso aplicativo e faz com que você resolva esse desafio, redação surgiu com um kit de ferramentas do leitor. kit de ferramentas Redact é uma abordagem melhor para escrever livrar-se da lógica. No geral, o leitor deve analisar seu período de redução e desenvolvimento, incluindo o leitor Corbett redigir bons parágrafos que eles acham que estão preenchidos para criar um aplicativo nativo. Portanto, o kit de ferramentas redact permite que os desenvolvedores escrevam código Redux simples e limpo. Portanto, isso é tudo sobre o kit de ferramentas redact e por que usamos com o React. Então, espero que você entenda esse termo extravagante agora que é um conjunto de ferramentas incluído na bateria. Então, isso é tudo sobre kit de ferramentas. Agora vamos entender esse leitor para ficar bem com um cenário básico. Suponha que tenhamos que criar um aplicativo de contador. Temos que gerenciá-lo ainda são cinco. Vou mostrar a vocês a abordagem tradicional com o redutor tradicional. Então, geralmente lemos redutor e acidente em um arquivo separado. Como você pode ver que aqui temos x e dot js em que temos dois x dez para incrementar o valor do contador ou diminuir o valor do contador e introduzir um arquivo dot js, temos uma lógica para incrementar um valor do contador ou diminua o valor do contador do Theta. Redact tradicional. Suponha que agora vamos ver como abordamos com o leitor para ficar bem. Na ferramenta redact, poderíamos reescrever nosso redutor e ação no mesmo arquivo. Você pode ver que escrevemos nossa ação no redutor sob a abordagem Criar fatia através da abordagem do kit de ferramentas. E você pode tornar o código muito mais conceito usando create. Tanto o redutor quanto eu podemos, podem ser escritos assim sob o live vendo esse código, definindo uma grade com ele e a ação se torna mais limpa. Os dados são procurados. Não há mais necessidade de usar a instrução switch para gerenciar a ação com seu produtor correspondente. E outra coisa que você pode ter, observe aqui, agora mudamos diretamente o valor na função redutora em vez de retornar um novo valor para atualizar. Isso realmente aconteceu porque a ferramenta de redação poderia usar a biblioteca que permite escrever a mutação logicamente, reduzindo. Isso é tudo sobre o kit de ferramentas do leitor com o cenário básico. 4. O que é Redux-Saga ?: Redact saga é uma biblioteca que visa tornar aplicação de efeitos colaterais de aplicativos. Terceiro efeito aqui significa fazer solicitação HTTP, financiar eventos WebSocket ou buscar dados do servidor GraphQL. Ao salvar algum tipo de informação no cache, nosso navegador armazenou localmente. Essa coisa vem sob o efeito colateral que V gerenciou com a ajuda da saga redact, com a hipótese de que se torna muito fácil de gerenciar, mais eficiente de executar e melhor no valor de manuseio. Isso é tudo sobre a saga redact. Aqui saga usa o recurso ES6 chamado função gerador para escrever código assíncrono. Com essa abordagem, nosso código assíncrono se parece com o código JavaScript síncrono. Então, isso é tudo sobre a função do gerador. 5. O que é Generator ?: Agora vamos entender o conceito de gerador. Portanto, o gerador é um tipo especial de função JavaScript. Nós o introduzimos no EF fixo e essa função com a Itália pode detê-lo no meio do caminho e depois continuar de onde é ensinado. Em JavaScript, zelador é uma função que retornará um objeto no qual você pode chamar um próximo método. Em cada invocação do método net, ele retornará um objeto desse cofre. Ele terá um valor. E o valor pode ser qualquer coisa e feito será falso ou verdadeiro. Principalmente, será falso. E isso se tornará verdade quando não tivermos nenhuma declaração de rendimento. Então vou explicar os maus-tratos mais tarde. Portanto, sempre que não encontrar nenhuma declaração de rendimento na função do gerador, o gerador desapareceu e não gerará nenhum valor. Em cada invocação, ele gerará um novo valor. Uma vez que você viu que o valor do feito acabou, isso significava nosso conhecimento generativo e não gerará nenhum valor. Este é o código básico é o trecho da função do gerador, como parecia. Você pode ver que temos uma marca de estrela aqui, a função, então isso significa que essa função é a função geradora. Então você pode ver que temos um rendimento anual de declaração. É um operador no qual o gerador pode pausar sozinho. Então, basicamente aqui, nossa execução é com a Itália. E uma vez que você, uma vez que você chamar esse método como dotnet iterado, seja qual for o valor que temos aqui, ele retornará rapidamente esse valor na forma desse objeto. Portanto, ele retornará um valor como um. E o valor de w1 será o falso. Se eu for para este GFP e você puder ver que temos o mesmo código aqui. Temos uma função geradora. Temos um rendimento de um ano, dois anos, três anos de idade para este. Se eu clicar, você pode ver que obtivemos esse valor um e fizemos as declarações de Paul. Ainda temos alguma declaração de rendimento if. Agora, para obter esse valor, esse valor. Então você precisa invocar o próximo método novamente. Se eu simplesmente copiar este log do console e colá-lo aqui. E se eu simplesmente deixá-lo novamente e efeito, se eu correr de novo. Agora você pode ver que temos esse valor aqui e o valor do Danny ainda é falso porque ainda temos a declaração anual. Se eu copiar, novamente, se eu simplesmente limpar este. Agora, temos o valor três aqui, e então ainda é falso. E se eu copiar novamente, se eu simplesmente limpar este, e se eu clicar em Executar novamente, obteremos esse valor e ainda fizemos repetidamente, a execução será pausada. Certo? E se você novamente trabalhar o próximo método. Agora, aqui ele descobrirá que não temos nenhuma declaração de rendimento. Se você clicar novamente, você obterá esse valor indefinido e feito por meio do administrador. Nossa função geradora agora parou aqui. É assim que basicamente uma função geradora é executada em JavaScript. É como ou fica assim, função geradora funciona no JavaScript. Espero que agora você entenda o conceito de uma função geradora. 6. Configuração do projeto: Pessoal, vamos configurar este projeto. Então, vou abrir um prompt de comando. Vamos criar nosso projeto aqui com o comando N dx create. O nome do projeto será como aplicativo de filme. Vamos apertar Enter. E levará cerca dois a três minutos para instalar toda a dependência necessária. Então, voltarei uma para outra dependência, saiba que a configuração do nosso projeto agora está concluída aqui. Você pode ver que vamos primeiro entrar nessa pasta que está se movendo para cima. Antes de fazermos e o PMI começar. Neste projeto, estamos usando interface do usuário material para criar nosso componente React. Então, vamos primeiro copiar esta 15 vezes instalando todos os pacotes necessários para criar este aplicativo. Aqui. Precisamos apenas de material de interface do usuário. Também precisamos de estilos de interface do usuário materiais. E, além disso, precisamos de mais alguns pacotes como o React, uma leitura x. Também precisamos de saga redact, mas reagimos no altar para baixo. Agora. Precisamos de x, sim. Então, vamos instalar esses pacotes. Pacotes instalados. Já abri este projeto no meu Visual Studio Code. Vamos para o código VS. Então este é o nosso projeto que abri no meu VS Code. 7. Configurando a chave da API OMDB: Antes de começarmos a escrever qualquer código, vamos primeiro configurar nossa chave de API ou IMDB. Vou entrar no navegador e gênero ou chave da API IMDB para obter todo o alvo em movimento. Se eu vou configurar esse, você tem que ir a este site ou IMDB APA. E depois disso, você precisa clicar nessa chave de API. E aqui você tem que selecionar três. Agora você precisa fornecer algum varejo, como e-mail, nome e o que eles usaram para dizer que você precisa fornecer e depois disso, você precisa clicar em Enviar. Depois de fornecer os detalhes. E se você clicar no botão Enviar, você evitará um método como um link de verificação para ativar sua chave para isso inválido. Você precisa abrir sua conta do Gmail. Assim, você pode ver que você tem sua chave aqui e precisa verificar sua chave clicando neste link. Você pode copiar essa chave em seu código VS e clicar neste link para verificar essa chave. Agora, nosso homossexual foi ativado aqui. Vamos fechar este. Estou copiando essa chave. Vou pagá-lo no meu código VS. Vou colar a chave que geramos até agora. Agora, só estou colando a chave aqui. E vamos ver se nosso pacote ficou mais alto, nada total do nosso pacote. Agora, você pode ver essa mão vamos fazer aqui, e vamos aguardar o carregamento do aplicativo no navegador. Ele está carregando em nosso navegador. Portanto, nosso aplicativo é carregado com sucesso no navegador. 8. Estrutura e limpeza de aplicativos: Agora vamos para o código VS. Vou capturar nosso projeto. Nós vamos ter para bordas de luz LED. Em seguida, vamos ter uma pasta para componentes. Então vamos ter uma pasta para redox. Na raiz, teremos uma variável de ambiente, ponto a e B. Aqui, vou ter minha chave API de filme, APA de filme, chave pública e colá-la aqui. Como criamos uma variável de ambiente neste aplicativo, precisamos reiniciar novamente nosso servidor. Deixe-me reiniciar este. Agora, o que vou fazer cinco, então cinco vezes vou fazer alguma limpeza, na verdade aplicativo. Vamos remover tudo isso que não precisamos. Aqui. Só vou dar o título. O logotipo não é necessário, então vamos remover este. Vou excluir esse arquivo. Não precisamos deste. Vamos remover este também. Logotipo ponto SVG. No arquivo index.js. Isso será aditivos de permanência. Vamos primeiro entrar no navegador. Trabalhando, não temos nenhum problema agora. 9. Configure o Redux-Toolkit e Redux-Saga: Agora vou configurar o kit de ferramentas redact neste aplicativo. Vou criar algum arquivo dentro dessa pasta de redução. Vou ter um arquivo sim, armazenar dot js. Vou ter uma pasta para o recurso. No terceiro filtro, vou ter nossos slides. Estamos lidando com o filme. Então, vamos dar este slide aqui. Filmes fatia dot js. Dentro desse redex, vou ter alguns arquivos também. Vou ter APA dot js. Vou ter saga, também um filme sagas dot js. Isso vai segurar todos os abraços que vamos conseguir, vão ter uma saga raiz também. É isso. Esse grande número de arquivo é necessário dentro para fora da pasta de redução. Primeiro, vamos configurar o kit de ferramentas redact neste aplicativo. Para dentro deste arquivo, precisamos trazer o kit de ferramentas redutor de deslizamento de borda. Vamos criar slides. Agora, vamos limpar isso. Nossos filmes cortam, fatia, fatia, fatia o nome aqui. Filme B. definir o estado inicial da nossa aplicação. Vamos ter uma lista de filmes no estado inicial, que irá conter todos os filmes que vamos receber do nosso IMDB. Será um erro, que será inserido inicialmente. E vamos ter mais um estado inicial que irá conter um único filme e detalhes. Ele estará no objeto T. Depois disso, podemos exportar este. Exporte o padrão, filmes lise nem reduziu. Agora vamos ao arquivo js store. Aqui precisamos trazer configurações para um kit de ferramentas mais redact. Configure ele rasgou. Então precisamos trazer criar saga, um middleware Rameau ou redact saga. Precisamos trazer apenas de sag redact, não core. Remova este. Agora temos que trazer nossos slides de filmes. Fatia de filme tão importante. Filme tão importante reduzi-lo. Então slides, nada além de reduzimos isso. Reduza a partir da fatia de filmes. Também temos que trazer à tona a saga raiz. Saga de raiz. Agora, temos que criar o middleware Create Diagram instantâneo de morte chamado saga middleware. Middleware. Vamos fazer aqui causa loja. Estamos configurando nossa loja. Configura ruim. Nós vamos reduzi-lo ainda. E tem sido uma chave de filme pioneira. Assine. Estou ofendendo reduzi-lo aqui, esse é o nosso filme o redutor. Agora também temos que usar seu middleware. Então, estamos usando aqui saga adicionar um middleware. Portanto, também temos que especificar um modelo em que nosso e este seja para middleware padrão. Middleware padrão. Vamos concordar. Em terceiro lugar, vamos colocar nosso middleware saga. Depois dessa saga middleware dot run. Aqui vamos passar a loja padrão de exportação saga root. Só vou fazer um comentário, essa linha de código porque no momento não temos futebol. Ele lançará um erro depois de configurar o redutor para líquido com nosso aplicativo React até agora. Agora, vamos colocar um comentário aqui. Vamos para o arquivo index.js. Aqui precisamos trazer o provedor do nosso reator fazer de reagir com o provedor de x minuto. Também precisamos trazer uma pasta de loja. Vamos envolver nosso componente de aplicativo com o provedor. Vamos cortar este e colá-lo aqui. E vamos restaurar. Vamos salvar esse arquivo e vamos entrar no navegador e verificar se a ferramenta de redação criada com êxito configurada não está em nosso aplicativo. Repare este, não temos nenhum problema. Então, vamos abrir DevTools de redução. Você pode ver que somos capazes de ver nosso estado inicial. E essa ferramenta de profundidade de redução que definimos em nossos slides de filme arquivo dot js, valor de estado que podemos ver neste vídeo. Nós creditaremos que está totalmente configurado em nosso aplicativo React. 10. Habilitar encaminhamento: Agora vamos habilitar o roteamento neste aplicativo. Vamos ter apenas duas páginas neste aplicativo. Isso é em casa, não JS. Vamos movê-lo ou SIG no qual vamos resolver um único filme com alguns detalhes. Vamos engender inibe aqui. Vamos também gerar um trecho de reagente neste arquivo também. Agora, vamos para o arquivo app.js. Vamos remover este. Vamos trazer o componente do nosso reagido. Precisamos de rotas do roteador do navegador. Vamos ver, mover este. Deixe que ele se encaixe pelo componente de nível superior que é o roteador do navegador. Em terceiro lugar, eles estão em terceiro, isso teremos rotas nas quais teremos múltiplas rotas. Vamos encontrar nossa rota doméstica. Vamos trazer nosso código de componente doméstico automaticamente. Importe essa página. Vamos ter quatro filmes individuais também. Então, ID do filme, ok. Vamos renderizar o componente de filme. roteamento está configurado. Você pode verificar isso no navegador. Então, vamos para o navegador. roteamento está funcionando. Vamos colocar no filme também. Também. Certo? Portanto, ambos foram roteados trabalhando neste aplicativo React. 11. Como trabalhar em ações e API - Filmes Fetch: Vou começar com a próxima parte que vamos buscar todos os filmes da nossa própria API do IMDB para buscar todo o filme quando ele também, certo, ação e Saga. Cinco vezes vai começar com este filme slides dot js arquivo. Vou escrever ação. Então, a ação no kit de ferramentas redutora, escrevemos dentro dele reduziu a primeira vez a ter bons filmes. Inicialmente, estamos ajustando o filme com o nome de piridina. Certo? Então, vamos receber esse nome, componente Pramod e podemos simplesmente retornar nome sim. Depois disso, temos que definir os filmes, alguns filmes. Isso terá um estado. Vamos colocar aqui vírgula também. lista de filmes de pontos de estado é justa de ação. Carga útil de pontos. Deixe exportar este axônio também. Então exporte filmes, slides, detalhes em pontos. No momento, temos duas ações que são filmes. Filmes. Criamos isso para XN. Agora vou começar com nossa APA. Então vamos trabalhar em nossas sagas. Então, primeiro, também temos que especificar o ponto. Vou importar axial. Depois disso, vamos especificar o endpoint, a API. Ponto final. Vamos ter esse endpoint. Este endpoint que vamos usar para buscar toda a RAM do filme ou IMDB APA. Agora, temos que especificar o método para buscar todos os filmes de exportação de filmes. Inicialmente, estamos encaixando todo o filme com o nome do filme é paradigma. Aqui temos que especificar o nome do filme. Depois de lá. Podemos ter retorno x, sim. E podemos especificar que a API de endpoint, tempos de amperes de endpoint que temos que usar S é igual ao filme. Agora, também podemos classificar isso em profundidade. Portanto, não precisamos usar a devolução. Se você tiver uma linha de código, vamos remover esta e deixe-me também remover esse retorno. Isso também acabará. 12. Trabalhando em Saga: Agora vamos trabalhar na saga. Temos que importar algum efeito de saga de redução. Efeito. Precisamos trazer efeito como vamos colocar. Depois disso. Temos que especificar um relógio ou um ano. Vamos usar a função geradora. Então, no carregamento de filmes, vamos produzir este. Então vamos, estamos usando aqui, que isso afete essa dívida, deixe-a ação basicamente ser executada de uma só vez. E se dispararmos outra ação, e se a tarefa anterior ainda estiver em execução, tarefa anterior com a Itália será cancelada. E essa tecnologia permite que ele execute a tarefa com os novos dados. No geral. Evite a simultaneidade aqui. É por isso que estou usando aqui take, vamos sempre pegar o mais recente. Então aqui temos que especificar o x e o tipo. Então, temos que usar ano depois e obter filmes que vêm ou mover o tipo de ponto dos slides. Aqui temos que especificar mais uma saga que está em filmes carregados. Nós colocamos pago por este ouvinte. Isso também será uma função geradora. Função ao carregar filme. Acho que ele vai receber um componente de verão de carga útil. E aqui vamos usar dinheiro de mão se você tiver algum tipo de erro. Então, vou fazer um log do console depois disso e tentar. Vamos especificar uma variável chamada nome do filme. Carga. Vamos ser dados de carga útil e entrar. Você não fica confuso aqui. Então, dessa forma, declarei uma variável aqui. carga útil conterá o nome do nosso filme. Agora, vamos definir uma variável com títulos de carro. Vamos ligar, vamos usar aqui o efeito de chamada, reduzir para baixo, escalonar, fazer solicitações de API para que se encaixem nos filmes. E podemos passar o nome do filme e o argumento aqui. Esta primeira hipoteca recebe particularmente este nome de filme aqui. Agora vamos obtê-lo como títulos. E aqui vamos verificar se response.status 200. Então vamos dispersar outra ação com o método Alpha PUT. suporte permite dispersar novo Weimar, redigir middleware estagger. Então, aqui vamos dispersar os filmes da etapa de ação. Aqui podemos distribuir nossa resposta que vem da API IMDB para response.data. Depois disso, o que temos que fazer? Exporte sagas de filmes. Vamos formar essa tarefa em filmes de carregamento. Agora, vamos para o cambalão da raiz. Aqui. Temos que trazer, aqui, temos que trazer o efeito Hall do nosso cambalão. Vamos também trazer nossos filmes, Uigur. filmes trazem sagas de filmes. Aqui, exporte, padrão. A Silvia também gerou apenas. Serão nossas raízes. Aqui estamos usando tudo é usado quando você precisa executar um efeito de saga múltipla em um Padlet. Essa falha no uso ainda. Terminamos nossas raízes. E vamos para o arquivo js do ponto da loja. E agora podemos descomentar essa linha de código. Agora queremos qualquer problema em nosso aplicativo. Então, vamos primeiro no navegador. Tudo não foi formado aqui o que estamos perdendo. Então, temos que trazer do efeito. Agora vamos para o navegador. Não temos nenhuma cadeia nossa aplicação depois de escrever nossa saga flash. 13. Trabalhando em pesquisa: Então, criamos nosso primeiro escalonamento. Agora, vamos despachar essa ação do nosso componente. Temos nossa página inicial aqui e filme. Então, primeiro vamos trabalhar nesta página inicial. Esta página inicial com a Itália terá dois componentes. Então, vamos remover este. E vou usar seu fragmento. Vou ter um terceiro componente. Aquele componente que você vai ter como componente de lista de filmes, ok? Um por um, vamos trabalhar. Vamos trabalhar nesse terceiro componente. Vou criar um arquivo na pasta de componentes federais. Dentro desta raiz dois, teremos um estilo de arquivo, então vou usar seus estilos dot js. Vamos gerar um trecho aqui. Depois disso, o que temos que fazer de reagir quando a TI trazer estado de uso, Use o fator. Você também precisa trazer papelão competente do material quando ele falhou. Então também precisamos trazer você selecionado e usar este caminho Pramod. Você seleciona usado em Despacho. Agora, por dentro, vou ter fragmento. Em terceira dívida. Vou ter a tag h2. Dê-lhe um filme. Vou usar o nome da sua classe. Vou usar seu estilo de interface do usuário material. Traga aqui. Use estilos aqui para defender esse ladrilho. Comprei nosso componente. Vamos trazer esse estilo de uso. Então, vamos trazer esses estilos enormes desse arquivo de tipo. E, de fato, vou definir esse bloco para o nosso terceiro componente. Na verdade, os blocos pontilham js. Aqui o que temos que fazer, temos que criar um estilo a partir do nosso estilo de interface do usuário material, estilos para estilos padrão. E dentro dela vou definir a parte de alta. Nome de classe diferente e diferente. Nós vamos ter o título. Título. Vou ter uma pequena luz. Vamos primeiro coisa que vou ter 0,1 altura da linha, vou ter 1,25. Então eu vou ter margem inferior 0,15. Vou ter o tamanho da fonte. Agora. Também teremos um ladrilho para o nosso campo de entrada. Então, forma. E vai ter largura. Vou dar aqui 90 viewport, largura máxima. Vou dar aqui. Então eu vou ter margem, auto, margem, margem superior, margem superior, argamassa, que estaremos todos definidos. Também teremos um nome de classe para erro. Para isso, vou colorir. Vou usar a cor ainda. F 914. Agora vou ter preenchimento, top. 0,5. Em seguida, o tamanho da fonte, vou ter 2,15 gramas. Ok, vamos para isso, nosso componente de pesquisa. Depois disso, o que temos que fazer cinco, vou definir um estado ou nome do campo de entrada, nome. E inicialmente vamos ao filme relacionado a uma aranha, especificando o paradigma inicial do resumo literário. Agora, temos que criar este décimo para este estilo enorme, O custo mais teta ao quadrado para usar os Estilos. Agora depois disso, vamos ser usados aqui, nosso estilo. Então, as classes pontuam título. Depois disso, vou ter Form, nome da classe que vou usar aqui. Mais uma vez as aulas a partir dele. Vou ter muito básico em algum ponto médio evitar o padrão. Agora, dentro deste formulário, teremos o tipo textual. Largura. O valor será nomeado. E eu vou fazer alguns ladrilhos de borda aqui para este campo de entrada. Seja uma largura. Vou dar o TCH. Vamos ter um nome do método onChange ponto ponto ponto, valor de ponto. Agora temos que despachar uma ação também somente desse componente. Vamos armazenar a referência de nós, é melhor. E, em seguida, envie a variável. Será um despacho. Agora vou correr aqui para usar o efeito. Isso é um efeito enorme. Vamos executar sempre que mudarmos o campo de entrada do circuito e quando fornecê-lo de forma independente aqui no nome. E podemos despachar como código de filmes importar automaticamente essa ação. Filmes como aqui podemos passar um nome. Agora, temos que trazer esse componente em nosso arquivo js de ponto inicial. Em vez de j, você pode trazer o terceiro componente. Agora, vamos para o navegador. Deixe este. Temos duas altas, essa emoção também. Certo? O que temos que fazer toda essa emoção. Vamos instalar este. Já temos essa interface de usuário material. Olivia. Só atualizamos todas essas duas pipetas. Para instalar esses dois pacotes. Ambos os pacotes obtiveram um total. Agora vamos fechar este. Vamos para o navegador. Temos esse terceiro campo de entrada. E você pode ver que, inicialmente, no encaixe do elevador do filme relacionado ao, está disparado. Vamos abrir. Vamos abrir este. Você pode ver que estamos recebendo nossos filmes mais antigos. E o terceiro é a lista de filmes. Obter apenas dez filmes com essa API IMDB. Você pode ver que podemos terminar o filme relacionado a essa aranha. 14. Erro de manipulação: E se você fez isso, e se você tentar fingir o filme apenas com a palavra-chave F, agora você receberá eta. Você pode ver que eles estão recebendo erro aqui como muitos resultados. Então, também vamos classificar o método do editor também. Neste aplicativo, vou resolver esse método de erro. E depois disso, vou exibir todo o filme, o nome relacionado à sua aranha. Vamos colocar o portfólio VS. Então, quando foi preciso trazer nosso estado, você usaria o selecionado. Podemos usar aqui o seletor usado. Nossas fatias de filmes registradas com o filme chave redutor. E podemos ter aqui lista de filmes no terceiro filme atrasado, ou temos filme, nosso erro. Temos que ir mais um nível. E isso será um erro. E podemos trazê-los esse erro. Agora, podemos verificar Lotus TextField. Como se você tivesse o erro , só vi o erro. E quando usar o nome da classe, vou usar o seu material nós azulejos parecem rir. Erro de ponto F. Contar. Já definimos em nosso arquivo js de ponto de estilo. Nós podemos. Agora vamos passar para o navegador. Temos algum problema. Será uma lista de filmes. Se você olhar para o slide de filmes ou o arquivo GIF, ele não moveu a lista. Agora vamos para o navegador. Leia este. Agora não temos nenhum problema. Agora, vamos remover este. Você pode ver que também podemos exibir o método de erro. 15. Item de lista de filmes Renderem: Agora, a próxima coisa vamos mostrar todo o filme relacionado à sua aranha abaixo deste campo de entrada. Para isso, temos que criar um componente. Hoje em dia, lista de filmes, lista de filmes, não JS. Vamos gerar esse trecho. Aqui. Temos que trazer algum componente da nossa interface de usuário material. O componente que vamos usar o do tipo de conteúdo de mídia do carro conteúdo robô do tipo de conteúdo de mídia do carro. Depois disso. Também vamos usar aqui, você selecionará um redux. Deixe-nos trazê-lo selecionado. Vamos precisar do link do nosso roteador React dom. E primeiro vou conseguir toda a lista de filmes que temos em nossa direção. Então, vou copiar essa linha de código. Vou colá-lo aqui. E não precisamos que só estamos na lista de 13 filmes. Este aqui. Digamos que remova este. Então, vou usar sua grade. Vamos fornecer algum estilo. Então, vamos crescer. Será um contêiner. Mais uma vez, vou usar a grade. Mais uma vez, vou usar a grade aqui. Container, justifique o conteúdo. E será um espaçamento central. Vou dar aqui três depois disso. Filmes. Vou mapear, estamos recebendo os filmes nesta pesquisa, ok, então se você olhar para o padrão, então se eu atualizar essa obrigação, todos os filmes são armazenados nesta pesquisa. Em vez disso, temos nosso filme. Então, vamos colocá-lo no código VS. Então aqui podemos escrever assim. Assim que tivermos os dados em nosso WR , somente eles tenderão a todo o filme. Mudo. Agora aqui novamente, vou usar a grade e a chave. Posso usar aqui como índice. O índice. Posso usar sua chave em profundidade. Será o item. Vou usar ainda componente de cartão, algum estilo em linha, Sx, max, largura, largura. Vou te dar um 350. Então eu vou ter a mídia do meu cartão. Mídia de cartão. Vou ter um componente. O componente será enviado somente por e-mail. Então. Oi, vou dar 350. Vamos renderizar a imagem dentro desta mídia de cartão. Eu despejo. Nossa imagem é armazenada dentro desse objeto. Então, se eu abrir essa imagem, não tivemos essa propriedade. Aqui, item dot Porter em alternativa, você pode dar aqui o título do ponto do item. Depois disso, vou ter o conteúdo do cartão. E eu vou usar aqui material de topografia, você está aqui. Estou renderizando a variante do título do ponto do item. Vou para o espaço por cor do corpo. Vou dar-lhe ponto ponto primário. Agora também vou esperar aranha aqui, parte do filme em que o filme de ouvido foi lançado. Vamos copiar este. Cole-o aqui. Vamos pegar o suporte aqui. Toda essa mídia de cartão que vou envolver com o link. link ficará abaixo. Abaixo deste conteúdo do cartão. Podemos especificar onde ele foi navegar. Isso já roteou digital para onde estamos exibindo o único filme com alguns detalhes. Eu termo ponto aqui, vou usar aqui IMDB, IMDB ID. Agora, a próxima coisa que temos que usar basicamente esse componente dentro do nosso arquivo js de ponto inicial. Podemos remover este. Podemos trazer nossa lista de filmes. Agora, vamos para o navegador. Agora, podemos mostrar que todos eles estarão relacionados a uma aranha. E se você clicar em qualquer filme, nunca chegará ao único filme. Se você pesquisou um nome de filme diferente. Como o Batman. Estamos recebendo filmes relacionados ao Pac-Man. Concluímos nossa página inicial. A próxima coisa que vamos trabalhar nosso single, no qual vamos exibir algumas informações sobre filmes como, como qual é a história do filme em que ano ele começou a ser lançado? Dirigido. Tudo isso para contar. Vamos exibir nesta única página de filme. Em primeiro lugar, vamos trabalhar em nossa parte da API de saga de ação. Então vamos trabalhar nisso. 16. Acção, API e Saga - Filme único: Cinco vezes vai começar com nossa ação APA e cambalear. O filme único. Vamos para o arquivo de filmes dot js. Aqui. Bom. Filme. Ele vai ter um ID retornado. Enviaremos ID do nosso componente para obter os detalhes sobre um único filme. Será como ação do estado. Ponto de estado. O filme não é útil. Vamos formatar este. Vamos exportar esse filme de ação. Agora temos que trabalhar em nosso arquivo api dot js. O que temos que fazer, só vou copiar este. E serão filmes ou pesquisarão mais. Vamos ver esse ID do filme. ID do filme. Será um ID de filme. Aqui temos que me dar. Agora vamos trabalhar em nossa saga. Coloque-o em filmes. Eu tenho um arquivo dot js. Só vou copiar este. Será exatamente o mesmo. Será como apenas no Load Movie. Ele estará no Load Movie e achará que este será um filme. E temos que definir este também. Então este é o seu ouvinte, e este é um observador. Esse cara, ele está ouvindo. Então, sempre que você disparar essa ação, isso será desenfileirado. Nós pré-definimos esse cara também. Será quase o mesmo. Apenas filme B. Vamos receber uma carga útil, ter um ID de filme. Então, será o ID do filme. Ele será apenas buscar filme, não filmes. Filme. Ele será filmado. Temos que bifurcar essa tarefa, o filme de carregamento de bifurcação. Não temos que fazer nada nele. Isso é o arquivo saga dot js. Terminamos a nossa saga sempre que um grande sotaque de filme disparou do nosso componente. Esse argumentador ajudou a ouvir esse eixo e tipo. Ele terminará com a Itália. A educação e 1 terceira promessa e resolvê-la. Nosso gerador será retomado. Terminamos o nosso serviço. 17. Page detalhes do filme: Agora vamos trabalhar nesta página que é filme. Então, temos que lhe trazer o efeito. Agora também precisamos reduzir a navegação dos EUA e usar o roteador Params Tom ou React. Vamos trazer isso para os EUA. Navegue. E use param. Porque precisamos do ID que ainda temos do URL. Agora, também precisamos trazer você selecionado e usar dispersar do nosso React redux. Vamos trazer você selecionado e usar o despacho. Temos que trazer algum componente do nosso componente de interface do usuário material para trazer seu botão de tipografia. Vamos também trazer o estilo do usuário. Estilos enormes. Este switch estava em mosaico Pi. Nós especificamos previamente. Um deles também é intitulado nesta página. Deixe-me colocá-lo neste arquivo JS de diálogo. Vamos ter duas seções. Seção. copiar o ladrilho para este nome de classe de seção para isso, qual bloco vou usar para este x, e você pode copiar este. Agora vamos voltar ao nosso arquivo js de ponto de filme. primeira vez vai armazenar a referência de uma enorme disparidade na variável de despacho. Vou copiar alguns aplicando esta lista de filmes dot js. Para copiar essa linha. Estamos interessados apenas em objeto de filme, não nos movendo porque ele contém os detalhes sobre o único filme. Precisamos apenas de filme. Agora temos que criar a força dessas peças enormes, as chamadas vantagens. Geralmente estilo. Também precisamos do ID. Eles vão nos estourar params. Agora vamos definir um efeito enorme ainda. Este enorme efeito será executado por mês. Temos o ID. Temos o ID. Em seguida, podemos exibir a ação que é obter filme. E temos que passar o ID. Deixe nosso sexto ou a referência dos jovens navegar nele. Navegue pela variável. Agora podemos verificar este se estamos recebendo os dados detalhados do filme único no ID ou não. Então, vamos entrar no navegador e lutar. Vamos para esta página, atualize esta. Vamos clicar em qualquer filme. Vamos ver a franquia deles. Vamos abrir este filme onde você pode ver isso. Você pode ver que temos nosso objeto de filme no qual temos um detalhe sobre este filme. Isso é incrível. É um paradigma e temos alguns detalhados como diretor-título em nosso enredo. Vamos usar algumas informações desse objeto e vamos exibir nesta página agora é o que temos que fazer. Vou remover isso pode fazer. E vou ter a seção o nome da classe. Vou usar suas aulas de material. E, na verdade, vou usar a tag de imagem. Vou usar aqui como pôster de filme e em alternativa e vamos fornecer o título do filme, o título do filme. Vou ter uma div. Vou usar tipografia. E vamos alinhar a variante à esquerda. Vamos manter S3, S2. Aqui. Vou mostrar o título do filme, título do ponto. Vou copiar este um par de vezes. Então vou contar o título do filme, traçar esse vetor. Certo. Vamos copiar este um par de vezes. A hora em que vou usar a Variante cinco. Mas aqui ainda podemos ter como filme dot p aqui. Então eu vou usar aqui corpo um. Será um enredo. Agora eu também vou resolver o nome do diretor, e aqui será às seis. Vamos virar seis. Diretor de prata, diretor de pontos de cinema. E podemos dar-lhe um diretor. E também teremos um botão Voltar. Vamos ver, botão enorme com variante de volta que vou usar aqui. E então vou ter o método onClick. Nunca chegará à página inicial. Navegue. Podemos usar aqui. Vamos salvar esse arquivo. Vamos para o navegador. Agora podemos ver este único filme com alguns detalhados. Então, temos nome do filme, enredo e direcionado. Você também pode adicionar mais detalhes conforme sua conveniência. Estou usando apenas esses detalhes nesta página. E se clicarmos em voltar, você nunca chegará à página inicial. Você também pode ver este filme também. Isso está funcionando. Vamos abrir esse controle. Portanto, não temos nenhum problema em nosso console. 18. Finalização: Se você estiver assistindo a este vídeo, que, quando tiver concluído com êxito este curso, agora espero que você tenha puxado para se integrar com o kit de ferramentas redact no aplicativo React. E espero que você tenha gostado do curso com alguns novos conceitos de redex. E se você ainda tiver alguma dúvida ou consulta em relação a este curso, você sempre pode colocar sua consulta ou dúvida na seção de comentários. Vou tentar o meu nível melhor para resolver sua consulta. Então é isso. Do meu lado, verei você em redes.