Guia completo para Redux-Toolkit com React JS

1. Introdução: Olá e seja bem-vindo a este curso no qual vamos aprender o conceito Moderno Redux. Esse é o kit de ferramentas Rudolf com religiosos, Meu nome é Rachel e eu serei seu instrutor neste curso. Portanto, se você for um desenvolvedor do React, então você pode estar usando a derivada como um gerenciamento de estado para que você reaja o aplicativo para manter o estado do aplicativo. E você também pode estar usando redact tongue ou redact saga middleware para lidar com efeitos colaterais em seu aplicativo. Recentemente, a equipe de redact criou a nova abordagem para escrever lógica de forma mais eficiente ao lançar o kit de ferramentas de leitura. E com essa ferramenta, as coisas ficam muito mais fáceis. Pensei em criar um novo curso sobre esse tópico. Porque esta biblioteca de kit de ferramentas YDa de área nos permite implementar o redox de maneira muito mais fácil e concisa do que costumava ser. Agora, deixe-me dar-lhe a breve visão geral de Rudolf para aqueles de vocês que não sabem o que é. Essa falha é a biblioteca de gerenciamento de estado que usamos em nosso aplicativo React, assim como você usará em seu aplicativo. Não apenas com o React, mas é muito popular. A biblioteca React, essa é a visão geral do reduto. Então, vamos entender o que vamos aprender neste curso. Primeiro, começaremos com algum conceito teórico. Como tentaremos entender o problema central do React e por que usamos Redux dentro do react. Então vamos entender como o que é um kit de ferramentas e o que APA incluindo disse este pedágio redact, o que é criar um think tank. Então, todos esses conceitos vamos entender com a ajuda da puberdade. Depois disso, começaremos a construir nosso aplicativo com a ajuda da ferramenta de redact criar e criar um think tank no qual vamos realizar toda a operação de multidão com a ajuda do espaço reservado JSON fake EPA. Com este aplicativo, você aprenderá como fazer essa postagem PUT e excluí-la com create, acho que middleware em seu aplicativo react redact Toolkit. Este aplicativo vamos construir neste curso com a ajuda de redução de pedágio no React. Agora, vamos falar sobre o requisito básico 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ê terá total compreensão do conceito de kit de ferramentas de redução. Além disso, você poderá implementar o kit de ferramentas redact em qualquer projeto React existente. E também você poderá converter esses projetos React redux em que o código Redux antigo enquanto a Grã-Bretanha em ferramenta de leitura poderia. 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. Então é isso. Do meu lado, verei você na seção do curso. 2. O que é Redux e por que usamos isso?: 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 é o Redux Toolkit ?: Agora vamos entender qual é o leitor de criação total para liquidar também usa para gerenciar aplicativos se 13 for 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. Portanto, root x já era 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 configurar se otimizar esse nível básico e, portanto, 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. Então, no geral, o leitor ficará bem se período de desenvolvimento incluindo livrar-se do pacote de kit de ferramentas Courbet redact que eles acham que estão preenchidos para criar um aplicativo de leitura. 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 contato. 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 nos aproximamos 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 notado aqui, como 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 redact poderia usar a biblioteca que permite o tumulto da mutação, logicamente, reduzindo. Isso é tudo sobre o kit de ferramentas do leitor com o cenário básico. 4. Entenda a API de Redux-Toolkit: Agora vamos falar sobre esse leme para lucrativo. Inclui manter essa API no pacote do kit de ferramentas de radar. Vamos começar com o primeiro configurado para configurar nossa ferramenta criativa para fornecer uma opção de configuração simplificada e um bom padrão. Ele pode combinar automaticamente seu redutor de slides e você pode fornecer qualquer middleware, o que quiser com redact. Legal, bom, passeio, obrigado incluído por padrão. E também ativou o leitor do usuário delta f times. E não há necessidade de escrever código para configurar a redução na ferramenta de desenvolvimento com o pacote reduct Toolkit. Então você só precisa instalar as ferramentas Data Dev no seu Chrome Roger, a tabela de redução funciona automaticamente com a tabela de redução. Bom pacote. Portanto, isso é tudo sobre o armazenamento configurado. Agora vamos falar sobre o disco criar o redutor. Basicamente, simplifica a redação da lógica da função redutora porque usa a biblioteca IMRT internamente para atualizar seu estado imitável escrevendo novo código derivado em seu redutor e suporte mapeamento direto é uma função anti-redutor x específica que atualizará o estado quando a ação for dispersa. Forneça uma tabela de pesquisa do tipo de ação para criar a função redutora em vez de escrever a instrução switch case. Agora, vamos seguir em frente e falar sobre a ação de criação. Crie tensão com a função de criador de ação escrita negligente função de criador de ação escrita para a etiqueta dada com bebida. E também pode ser usado em um local de constante tipo. Agora, vamos falar sobre isso. Criar, selecionar, Criar função Azure selecionada que aceita um estado inicial e um objeto de um nome de função redutor. Em seguida, ele gera automaticamente um X e criou, age e digite que correspondem ao redutor. E, no geral, isso cria slides. Apa é a abordagem padrão para escrever nossa lógica Redux. Agora, vamos seguir em frente e falar sobre a coisa criativa. Vire para criar, eu acho. Obrigado. Usado para executar tarefas assíncronas com o pacote reduct Toolkit. Esta função normalmente aceitava três parâmetros. O primeiro parâmetro será x e type, que estará em um anel. O segundo parâmetro será a função que retornará um polegar gerado por promessa que dispersará o cinto do tipo ação pendente, cumprida ou rejeitada nessa promessa. E o terceiro parâmetro será o objeto Option. Agora, vamos falar sobre esse adaptador Criar entidade, gerar um conjunto de redutores reutilizáveis e selecionar para gerenciar os dados normalizados na restauração. Isso é tudo sobre o kit de ferramentas de redução, um BA, e entenderemos mais sobre essa API, como criar slide, criar um think tank, configurar um tour em detalhes. 1 quinto, comece a construir nosso aplicativo na próxima seção. 5. Entenda createAsyncThunk: Agora vamos entender esse pensamento criativo. Intuitivo. Sempre que temos que executar uma tarefa, usamos middleware. Middleware pode ser qualquer coisa. Pode ser uma saga redutora ou redact para executar tarefas assíncronas e deduzir middleware, seja um pacote popular com o leitor com o kit de ferramentas redact, reductant é incluído por padrão, permitindo que os criadores tenham a intenção de executar lógica assíncrona antes de enviar o resultado do processo para o redutor. Aqui temos nosso código de exemplo e eu lhe darei a breve visão geral desse código de exemplo. Agora, primeiro vou falar sobre isso criar slides. Então, ligeiramente a função que contém o código e a função redutora usada para modificar um armazenamento de dados. Então, no geral, em terceiro lugar, ele cria uma API ativa. Escrevemos nossa lógica do leitor. Então aqui você pode ver que temos uma propriedade de nome, então isso não passa de seus dígitos rapidamente. Temos que fornecer um slide agora dentro disso cria escravos. Então temos que fornecer o estado inicial. Aqui, definimos nosso estado inicial para nossa aplicação. Então, aqui você pode ver que inicialmente temos entidades semelhantes a estados e carregando false. Agora temos um objeto redutor aqui. Dentro desse objeto. Lidamos com solicitações síncronas que podem levar à loja. Agora, temos atividades extra reduzidas. Nós lidamos com assíncrono, que é o nosso Min. Ok, então acho que Ronnie criou com a criação, acho que dez parâmetros do passo três. O primeiro parâmetro será o X e o tipo de bebida, e o segundo parâmetro será uma função que retorna uma promessa e gera uma língua que despacha gastando pilar completo rejeitado tipo de ação baseado nessa promessa. E o terceiro será o objeto Option. Individualmente com a Itália, fornecemos configurações diferentes e diferentes para criar uma API de think-tank. Mas o terceiro parâmetro, agente oxigênio aqui. Sempre que essa ação, bom despacho de um componente dentro do nosso aplicativo. Portanto, criar qualquer coisa pode gerar um ciclo de vida de três promessas usando o mesmo tipo de string que um prefixo. Então aqui você pode ver que ele não gera um pendente atendido, abatido. E todo esse ciclo de vida que temos disponível dentro do nosso redutor extra. Então, todo o ciclo de vida de três promessas gerado pela criação de dez será avaliado de fato nosso redutor. Então, geralmente, o que acontece na chamada inicial criar um think tank enviará esse tipo de ação, ok, e isso está pendente. E então teremos nossa carga útil criada, que será executada para retornar um resultado ou erro. Em caso de erro, crie, acho que enviaremos uma ação com o editado. Se nosso conjunto de dados for bem-sucedido, criação de dez dispersará esse tipo de ação que for atendido. E todos os três parâmetros de ciclo de vida, estaremos avaliando dentro desse extra reduzir nosso objeto onde fazemos as alterações desejadas na loja. Isso é tudo sobre a coisa criativa. 6. Configuração de projeto: Ok, neste projeto, vamos usar a API falsa do espaço reservado JSON para criar nosso aplicativo de crédito com a ajuda do kit de ferramentas de redução e criar qualquer coisa. Então, vamos usar essa API, como obter a postagem com base no ID. Vamos usar essa API para colocar uma única postagem no blog. E também usaremos essa API falsa. Atualize uma única porta e, com base no ID e em preto, usaremos DCPA para excluir uma única porta com base no ID. Então, no geral, vamos usar para um PI com kit de ferramentas de redução neste projeto. Vamos configurar nosso projeto primeiro. Estou neste diretório e vou abrir um prompt de comando. Vou criar um projeto React. Seja ele reaja. Apa. Você pode dar qualquer nome, o que quiser. Vamos criar esse projeto. Portanto, levará cerca de dois a três minutos para instalar toda a dependência do NO3. E voltarei com todos os processos. Bem concluído, guie a configuração do nosso projeto agora concluída. Mas primeiro vamos entrar neste diretório que está correto. Kit de ferramentas Apa. Então, antes de começarmos o npm, eu queria instalar alguns pacotes para este projeto. Então, vou instalar pacotes assim. Então, vamos usar e projetar para construir nosso componente. Então precisamos instalar um kit de ferramentas redutoras. Último kit de ferramentas. E também precisamos do roteador React. Apenas três pacotes. É necessário para este projeto? Então, vamos instalar todos esses pacotes. Enquanto isso, abrirei este projeto no código do Visual Studio. Então pessoal, parece que todos estão instalados pacotes e eu já abri esse projeto no meu código do Visual Studio. Então, vamos para o código VS. Como você pode ver, esse projeto está aberto no meu VS Code. E aqui temos o slide empacotado. Aqui temos um pacote como e redesenhar a ferramenta redact, kirtan, React router down, Guys, para usar e componente sob demanda em nosso projeto React. Primeiro, precisamos trazer o arquivo CSS formiga e design para usar o componente de design do Android neste reator. Então, vou trazer os antidepressivos, arquivo CSS. Um arquivo CSS que precisamos trazer de nossos anticorpos e só poderemos usar o componente antidepressivo. 7. Estruturando nosso aplicativo: Agora vamos estruturar nosso projeto. Eu só vou criar algumas pastas aqui, como se tivéssemos desdobrado como um usuário postar uma pasta heterodox. Primeiro, digamos que digeriu alguma rota. Eu vou ter e esse é o arquivo dot js. Crie o arquivo js post dot. Vamos ter mais um arquivo carregando o arquivo guard dot js. Para mostrar o carregador esquelético. Criamos esse arquivo. Agora, vamos gerar um trecho. Primeiro. isso criar post este arquivo index.js. Vamos nos encaixar na pose. Podemos atualizar o poeta e podemos excluir a postagem. Todas essas coisas que vamos fazer neste arquivo index.js. Gere em um pouco. Vamos dar aqui apenas o arquivo JS habitar. Vamos remover este logotipo que não vamos usar. Vamos remover toda essa parte. Vamos trazer rotas e rotas de switch do roteador React. Do roteador React inativo. Vamos trazer rotas. Precisamos do roteador do navegador de rotas. Basicamente, vamos registrar isso para rotear. Isso é criar um arquivo js de ponto de índice, ok? Este não será o arquivo index.js. Vamos dar como casa só ingerir aqui, rotas. Aqui estamos usando o React Rotterdam vergence seis. Você pode ver isso. É por isso que estou usando rotas aqui não tanto. Espero que você esteja ciente dessas mudanças em relação à versão mais recente do roteador React aqui também não é necessária. Assim, podemos manter o estado do caminho do componente. Vamos usar o elemento pela primeira vez, vamos rejeitá-lo na hora da rota inicial. A próxima rota. Vamos ter como criar, criar. Ambos. Seja qual for o poema que você vai criar não salvará no servidor adjacente porque o ethyl é um servidor fixo. Então, aqui estamos apenas imitando todos os pedidos, como obter, colocar, postar e excluir. Você não conseguiu salvar nenhum dado. Em dB. Rejeitamos o prato para rotear e também nos deixamos fazer como roteador de navegador também. Vamos usar todo esse roteador de navegador de aplicativos. Vamos remover este. Vamos primeiro começar no local. Vamos começar. Agora vamos aguardar o carregamento do aplicativo no navegador. Então pessoal, a replicação é carregada no navegador. Vamos visitar essa rota. Bush também, esteja funcionando ou não. Isso também é registrado. Registramos com sucesso nossas duas rotas. 8. Como trabalhar em formulário: Agora vou começar com a busca do Porsche com base no ID cinco vezes, vou criar um campo de entrada e o botão, dois botões. Vou começar a trabalhar a partir desse arquivo. Mas temos que fazer agora para trazer algum componente do nosso design. Vamos trazer esses componentes primeiro. O componente que vamos trazer botão, um cartão, espaço de entrada. Reaja quando a TI trazer dados dos usuários e usar o efeito. Como somos obrigados a concluir o ID da porta. Portanto, precisamos definir um estado com ID. Id. Id. Deixe-nos dar-lhe um como você acabou de voltar. Temos que definir uma classe, contêiner de largura. E depois disso, vamos ter um título. Então, basicamente, estamos realizando o estilo de cabeçalho do script phage post , estilo embutido. Agora, após esse cabeçalho, teremos um campo de entrada com espaço reservado, como ID do usuário. Com o servidor JSON. Basicamente, vamos passar qualquer ID aleatório e obteremos uma postagem como título e tipo de corpo será o número na mudança que vamos dar. Podemos apenas fazer como set. Ele terá no evento o valor do ponto alvo do ponto. Agora temos que passar o valor também. Então, temos ID. Podemos dar alguns ladrilhos para este campo de entrada, largura, desculpe, 300 pixels. Agora podemos respirar algumas respirações aqui. Vamos manter as respirações. Agora vamos ter um espaço, um componente de espaço que vamos usar. Porque, porque vamos combinar dois botões, vamos manter os lados. Será pequeno. Vamos dar um estilo de forro. Só vou dar margem geral. Adicione isso. Vamos ter nosso botão, nosso botão Design. Este botão será primário. Podemos dar o botão Lamelech, que você então, uma vez que o usuário fornecer o ID no campo de entrada, ele poderá preencher essa postagem. Agora, depois disso, o que temos que fazer, teremos mais um botão. Este botão basicamente responsável pela criação de um usuário. Este botão basicamente navega até a criação para o que criamos aqui. Temos dois botões e teremos um método onclick. Podemos dar-lhe um tentilhão, usar suas postagens. Vamos definir essa enorme porta AT. Caso contrário, receberemos um erro. Definimos essa função. Esta função vamos despachar, certo? E ação. Definimos essa função na qual nós, na qual vamos despachar e ações. Então, vamos primeiro entrar no navegador. Temos esse campo de entrada e também temos que habilitar a funcionalidade de navegação para este botão. Então, o que podemos fazer do reator para baixo, podemos trazer o uso e navegar. Então, precisamos levar os EUA para navegar. Agora precisamos armazenar a referência desativada. Você usa navegar e navegar variável. Navegue. O que podemos fazer aqui. Ao clicar. Podemos simplesmente navegar para criar postagens. Vamos ver detalhes que já registramos. Sim, esta é a mesma rota que mencionamos aqui. Vamos para o navegador. Atualizar. Clique em Criar postagens futuras. Então, agora somos capazes de navegar em direção à criação de postagens. Vamos digitar aqui alguma coisa. Ele aceitará apenas o número. Somos capazes de digitar esse também. Agora, a próxima coisa que vamos configurar o kit de ferramentas redact em nosso projeto. 9. Configuração e escrita: Aqui já criamos a pasta. Aqui temos que criar mais uma pasta como recursos. Como estamos lidando com o poeta agora, vamos dar-lhe vida como ambos os slides, não na raiz da pasta reduct. Vamos ter nosso arquivo de restauração dot js. Certifique-se de que ele não deve estar no roteador redact. Então eu acho que ele foi criado em vez disso o futuro. Então, vamos excluir este e certificar-se de que o arquivo deve estar dentro desse reduto, pois é armazenar o arquivo dot js. Armazene o arquivo dot js. Agora temos em nossa pasta, primeiro vamos escrever uma reação redox com o kit de ferramentas redutor para preencher a postagem com base no ID usando criar um think tank. Em posts, fatia com a Itália, deslize com nada além de uma coleção de lógica reduzida. Em slides com a Itália, atualizamos o estado do nosso componente com a ajuda do produtor. Então, precisamos trazer do kit de ferramentas, criar fatia e criar assíncrono, criar fatia, criar qualquer coisa. Agora, depois disso, o que temos a ver com a criação de um think tank, faremos uma solicitação de API. Então, como você sabe, já leu um Tango está incluído por padrão no kit de ferramentas redact. Alinhe crie um think-tank para executar um atraso com criar um think tank, vamos fazer uma solicitação de API. Então, no geral, criar um think tank é usado para a lógica assíncrona antes de enviar o resultado do processo para o redutor. Então, vamos criar nossa primeira ação com a criação de custos de exportação. Publicar. Depois disso, crie um think tank. No primeiro parâmetro passaremos nosso tipo de ação. Você pode passar desta forma, postar e OBTER postagem. O segundo parâmetro é a função de retorno de chamada, que é responsável por tornar a API necessária. E o terceiro é opcional. Ele será objeto Container Option. Então, aqui vamos escrever nossa lógica assíncrona. Vamos receber um ID de nossos componentes para que possamos distrair a ideia assim. Depois disso, podemos fazer uma devolução e vamos usar o peixe para fazer uma solicitação de API. Vamos usar essa API primeiro. Vamos obter a porta com base no ID. Podemos simplesmente copiar este. Podemos encaixá-lo aqui. Vamos usar o tick de volta porque vamos obter a data no ID. Aqui temos identificação de duas partes. Então, vamos dar uma resposta. Esse ponto de resposta JSON. Agora, crie um think tank, basicamente o que ele faz. Então, sempre que enviamos essa ação que é concreta derrama de nosso componente. Isso cria um ciclo de vida de promessa regenerativa, think tank. O ciclo de vida da promessa, como pendente, cumprido e rejeitado. E estaremos avaliando esses três ciclos de vida promessas após o redutor, onde podemos fazer as alterações desejadas no distal. Primeiro, vamos criar uma fatia. Esporte. Custo. Slice é chamado para criar slides. Vamos definir o nome da fatia. Então, vamos dar sua postagem. Certo. Teremos o estado inicial da nossa aplicação. Então, vou definir o post com área de empatia. Em seguida, vamos ter o carregamento false. Em seguida, o erro será nulo. Certo? Por enquanto, esse estado inicial é necessário para nossa aplicação. Agora, vamos ter nosso redutor extra, que vamos lidar com o ciclo de vida das três promessas gerado pela nossa criação de um redutor de think tank. E dentro disso, teremos um bom ponto de postagem pendente pendente e depois cumprido e isso agiu. Então vamos ter ação estatal. Aqui. Vamos ter o carregamento de pontos de estado será verdade em caso de flexão, o carregamento será verdadeiro. Agora, da mesma forma, vamos ter cumprido o ciclo de vida. Então, GET post dot cumprido. Ação estadual. Aqui, podemos fazer como definir o upload da lei estadual como false. Agora temos os dados e temos que fazer o estado falso de carregamento. Certo, agora state.org. Então agora temos que atualizar o estado inicial de ambos tangíveis que possamos escrever como payload de ponto de ação. Depois disso, teremos que é atuado ser postado. Eleito. Ação estadual. Neste caso também, carregamento será o pulso. Depois disso, o que temos um erro de ponto de estado total. Aqui, podemos dar uma carga útil de ponto de ação semelhante. Aqui. Temos que usar ponto e vírgula? vírgula Não se esqueça de usar ponto e vírgula. Vamos formatar este. Agora, temos que exportar este, exportar padrão, pós slides redutor de pontos. Então, escrevemos nossa primeira ação. Agora é hora de escrever a lógica em nosso arquivo js de ponto de loja com o kit de ferramentas do leitor. Configuração de vitorioso. Muito simples. Então, precisamos trazer, configurar uma loja a partir do nosso kit de ferramentas redact. De redact, totalmente bom trazer configure if torr. Agora, temos que trazer nossos redutores, redutor. Nossa pasta futura. São quatro slides. Exportar, padrão, configurou uma loja. Aqui vamos ter o aplicativo redutor. Vamos fornecer a chave para este redutor de retrato. Com a ajuda desta chave de aplicativo, aceitaremos o estado que definimos em nossa fatia para acessar esse erro em nosso componente. É por isso que defini essa chave do aplicativo. Terminamos a configuração da loja. Agora vamos para o arquivo index.js e cinco minutos para trazer um pacote como índice reagido porque, porque vamos precisar de fornecido para que eu possa arrastar esta porta para o nosso React aplicação, alto React redux. E esqueci de instalar este pacote inicialmente. Vamos instalar pacotes é muito longo. Vamos fechar este terminal. Primeiro, fixe-o para fixá-lo para trazer o fornecedor de nossos produtos de reator que nosso componente pode após o estado que definimos em nossa restauração. E precisamos trazer a turnê dele da nossa pasta redox. Certo, agora vamos envolver nosso componente de aplicativo com o provedor. Vamos cortar este, colá-lo aqui. Podemos usar o Datastore e podemos armazenar. Você também pode verificar este caso tenha integrado com êxito o kit de ferramentas redact com o aplicativo React ou não. Você pode ir ao navegador e simplesmente abrir essa ferramenta. Vou acrescentar ao meu botão. E aqui você pode ver o estado. Isso significa que configuramos com sucesso nosso kit de ferramentas em um projeto React. 10. Enviar. Ação de uma: Agora temos que basicamente despachar essa ação que criamos em nossos slides de postagem do nosso componente. Ok, vamos para o arquivo index.js. E a partir disso, precisamos trazer um enorme despacho e você escolheu que você tem que respeitar é usado para despachar uma ação. Você selecionou é usado para selecionar o estado da nossa loja. Primeiro, vamos armazenar a referência de usar a variável de despacho, despacho. Então só poderemos despachar uma ação. Aqui. Primeiro, vamos verificar se você não tem nenhum ID. Compramos algum método de erro simples como alerta de ponto de janela. Podemos apenas me dar como, por favor, forneça uma parte de identificação que vamos dispersar e agir que criamos em nosso post. códigos Post e VS importam automaticamente essa ação. E podemos passar aqui, eu fiz assim porque você pode ver o id que estamos recebendo aqui na forma de objeto. Para que possamos passar o ID dessa maneira. Depois disso, podemos fazer mais uma coisa como definir ID para entreter. Primeiro, vamos verificar se estamos sendo cutucados ou não com base em ID aleatório. Deixe-me atualizar este 1 primeiro. E vamos dar uma identificação. Vamos clicar em Fetch forth. Agora, vamos ver a profundidade para diminuir. Você pode ver que essa promessa foi cumprida aqui. Certo? Aqui temos 1 quarto na matriz de objetos. Agora você pode ver que temos esse post, certo? Agora, precisamos basicamente exibir essa porta em nossa interface do usuário. Então, vamos fazer isso. Então agora temos que extrair basicamente o estado da nossa loja usando os EUA selecionados. Você pode usar seu seletor de uso. Podemos ter o seu mais leve. Podemos espalhar o aplicativo de pontos de estado porque nosso redutor é restaurado com a chave do aplicativo. Portanto, com a ajuda da chave do aplicativo, podemos acessar o estado que temos em nosso vetor. Definimos um estado como carregamento. Certo? Publique estes estados que definimos em nosso redutor em slides. Primeiro, vamos registrar o postdoc no console, quer estejamos recebendo a postagem ou não, a postagem do log do console. Vamos para o navegador. Vamos dar qualquer ID de usuário aleatório. Agora vamos abrir o console. Você pode ver que temos uma área. Ele estará sempre contendo uma única matriz de objeto porque estamos buscando a postagem com base no ID. Agora vamos exibir esse detalhe da postagem em um componente de cartão. Então, primeiro, vou colocar algum código aqui na curva de carregamento. Ok, então estamos basicamente mostrando o carregador de caracteres. O carregamento é verdadeiro. Uma vez que o carregamento caia, mostraremos esses dados em um componente de cartão. E vou pagar o código aqui para o carregador esquelético. E não se preocupe, vou anexar esse código nesta palestra. Você pode descobrir facilmente esse código para essa curva flutuante. Agora, o que temos que fazer, temos o estado de carregamento. Depois que esta for a página, vou dar algumas breves. Então podemos ter nosso estado de carregamento. E se o carregamento for verdadeiro, nesse caso, vou mostrar o cartão de carregamento do carregador de caracteres. Cvs colocam importar automaticamente esse componente. Podemos fornecer a contagem para um. E nesta parte vamos mostrar detalhes da porta em um componente de placa. Aqui, vou usar fragmento. E vamos usar um nome de classe ou seja, e nome da classe de design, cartão, invólucro de hífen de borda. E depois disso, o que temos que fazer, vou usar o cartão aqui. Carro, digite um título. Podemos classificar um título assim. Ele estará sempre contendo uma única matriz de objetos. Assim, podemos exibir assim para o título do ponto. Dessa forma, podemos mostrar. Podemos ensinar melhor ID de usuário como ID de usuário real. ID do usuário e ID do ponto da postagem. Certo, vamos primeiro verificar se somos capazes de ver alguma coisa ou não. Vamos para o navegador. E agora você pode ver que somos capazes de ver esse id. Reenquadre este. Estamos recebendo algum erro. Não é possível ler a propriedade do título. Certo, não há problema. Então, para corrigir esse problema, o que podemos fazer, podemos apenas verificar aqui como o comprimento do ponto. Comprimento do ponto. Isso é maior que 0. Então, somente vamos exibir este componente do cartão. Vamos cortar este. Aqui. Vamos para o navegador, atualize este. Agora, vamos dar um ID de usuário aleatório. Agora você pode ver que temos nosso post aqui. Este é o título e esse é o ID. Agora temos que mostrar o corpo também. Assim, você pode ver que ele tem um título que já estamos exibindo aqui e temos que exibir o corpo também e este componente de cartão. Então, o que podemos fazer, para que você possa ter uma etiqueta de extensão aqui. Tag Span aqui. Podemos nos orgulhar de corpo de 0 pontos porque estamos enfrentando o único post com base na ideia. Portanto, sempre terá uma única área fora do objeto. Espero que você esteja recebendo esse ponto. Agora vamos para o navegador. Agora você pode ver que somos capazes de exibir o corpo também. Para esta postagem. Somos capazes de exibir este. Somos capazes de exibir o título e o corpo. E vamos bater novamente com base em algum ID qualquer. coletamos o carregador. 11. Como adicionar botões: Agora temos que adicionar dois botões que você faz. Toque em, Excluir. Vamos adicionar esses botões também. Depois deste cartão, vamos para esse botão. Então, vou usar o seu espaço. Podemos fornecer alguns adereços como o meio. Vou ter algum estilo em linha. Margin top, vou dar-lhe uma margem, top 35, margem esquerda. São cinco. E vou dar flutuador, flutuar , flutuar direito. Agora. Entre o espaço, teremos nosso botão. Botão. Mais uma vez, vamos usar e projetar o componente. Podemos ter o seu alinhamento de ladrilhos. Temos que especificar o ponteiro. Vamos ter tipo, tipo. Vou te dar uma primária. Nós vamos ter o Perigo. teremos o método onClick até agora Judge, defina o botão de saída de valor para que ele tenha uma exclusão. A mesma coisa que vou copiar para um encontro também. Será apenas uma data. Podemos remover essa parte de perigo. Vamos ver se somos capazes de ver nossos botões ou não. Você pode ver que temos nossos botões. Vamos publicar novamente a página. Temos nosso botão. Está funcionando. 12. DELETE com createAsyncThunk: Na próxima operação, vamos executar a operação de exclusão. Assim, podemos excluir essa porta que pagamos com base no ID. Então, primeiro temos que escrever nossa ação em nosso arquivo js post slash dot. Vamos fazer isso 1 primeiro. Em portas como o arquivo dot js, terei mais uma ação. Vamos excluir postagens. Só vou copiar este. Só vou colá-lo aqui. E eu só vou mudar este. Então, serão excluídas postagens e isso será x e intitulado com a postagem de exclusão. Mais uma vez, vamos excluir a postagem com base no ID. Aqui vamos derrotar o id do nosso componente e o URL será aditivo. Além disso, temos que fornecer o método aqui porque estamos usando o fetch aqui. Temos que fornecer um método aqui. Como excluir. Até agora, obtendo os dados do servidor JSON ou de qualquer API, você não precisa fornecer o método. Mas, no caso de outras solicitações, como excluir ou atualizar, você precisa fornecer o método aqui. Então, aqui estamos fornecendo o método, exclua. Isso será coisa aditiva. Agora estamos fazendo com solicitações de API. Então isso cria um think tank, gera três ciclos de vida que vamos dissolver em nosso redutor. Mais uma vez, o que temos que fazer? Então, vou copiar esse ciclo de vida de três que está gastando a construção completa e direcionada. E vou colá-lo aqui e me certificar alterar este do guia para excluir postagens. E podemos remover este. Será carga útil de ponto de ação de jato. Então, vamos usar essa ação que criamos aqui em nossos componentes. Então, vamos para o arquivo index.js. Em onclick. dispersar essa ação para que ela possa excluir o registro. Aqui. Vou exibir essa ação. Então, envie e exclua postagens. Então, o código VS importa automaticamente essa ação para mim. E podemos dispersar isso assim. Então, vamos exibir o mesmo ID que estamos usando para preencher o ID. Certo? Antes. Podemos ter ID aqui, como este índice de ID de ponto da matriz, vamos ver se conseguimos excluir essa porta ou não. Para este, vamos criar uma postagem com base no ID cinco. Temos esse post. Agora vamos clicar em Excluir. Agora você pode ver que podemos excluir a porta com sucesso também com base no mesmo átomo que usamos para buscar a operação de exclusão também é feita com nosso kit de ferramentas de redução neste aplicativo. 13. : Agora, na próxima operação, vamos executar o grupo de usuários de criação. Depois de clicar nisso, criar um usuário para você, navegaremos em direção ao Create Board. E qualquer que seja a porta que você vai criar não será salva em dB porque estamos usando a API falsa de espaço reservado JSON. Portanto, ele não mantém nenhum tipo de banco de dados por trás da cena. Então você não poderá salvar essa carne de porco em dB. Mas vamos imitar essa solicitação de porta com a ajuda dessa API. Certo? Vamos criar essa ação em nosso primeiro arquivo js de ponto de slide. O que vou fazer, vou copiar este. Vou colá-lo aqui. Crie uma postagem de nota melhor. Agora temos que fazer algumas mudanças aqui. Desta vez, estamos criando o poro para que ele não aceite nenhum tipo de ID. Podemos remover essa peça. Depois disso. O que temos que fazer? Método? Vamos fornecer ambos os métodos ainda porque estamos criando uma nova porta. E depois disso, temos que fornecer o cabeçalho também. Caso contrário, não funcionará. Então eu pisei os cabeçalhos, temos que fornecer um roubo. Podemos dar ao seu aplicativo JSON. Em seguida, estamos predefinidos o tipo de conteúdo, aplicativo de tipo de conteúdo. Json. Vamos ter corpo, JSON, estringificar. Vamos criar o poro com título e título do corpo que podemos dar aqui. Vamos receber valores. Vamos receber valores de nossos componentes. Assim, podemos cavar esse valor tratado assim. Podemos ter como Valores, título de ponto. Podemos ter como valores do corpo corpo ponto corpo. O requisito será aditivos. Criamos esta porta e não se preocupe, vou explicar essa parte. A parte dos valores. Aqui, o valor não é nada além de conter um objeto com informações de título e corpo. E isso está recebendo valores de nosso componente e estamos fornecendo título e corpo. Mas teremos que preencher nossa criação para que seja título e corpo. Digamos que todas as três promessas que a vida é gerada pelo nosso criador, acho que língua. Então, novamente, vou copiar colar o ciclo de vida do S3. Podemos pintá-lo aqui. E não se esqueça de mudar este do boletim de notas para criar os dois. Vamos copiar este, deixe Pe dois níveis. E o resto da coisa será aditivo. Terminamos com a parte real. 14. Como criar o formulário de postagem: Então, vamos trabalhar nisso. Crie ambos a partir do nosso anti-design. Precisamos trazer algum componente. O componente que vamos precisar aqui, entrada, botão, cartão, espaço. Também precisaremos que você seja selecionado e você será poupado do nosso React. Seletor tão grande. Quando a TI trazer e usar o despacho do react, também precisamos de um estado enorme. Vou definir um estado com valores. O mesmo valor que passaremos pela nossa ação para que ela possa receber aqui em nosso arquivo js de slide dot. Vamos trabalhar nesta porta Criar. Estado enorme. E vamos definir nosso estado inicial com um objeto. Vamos ter título e corpo. E depois disso vamos ter um estado hipotecário. Então isso está emparelhado com feio. Estamos usando para descrever dois discretos criados. Uma vez que o usuário cria um pobre, então, na mesma página, vamos exibir que criou um estado enorme e, inicialmente , será o falso. Depois disso, vamos armazenar a referência de nós. É variável de despacho paginado. Normalmente, despacho. Primeiro, vamos trabalhar no componente fora do formulário. Então, vamos criar um formulário. Vamos remover este. Vamos ter um formulário. Vamos remover a parte de ação. E aqui vamos ter no método Submit, que vamos definir handle submit. O formulário que vamos ter. Depois disso. Vamos definir nosso campo de entrada. Dei a você um espaço reservado. Título. Tipo, o texto só muda. Nós vamos te dar. Eu posso lhe dar valores definidos como. Eu posso espalhar os valores e temos que apenas, e podemos definir o título para o valor do ponto de destino. Agora, vamos ter valores. Os valores, valores. Então, a partir de valores, podemos tirar textura como título e corpo. No valor, podemos passar o título. Vamos dar algum estilo em linha também a este campo de entrada. Então, vou dar 400 pixels. Depois disso, vou ter o ponto do lóbulo superior. Em seguida, vamos ter área de texto. Então insira a área de texto do ponto. Depois disso. E em frente, vou copiar essa coisa. Vou colá-lo aqui. Aqui será corpo. Ele será anexado e isso vai, e se tornará corpo. O valor corporal será a largura do corpo será aditivo. Ou temos que dar porque é uma área de texto, então ela será grande. Agora vou ter um par de pausa novamente. Neste espaço. Vou criar um botão aqui. Estilo. Vamos dar um estilo. Margem. Dez. Vamos adicionar o botão. Vou usar o componente do botão NTDs N, onclick. Vamos ter o método onClick. O valor do botão será o objetivo de volta. Definiremos o método onclick. Vamos voltar. Basicamente, você voltará apenas para a página inicial. Vai ter no botão Enviar. Enviar tipos. Podemos dar uma cúpula principal do tipo HTML. Vamos para o navegador. Temos algum erro, então precisamos adiá-lo, lidar com o envio. Então, por enquanto, vamos apenas criar uma função vazia. Ele receberá um evento. Vamos para o navegador. Então, temos essa entrada de duas entradas. Uma é uma falha de entrada normal e outra área de texto que temos botão voltar e enviar e se você clicar em voltar, nunca chegará à página inicial. Do roteador React dom. Traga a navegação dos EUA. Vamos usar o navegue aqui. Use navegar. E o que temos que fazer. Estamos registrando a referência de nós navegar e navegar variável e um onclick. Podemos navegar. Podemos dar a você navegar. Queríamos navegar em direção à página inicial. Vamos primeiro tentar este. Este aqui, vamos clicar em GoBear. Mas agora somos capazes de navegar em direção à página inicial. 15. Enviar. Ação: Então agora temos que trabalhar basicamente nas postagens de criação. Então, vamos exibir uma ação que criamos em nossas postagens como arquivo dot js, handle submit, vamos desesperar essa ação. Agora, o que temos que fazer lidar com algum material recebendo um evento até agora, temos que fazer um padrão de prevenção de ponto para evitar o comportamento padrão do navegador. E depois disso, podemos mostrar isso uma ação. A ação que temos como criar código pós-soviético, importar automaticamente que eu enviei para mim. E podemos simplesmente passar os valores inteiros. Este valor, particularmente estamos estruturando diferencial aqui. Você pode ver isso em nossa ação criar postagens, quando criar ambos os impostos e estamos transferindo o valor que estamos enviando através de nossa ação. Depois disso, eu queria inserir o campo de entrada. O que podemos fazer aqui, título. Então o título estará em Putty, será o ímpeto. Nós também temos que fazer set. Então, ambos são verdadeiros. No momento em que você enviar este formulário, eu queria mostrar a porta na mesma página abaixo deste componente de formulário que eu queria criar post. Ok, então é por isso que eu tenho um estado separado como definido. E isso se tornará verdade. Podemos verificar este, se isso cria cartazes funcionando ou não. Assim, podemos verificar com a ajuda do reduto Deadpool. Primeiro, vamos ao navegador e vamos fazer um teste ao vivo. E vou colar algum texto aqui dentro desta área de texto. Imaginei meu texto aqui. Você pode ver que Vamos clicar em Enviar. Vamos abrir a profundidade de redução contada. Você pode ver isso. Você pode ver que nossa promessa foi cumprida aqui. E podemos ver que fomos cutucados. Você pode ver lá que temos nosso corpo do título. Você também verá uma ID de usuário gerar eticamente um ID de usuário aleatório. Você pode ver que temos um, adicionando um, não o ID aleatório, que é criado pelo nosso servidor JSON. Agora, o que temos que fazer para exibir o retrato criado abaixo deste componente do formulário. Depois que o usuário enviou o formulário. Vamos para o código VS. Vou usar um seletor enorme aqui. Você selecionou que vou usar para rastrear basicamente o valor do estado do nosso estado da loja. Certo? Podemos ter um valor como postar e carregar. Depois disso. Temos que fazer depois disso, teremos uma função responsável por costurar blocos criados ou assim postar blog. Dentro disso, teremos retorno. Vamos usar fragmento aqui também. Vou usar o carregamento. Carregando, se verdadeiro, vou exibir ou carregar o componente do cartão que é responsável por costurar esse carregador de caracteres. E vou fornecer uma contagem aqui, outra, vou bloquear ambos Tóquio. Mais uma vez. O que vou fazer, então vou no arquivo index.js. E eu só vou copiar essa coisa. Vamos vir aqui. E vamos colá-lo aqui. Talvez tenhamos que mudar. Vamos dar-lhe uma div de fechamento primeiro. Este será o teste, o aditivo Silvia. Isso será editado. Então, tudo será editado. Porque uma vez que você criar isso para o estado de postagens conterá uma única matriz de objeto. Podemos classificar essa porta criada abaixo deste componente de formulário. Vou fazer um par de pausa novamente. E podemos ter os dois. Verdade. Então vou para esse post para postar o blog. Vamos salvar este. Vamos para o navegador. Atualize este. Vamos testar o blog. E vou escolher o conteúdo aqui. Eu imaginei o conteúdo do corpo aqui. Vamos clicar em Enviar. Você pode ver que conseguimos criar uma porta com sucesso e estamos exibindo abaixo nosso componente de formulário. Realizamos essa operação de criação com a ajuda do kit de ferramentas do leitor em nosso aplicativo React. Na próxima operação, vamos executar a operação de atualização. 16. PU, ação de ação com createAsyncThunk: Portanto, a operação de criação é feita com o kit de ferramentas. Agora é hora de executar a operação de atualização com a ajuda do kit de ferramentas de radar. Então, primeiro vamos criar uma ação que será responsável por atualizar os dois com base no ID nas portas, como o arquivo dot js, vamos criar uma ação. Então, o que vou fazer, vou copiar toda a ação. Só vou colá-lo aqui. Isso se tornará atualização. Ambos se tornarão quadro de atualização. Agora vamos atualizar a porta com base no ID do nosso componente. Vamos receber algumas coisas como ID. Vamos atualizar o corpo. Também vamos passar o título, certo? Mas vamos atualizar apenas a parte do corpo da única postagem do blog. Aqui temos que especificar o ID porque vamos atualizar a porta com base no id. E o método será colocado. O cabeçalho será uma estadia como está no corpo. Temos que injetá-la, remover este. Podemos apenas passar aditivos como diretor de título e corpo, a coisa será aditiva. Agora. Agora isso cria um think tank, gerará um ciclo de vida de três promessas. Então, vamos lidar com o ciclo de vida de três promessas novamente em nosso redutor. Então, vou copiar as três vidas naturalmente aqui. E vou pintá-lo. E certifique-se de atualizar do boletim de notas para atualizar. Será um quadro de atualização. Isso também será atualizado ambos conhecidos por mudar tudo isso aqui. E temos que definir alguma propriedade, algum estado inicial adicional que temos que definir. Vamos atualizar apenas a parte do corpo do corpo será inicialmente empatia e haverá um modo de edição. Então, inicialmente, será o falso. Também teremos uma ação extra. Então, vou definir essa ação no redutor. Portanto, esse acidente foi responsável por ativar o modo de edição. Nós vamos ter como conjunto. Isso terá estado e ação. Aqui. Vamos ter um estado pontilhado , é igual à carga útil real. Vamos receber essa coisa do nosso componente. Temos que fazer mais uma atualização, como ponto de estado, corpo, ponto, carga útil e corpo. Vamos receber duas coisas, como modo de edição e parte do corpo da placa de bloco único. Vamos exportar essa ação também. O que podemos fazer aqui, podemos ter como exportar const, gabar-se, fatia, ponto, ação. E podemos dar aqui como definir edição. Certo. Agora vamos voltar para a parte da interface do usuário. Vamos voltar aqui. Vamos buscar um post aqui. Agora temos um botão de edição aqui. E depois de clicar nisso, você fez essa parte do corpo com a Itália convertida na área de texto. E o valor do botão também receberá Change. Valor do botão, bom. Edite para salvar. 17. Populate de dados no formulário: Então, um arquivo index.js. O que temos que fazer primeiro, vamos receber esse novo estado que acabamos de definir em nossas postagens como objeto de arquivo dot js, extraindo aqueles listados acima do seletor dos EUA. E aqui o que temos que fazer. Agora, vamos ter nosso modo. Estamos no modo de edição. Então, o que temos que fazer, vamos ter fragmento aqui. Uma outra parte. Estamos apenas mostrando essa parte do corpo que lhe deu que não está editando o post. Agora toda a lógica que temos que definir nesta parte do fragmento, editando a postagem. Então, o que vou fazer, então, a partir disso, teremos onClick. Vamos despachar uma ação. Despacho. E vamos deslocar o idiota. Certo? Quando o usuário clicar neste botão de edição, o modo se tornará verdadeiro, então verdadeiro. E temos que passar o corpo também. Corpo valioso. Assim, podemos obter os postes de luz do corpo 0 ponto corpo. Vamos formatar este. Vamos salvar o arquivo. Agora aqui, o que temos que fazer, então ele estará entre parênteses. Então, vamos dar-lhe um suporte. Aqui. Vamos ter área de texto, linhas de área de texto para ter valores. Certo? Então, precisamos definir o estado inicial. Temos que definir um estado para esses valores corporais. Então, aqui o que podemos fazer, podemos ter mais um estado como body tag. Porque estamos atualizando o corpo da única postagem do blog. Não estamos debatendo o conjunto de títulos. Será com pena. E aqui vou executar um efeito enorme. Efeito de uso. Vamos usar o Effect run assim que tivermos o valor em nosso corpo. Estou falando sobre esse corpo que definimos em nossos posts ly dot js arquivo. Temos o corpo. Em seguida, corpo. Dessa forma, poderemos preencher o valor do corpo em uma área de texto aqui, o que teremos corpo, ok. Nós vamos ter onchange. Ele terá um conjunto de eventos, corpo de texto, ponto, destino, ponto, valor. Então vamos ter dois botões. O nome do botão será como salvar e cancelar. Por usuário tem a opção de salvar a postagem e também pode cancelar o processo de atualização. Então, vamos ter que abotoar com sete cancelamentos. Vou usar seu espaço. Vamos acrescentar que teremos o modelo de tamanho. Certo? Vou ter alguma margem de ladrilhos, margem superior de cinco restantes. Vou dar margem esquerda cinco. Entre esse espaço, teremos nossos dois botões. Tipo de botão, primário. Vamos ter uma mesa, ok? Vão ter outro botão que será o câncer. Se você clicar no cancelamento, você basicamente sairá do Modo de edição. Se você clicar no botão Cancelar, ele será apenas o botão normal. Primeiro, você pode verificar se somos capazes de preencher o valor corporal do blog em uma área de texto ou não ao clicar no botão Editar. Vamos atualizar este. Vamos encarar a postagem com ID três. Vamos clicar em editar. Portanto, podemos publicar o valor corporal de blogar uma área de texto. Essa coisa, não queremos isso. Ok, vamos para o VS Code. O que podemos fazer aqui. Assim, podemos verificar aqui como esse espaço inteiro. Podemos verificar aqui como se você estiver, se você não estiver no modo de edição. Então, nesse caso, só queríamos esse botão de edição e exclusão. Vamos cortar este. Vamos para o navegador. Diferenciar. Vamos preencher a postagem. Agora temos esses dois botões. E depois de clicar no botão Editar, isso aconteceu, agora você está no modo de edição. Então, nesse caso, não quero que ele exiba esses dois botões. Quando o usuário clicar em salvar ou cancelar, esses dois botões serão exibidos aqui. 18. Enviar. Ação: Até agora, teremos o método onClick. Aqui. Vamos despachá-lo para ação. Com feio é usado para atualizar a porta de bloco único com valor corporal. Certo? Então, aqui vamos despachar uma ação que criamos em nosso arquivo js post slash dot. Portanto, temos que passar como ID, postar ID. Também enviaremos o título, o mesmo título que vamos enviar porque não estamos editando o título. Estamos atualizando apenas o valor corporal do blog e do corpo. Vamos enviar a temperatura corporal. Esse valor só estamos mudando. Se você clicar no título. Então, precisamos basicamente interromper o processo de atualização. Então, no geral, aqui sairá do modo de edição. Então, nesse caso também, temos que despachar uma ação. Vamos ter o método onClick aqui novamente. Vamos despachar, despachar. Nesse caso, será o falso. Aqui também, temos que enviar mais uma ação. Edição de despacho. Depois de clicar na edição, queríamos basicamente sair do Modo de edição. Portanto, também temos que enviar o ano até o momento no GitHub atualizando o valor corporal de uma única postagem no blog. Aqui vamos novamente traçar a edição falsa. Certo? E depois disso, temos que basicamente fazer esse corpo imitar. Aqui também, podemos passar o corpo para o infinito. Aqui estamos recebendo alguns. Então, será vírgula. Então, vamos salvar esse arquivo. E vamos para o navegador. Atualize este. Vamos começar do zero. Vamos encarar o blog. Aguarde o ID cinco. Agora, vamos clicar em Editar. Agora estamos no modo de edição. E se ele deu teste, não poderemos atualizar o valor. Portanto, digitar não está funcionando aqui. Deixe-me ver o que está acontecendo. Em mudança. O que temos que fazer. Então, algo está dando errado aqui, eu acho. Então aqui temos que mostrar basicamente o corpo. Corpo. Vamos entrar no navegador e buscar a placa com base no id de usuário cinco. Vamos clicar nele, ele. Agora estamos no modo de edição. Agora, vamos atualizar esse valor corporal da Blackboard. Vamos dar a você um blog ao vivo atualizado. Se você clicar em Salvar. Temos o valor corporal atualizado do blog aqui você pode ver que temos corpo como blog atualizado. Temos que executar fielmente a operação de atualização também com o reduto para líquido e qualquer que seja a atualização que você está fazendo aqui, ela não salvará em dB porque espaço reservado JSON não mantenha qualquer tipo de banco de dados por trás da cena. Se você reformular e enfrentar o poeta novamente com o mesmo ID como quatro, você obterá o valor corporal antigo desta postagem no blog. 19. App de cocktail do projeto 2 - demonstração: Bem-vindo a esta seção. Nesta seção específica, criaremos nosso aplicativo com a ajuda do kit de ferramentas de redação usando a degustação de criação. Esse é um aplicativo de coquetel, onde vamos deixar todo o coquetel fazendo uma solicitação de API de terceiros usando create tasting thing. Então, vamos vender todos os coquetéis em nossa página inicial. Como você pode ver, essa API de terceiros retorna cerca de 20 coquetéis. Você pode, você pode ver isso na página inicial. Você também pode ver o coquetel único para ler mais informações sobre esse coquetel em particular. Então, se você clicar aqui, há um botão de detalhes. Você navegará em direção a uma única página de coquetéis, onde poderá obter mais detalhes sobre esse coquetel básico. E se você clicar no Google, você voltará para a página inicial. Agora você também pode configurá-lo para um coquetel específico. Então, vou te dar uma palavra-chave como Adam. Você pode ver que, com a palavra-chave atom, ela foi escrita para coquetel. Também implementamos essa funcionalidade de pesquisa em nosso aplicativo de coquetel apenas com o kit de ferramentas de edição. No geral, criaremos este aplicativo nesta seção, que o Reader Toolkit usa para criar um middleware de sintomas. E antes de começarmos a criar esse aplicativo, entenderemos um pouco sobre como criar um middleware de think tank e isso entenderemos no próximo vídeo. Nos vemos no próximo vídeo, onde discutiremos sobre como criar um middleware. Em seguida, começaremos a criar esse aplicativo. 20. App de cocktail do projeto 2 - configuração: Agora estou nesse diretório e vou abrir um prompt de comando aqui. Então, vamos abrir um prompt de comando. E vou criar um projeto com o comando e px Create React app e o nome do projeto. O nome do projeto será toolkit cocktail. Então, vou dar o nome a esse projeto e pressionarei Enter. Então, acho que usei o NPM. Portanto, será n p x zero NPM. Então, vamos mudar esse e apertar Enter. E levará cerca de dois a 3 minutos para instalar toda a dependência desnecessária. E eu voltarei quando toda a dependência for instalada. Portanto, parece que a configuração do nosso projeto está concluída. Então, primeiro vamos entrar nesse diretório que é o coquetel do kit de ferramentas. Então, vamos para esse diretório. E pessoal, precisamos instalar algumas dependências. Antes de fazer o npm start, vamos instalar esses pacotes. Os pacotes que vamos usar são como o roteador React, dom. Precisamos do roteador React para construir este aplicativo. Reaja redux. O mais importante é o kit de ferramentas redox. Ok? Redux, último kit de ferramentas. Vocês podem apenas isso ser necessário para construir este aplicativo com a ajuda do kit de ferramentas redex. Vamos aguardar a instalação desse pacote e eu voltarei assim que todo o pacote for instalado. Pessoal, todos os pacotes foram instalados. Agora, vou fazer e me pagar para iniciar este projeto que já abri no código do Visual Studio. Então, vamos voltar ao Visual Studio Code. E agora você pode ver que nosso projeto foi compilado com sucesso. Então, vamos entrar no navegador. Você pode ver que não temos nenhum problema. E vamos visitar o clube do livro de design de materiais também em nosso aplicativo. Então, vamos usar esse conjunto de blocos. Então, o que eu vou fazer, então o que você tem que fazer, basta acessar este link e copiar esta parte. Vamos usar essa configuração de estilo, o design de material Bootstrap five. Mas esse aplicativo, e vamos entrar no código do Visual Studio. Então, copiei essa folha de estilo. E em index.html público, precisamos apenas colá-lo aqui. Ok? Então, terminamos com esse material hereditário que não o Bootstrap. 21. App de cocktail do projeto 2 - Cabeçalho: Então, agora vamos começar a trabalhar no componente de cabeçalho. Então, herde o arquivo dot js o que vamos fazer. Portanto, ele terá um arquivo muito básico contido no cabeçalho dot js. Então, estamos usando o estado da hashtag do material para o n booster five. Então, vamos usar o nome da classe. Então, o nome da classe com light, navbar, light. Então seja a luz. E isso será corrigido. Topo. Ok? Então, essa classe que agora vamos usar, então teremos outra div com a classe de fluido de contêiner. Então, dentro disso, teremos a palavra-chave banir. E teremos outra platina cujo nome da classe será light. Eles abrangem tag e o nome da classe será navbar, brand. E a margem inferior de zero para um, t1, depois cabeçalho, título e caixas de texto. Ok? Portanto, esse será o nome da classe para uma tag span. E podemos dar sua vida, encontrar seu coquetel favorito. Ok? Portanto, esse é o conteúdo muito básico que temos em nosso arquivo hero dot js. Ok? E essa, e essa será a navegação, ok? Não fazer. Vamos fazer essa corrente. Então, terminamos com esse componente de cabeçalho. Portanto, esse deve ser apenas o conteúdo necessário para o arquivo dot js do cabeçalho. E eu vou pintar esse material nebuloso no arquivo CSS do ponto índice. Vou pagar pelo código CSS desse arquivo CSS de ponto índice. E vamos entrar no app.js. Cinco minutos do App.js para trazer o código VS do componente de cabeçalho automaticamente o código VS do componente de cabeçalho para esse componente de cabeçalho. E vamos entrar no navegador e verificar se esse componente de cabeçalho está funcionando ou não. Você pode ver que temos esse belo cabeçalho. Encontre seu coquetel favorito. 22. App de cocktail do projeto 2 - Configure o kit de ferramentas do Redux-: Agora vamos trabalhar na exibição do coquetel. Então, primeiro, vamos configurar o kit de ferramentas do leitor em nosso aplicativo. Então, pessoal, vamos configurar o kit de ferramentas de redação em nosso aplicativo. Então, em vez de voltagem, teremos outra pasta chamada recursos. Ok? E, em teoria, o redux disso, teremos um arquivo que armazena dot js. E em terceiro lugar está o recurso. Vamos fazer o coquetel de arquivos voar. Ok? Como estamos trabalhando com o coquetel neste aplicativo, o nome do arquivo será como uma fatia de coquetel. Ok, então, nos slides do coquetel, faremos todas as solicitações assíncronas e atualizaremos a loja. Ok, então primeiro, precisamos criar slides e criar um think tank a partir do kit de ferramentas redux. Ok, vamos trazer essas coisas primeiro. Precisamos criar slides e criar qualquer coisa. Portanto, em um kit de ferramentas maior, os leitores podem ser incluídos por padrão e permitem que eles executem a lógica assíncrona de exclusão antes de enviar o processo, o deserto, para o redutor. Para concretos particularmente irritantes, eles são responsáveis por realizar tarefas assíncronas. É por isso que vamos criá-los de forma assíncrona para realizar as tarefas assíncronas e criar slides. Basicamente, uma função que aceita e inicialmente assume um objeto da função redutora e é um raio. E então ele gera automaticamente uma ação, cria um acento correspondente ao redutor e permanece. Portanto, com a ajuda do kit de ferramentas de reteste, você não precisa basicamente criar uma ação separada, um redutor do tipo ação, arquivo de ação. Então, tudo será gerado automaticamente com a ajuda de slides. E vamos escrever toda a lógica assíncrona com a ajuda do kit de ferramentas do leitor. Especificamente, vamos buscar toda a lista de coquetéis e exibir na página inicial. Então, vamos escrever como diz o custo de exportação. Ok. Então, basicamente, ele será responsável por preparar todos os coquetéis. Com a ajuda da API, vamos usar a classificação de crédito feita. E, basicamente, isso aceitará os três parâmetros que são um tipo de acento, que será a string, uma função de retorno de chamada. E então, opcional, isso é um objeto, ok? Então, esse será o terceiro parâmetro, será o objeto e não é opcional. Ok? Então, vamos defini-lo no tipo dez, que será a string. Então, já que estamos lidando com o coquetel, vamos definir como coquetéis. E isso será como um tom. Coquetéis Pitch, ok? Quais coquetéis? E no segundo parâmetro, teremos uma função de retorno de chamada leve. Ok? Portanto, essa função de retorno de chamada basicamente fará a solicitação da API. Ok? Nós vamos ser grandes, eu acho que aqui. E para fazer a solicitação da API, usaremos apenas o phage. Retorne h. Vamos colar a API aqui. Vou apenas colar a API neste fago. Então, vou colar a API aqui. Então, esse APA que vamos usar está recebendo todo o coquetel. Então, basicamente, essa API retornou 25 coquetéis, ok? Cerca de 25% de retorno. Então você pode ver que ele retorna cerca de 25 coquetéis no meu carteiro. Então, vamos examinar o Visual Studio Code e quando a promessa é resolvida depois de fazer as solicitações de API. Então, vamos abordar o método den. Nós receberemos a resposta. E isso será apenas uma resposta, Jason. Ok? Gente, o parâmetro na criação é “obrigado, não é uma opção” e terminamos com a primeira ação responsável por buscar todos os coquetéis desta APA. Então, agora isso cria um think tank com os três ciclos de vida prometidos gerados pela Itália que estão pendentes, cumpridos e refletem esse ciclo de vida que vamos lidar com o redutor extra. Então, basicamente, o redutor extra trata da solicitação assíncrona. Ok? Vamos lidar com todos esses três ciclos de vida que são gastos cumpridos e rejeitados. Vamos lidar com o redutor extra, que será o responsável por lidar com a solicitação assíncrona. Então, vamos usar a criação de slides apenas para essa finalidade. Então, agora o que podemos fazer aqui, const cocktail slide. E vamos usar ainda para criar slides. Então, isso será basicamente aceitação, nome de moscas, nome tão pequeno que você pode dar como apenas coquetel, coquetéis. E a segunda coisa é tentar o estado inicial. Portanto, você deve se defender inicialmente, inicialmente de forma direta, nossa inscrição será como coquetéis, no plano de estudos e no PTA. E também vamos tomar um único coquetel. Também será o único carregamento que usaremos. Portanto, esse será o falso inicialmente e o erro também vamos usar será o nulo. Então, definimos a taxa inicial. A terceira coisa que vamos definir é esse redutor extra. Reducer, vamos lidar com os três ciclos de vida prometidos que são gerados pela criação de um think tank pendente, cumprido e rejeitado. Então, vamos usar sua perna , para coquetéis e pintura. E depois disso, teremos uma ação estatal. E isso será como se o estado não carregasse para governar. Ok? Então, pintar significa que nossos dados estão a caminho. Não recebemos os dados. Portanto, na UAB, não recebemos os dados. Enquanto isso, exibiremos algum tipo de spinner. É por isso que estou usando o carregamento amarelo. Ok. E isso foi cumprido. Então fh.com, então o coquetel de phage foi preenchido. E vai ter o estado, a ação do estado. E agora o que vamos fazer: coquetéis estaduais e pontuais. E podemos usar aqui ação leve, não carga útil. Então, isso será uma carga útil de pontos leves e bebidas. Então, por que estamos usando como x n dot payload dot drink. Se você voltar para o Pokémon, verá que temos que direcionar as bebidas aqui, ok, então você receberá todo esse coquetel. É por isso que estamos usando aqui bebidas com pontos x n dot payload. Espero que você entenda agora. E se o carregamento de 1 ponto também falso depois de recebermos os dados em nossa interface de usuário. E também vamos definir o rejeitado. Você também tem que dar a vírgula aqui. Caso contrário, você receberá esse cabeçalho e este será o rejeitado. Ok? Nesse caso, você pode simplesmente ter a ação dot payload. E esse será o erro do estado. Ok? Agora temos que exportar este. Então, vamos exportar o redutor de pontos padrão para fatias de coquetel. Agora, vamos basicamente configurar a loja com o kit de ferramentas 3D É muito fácil configurar a loja. necessárias apenas duas a três linhas de código para configurar esse tour com o kit de ferramentas elbow predict. Precisamos trazer a configuração do kit de ferramentas de mesa. Então, configurei a restauração. E vamos importar um redutor de coquetel. Problema do redutor. Em destaque. O coquetel voa, tudo bem. E vamos exportar o padrão. Loja fornecida. E podemos alcançar o valor chave de nossos redutores já mencionados. E, de fato, vamos definir a chave. Então, vou definir o aplicativo e o produtor de coquetéis. Com a ajuda da chave do aplicativo, vamos para o estado, o que quer que tenhamos em nossa loja. Então, seja qual for o estado que definimos aqui em nosso slide de coquetéis, acessaremos tudo isso, o estado de uma loja usando o valor chave. Ok? Agora temos que fazer um pequeno desapego em nosso arquivo index.js. Então, primeiro, precisamos trazer a loja. Além disso, precisamos trazer o fornecido, fornecido pelo React redux. Então, vamos trazer o fornecido pelo React redux. Então, do reator, vocês patos, precisamos de um fornecedor. E o que podemos fazer aqui, provedor, e vamos cortar toda essa parte. E vamos colá-lo aqui. E vamos definir a loja e apenas encontrar a loja. Eles dizem que basicamente nosso aplicativo React pode acessá-los, está claro que definimos em nossa fatia de conteúdo. Ok, pessoal, agora configuramos os kits de ferramentas de redação para que estejam totalmente em nosso aplicativo. E você também pode verificar isso no navegador. Então, vamos até o navegador, atualizar e abrir a ferramenta de desenvolvimento. Então você pode ver a data aqui. Esse é o estado inicial do nosso aplicativo. Portanto, temos coquetéis com a entrada t em um coquetel ou um erro de falha de carregamento. Isso é o mesmo que definimos inicialmente em nosso arquivo js, que definimos em nosso arquivo cocktail slide dot js, que configuramos com sucesso o kit de ferramentas de redação em nosso aplicativo. 23. App de cocktail do projeto 2 - Componente de pesquisa: Então pessoal, a próxima coisa que vamos fazer trabalhar no campo de entrada de pesquisa. Então, vamos entrar no código do Visual Studio. Então, criaremos um arquivo aqui. Você pode ser preso. E também teremos um arquivo CSS. Mas a terceira entrada também. Ok? E vamos gerar um trecho aqui primeiro. E depois disso, vamos ter alguns ganchos. Portanto, precisaremos desse gancho em nosso arquivo de entrada de pesquisa. Então, vamos usar um usuário daqui. E depois disso, também precisamos trazer o arquivo CSS para essa entrada de pesquisa. Então, vamos falar sobre isso também. Isso é CSS de pontos de entrada. E eu vou pagar o código CSS desse arquivo CSS de pontos de furacão. Então pessoal, acabei de escolher o código CSS para este arquivo CSS de ponto de entrada de pesquisa. Você pode copiar tudo isso aqui, pontuação do teste, se quiser. Ok, pausando este vídeo, espero que você tenha uma cópia. Vou clicar em Exportar. E vamos entrar nesse arquivo de hidrogênio put dot js. E aqui, o que podemos fazer em troca, não vamos usar a tag div. E você vai ter o nome da turma aqui. O nome da classe será a seção. Tudo bem. Então teremos outro nome de classe com o formulário. Então, seremos a tag do formulário e o nome da classe será a forma mais justa. Não precisamos de ação, forma verbal. E informe onde teremos um dia. O nome da classe, controle do formulário. Ok? E, de fato, teremos um rótulo. Então, vamos usar o nome. Podemos te dar, como aquele coquetel. Ok? E vamos ter uma contribuição aqui. Então, nessa entrada, teremos o tipo. Portanto, digite será o nome somente de texto. Só podemos dar um nome. Você pode fornecer sua identidade aqui. Eles serão apenas o nome. E vamos usar o, use o representante aqui também. Então, valor constante, use aqui. E vamos usar aqui, ok? Valor de compensação. Então, pesquisando valor, você pode fornecer aqui. E o resto da lógica, escreveremos mais tarde, quando tivermos saído de toda a lista de coquetéis. Ok? Então, a taxa da lógica desse arquivo de entrada de pesquisa vamos escrever mais tarde, ok? Depois de exibir todas as datas do coquetel na página inicial. Então, o que podemos fazer aqui a partir de agora, então vá para o arquivo index.js, ingira, traga o componente de entrada de pesquisa, ok? E vamos remover esse. Não precisamos desse. E vamos entrar no navegador. E vamos até a página inicial. Agora. Agora você pode ver que temos esse campo de entrada de pesquisa e escreveremos a lógica mais tarde, assim que exibirmos toda a lista de coquetéis nesta página inicial, tudo bem. 24. Aplicativo de cocktail do projeto 2 - show de cocktails usando ações: Em seguida, trabalharemos levantar todo o elevador de coquetéis em nossa página inicial. Então, vamos definir o componente aqui. Então, vamos definir um componente aqui para exibir todo o coquetel restante em nossa página inicial. O nome do componente será como list dot js. E vamos gerar esse trecho primeiro. A partir do react, precisamos de alguns ganchos como estado de UC e efeito de uso. E do reator isso caiu? Portanto, precisamos que você seja selecionado e usado no envio. Você selecionou e usa o despacho de reativado. Então, vamos trazer essas coisas também. Seletor usado. E você também vai precisar desse axônio. Isso são coquetéis de fagos. Da nossa fatia de coquetel. Precisamos voltar para a pasta de redação, depois para a pasta de recursos, depois para vir e depois para a fatia de coquetel. E temos que trazer os coquetéis de fago. E também vamos usar o link do roteador React inativo. Vamos trazer o link também. Roteador React dom. E primeiro, o que vamos fazer, primeiro, vamos extrair o estado da nossa loja com a ajuda de você selecionado. Você selecionou. Podemos usar ainda para extrair o ditado que definimos em nosso código. Nós podemos fazer algo assim. Não, porque nosso coquetel para fazer isso está registrado com a chave do aplicativo. Se você voltar para o arquivo dot js da loja. Ok, então, com a ajuda dessa chave do aplicativo, podemos extrair o estado em que definimos nossos slides de coquetel. Assim, podemos ativar o estado, para que possamos extrair todos esses estados que definimos em nossos coquetéis. Slides de coquetel com o cotovelo estão em nosso arquivo dot js de prato de coquetel. Para levantar o coquetel. Vamos precisar de coquetéis. Ok? E também precisaremos ser carregados. E temos que definir quando é um estado ainda. Então isso será como um coquetel modificado. Ok? Então, defina um coquetel modificado. Essa será a entrada D. E também vamos armazenar a referência da enorme variável de despacho Intuit de despacho. Porque também precisaremos enviar esse axônio de coquetéis de fagos. E vamos despachar nesta fase, os blocos internos são enormes. Então, vamos usar o efeito Hughes aqui. Essa será a entrada t. Isso significa que vamos exibi-la no carregamento inicial do aplicativo. Sempre que o usuário carregar o aplicativo, enviaremos esses coquetéis de ponta, ok? E também podemos verificar se está funcionando ou não. Então, vamos te dar uma lista de coquetéis leves de leitura. Ok. Portanto, temos que trazer essa lista de coquetéis aqui também em nossa pasta Páginas. Ok, então index.js, precisamos trazer a lista de coquetéis. Então vocês poderiam importar automaticamente esse componente para mim. E vamos até o navegador. E agora você pode ver que temos todos os coquetéis. Então, temos cerca de 25 coquetéis. Você pode ver que compramos todos os coquetéis. Então, vamos voltar ao Visual Studio Code. E agora, o que temos que fazer, primeiro, precisamos escrever mais um efeito de uso. Porque vamos mudar alguns nomes aqui. Então você pode ver que temos um nome estranho aqui. Identificação de bebidas, temos identidade, bebida, pessoal. Algumas propriedades do objeto. Vamos renomear. Ok. Então, vamos fazer isso também. Então, teremos mais um usuário, e é por isso que eu defini aqui o estado modificado do coquetel aqui. Esse usuário só deve correr quando tivermos a hora do coquetel para armazenar. Esse enorme efeito também ocorrerá se esses coquetéis tiverem uma boa mudança. Ok? Então, podemos conferir aqui, mas se tomarmos os coquetéis , podemos tomar como novos coquetéis. E podemos simplesmente mapear os coquetéis porque é uma variedade de objetos que você pode usar aqui. Assim, podemos usar a função de mapa. E a partir do item, vamos detectar algumas das propriedades. A propriedade é uma bebida leve e arrumada. Ok. Então eu bebi. Podemos fazer textura, depois beber STR, depois beber FTR, Tom, depois um TR. Então eu vou copiar a coisa. Então, esse aqui. Ok? E classe STR. Essa é a última propriedade que precisamos. E depois disso, vamos renomear essa propriedade porque isso parece um pouco estranho. Ok? Portanto, esse será um nome de anel adicionado à luz. Podemos ter uma imagem de bebida como FTR. Então isso vai ser como STR, beba, entre e puxe. Este será o alcoólatra STR. E estou feliz que seja STR e vidro. Você pode ver que todos esses nomes estão em nós. Então é por isso, é por isso que eu renomeei toda essa propriedade. Portanto, podemos usar o nome de identificação image1 para vidro. Então, podemos indicar o coquetel modificado para os novos coquetéis. Ok. Então, por dentro, se não tivermos um coquetel , então o proctor modificado até o infinito. Ok? E também vamos usar o carregamento. Então, se você tiver o carregamento, isso significa que nossos dados estão a caminho. Não recebemos esses dados RTI até agora. Até lá, podemos exibir o carregamento. Ok, então algum tipo de girador que podemos exibir como retorno. Podemos viver aqui com o pintor de nomes da classe div. Eu posso crescer. Ok. Isso será ter o papel. Aqui estamos usando basicamente o arquivo bootstrap do Material Design, ok? E podemos ter uma tag span com o nome da classe oculto visualmente. Ok? E podemos ter aqui como carregar e dentro da devolução. E podemos remover esse. Isso vai ter um contêiner LastName. Então vamos ter outro nome de classe. Então, vamos usar o material hoje após o nome da classe aqui. Então, linha, eu posso chamar de colunas. Eu acrescento um, depois a linha me chama de hífen três, depois G hífen quatro. E podemos usar aqui esses coquetéis modificados. Você pode usar seu mapa. Ok? Podemos simplesmente capturar toda essa propriedade que renomeamos ainda id, nome, imagem e Fogler do item. Então, o item e podemos simplesmente tirar uma foto ID, nome, imagem, vidro. E então podemos ter um retorno aqui. E esse retorno interno, ele terá um nome de classe com a coluna. Ok. E temos que fornecer a chave. Então ele será o ID. E então vamos ter a platina com o carro. Então, por acaso, a borda do carro empatou isso. Teremos na imagem com o cartão com o nome da classe, o hífen IMG top. Ok? E vamos definir a fonte. Então, já temos a estrutura, a imagem do item e podemos ter o nome. Ok? E depois disso, teremos o div com o corpo do cartão de nome da classe. Ok? E vamos usar o mosaico atlântico, então o texto distribuído se alinhe à esquerda, ok. E dentro do div, teremos a tag h5 com o nome da classe, título do cartão, ok. E esse título terá o nome deles. Ok? E vamos copiar novamente mais uma vez. E essa será a borda fértil. E esse será o copo. E vamos ter uma tag p com o texto do cartão de nome da classe, ok? E, de fato, isso vamos ter na informação, ok? E depois disso, teremos um botão de detalhes. Vamos usar o link. E vamos ter um botão, botão com o nome da classe btn. Btn em quatro, ok? E isso terá detalhes. E isso basicamente navegará em direção à página de um único coquetel. Se você geralmente está interessado em ver os detalhes sobre esse coquetel específico que foi roteado já registrado em nosso arquivo app.js. Portanto, temos uma rota pediátrica específica para qualquer via aqui, então já rejeitamos essa rota. Você pode ver isso em nosso arquivo app.js, coquetel, ok? E temos que especificar o ID. Então, esta é uma lista de coquetéis. Podemos dar sua identidade. Ok. Acho que terminamos. Ok. E podemos verificar se está funcionando ou não. Então, vamos entrar no navegador. Agora você pode ver que podemos exibir todo o coquetel em nossa página inicial. Ok. Então, isso está funcionando bem. 25. Aplicativo de cocktail do projeto 2 - Ação para cocktail de taça: O próximo recurso em que trabalharemos é a exibição de um único elevador de coquetéis na rota do coquetel. Então, uma vez que o usuário clica nos detalhes, ele o fará, todos os detalhes sobre esse coquetel em particular. Então, vamos deixar essa coisa voltar ao código do Visual Studio. Portanto, para exibir as informações sobre o único coquetel, temos que trabalhar nesse arquivo. Ok? Então, antes de trabalhar neste arquivo, primeiro temos que trabalhar na fatia do coquetel. Então, aqui primeiro precisamos escrever a ação. O que podemos fazer aqui? Então, vou copiar e colar este. Porque só isso, precisaremos mudar essa parte da APA, ok? Vou apenas colar a API necessária aqui. Então, o TPA que vamos usar para aperfeiçoar o coquetel único com base no ID. Primeiro, renomeie tudo isso, ok? Este será o primeiro coquetel único, e vamos renomear o mesmo tipo também. Vamos receber esse id do nosso componente, portanto, menos do que esse detector, a luz ideal dessa forma. E também temos que definir os três ciclos de vida prometidos para esse Ax e Ay. Então, vou copiar tudo isso e colar aqui. E temos que renomear esse. Então, este será o coquetel único de fagos. E nesse caso, você também tem que direcionar suas bebidas, ok. E não se esqueça de mudar essa. Então, desta vez, estamos lidando com um único coquetel, ok? Portanto, essa área conterá apenas um único objeto porque essa será a resposta PER para exibir as informações de um único coquetel. Ok? Então, novamente, você tem que direcionar as bebidas com pontos de carga acentuada. Ok. Então, terminamos com a lógica em nosso contexto, light ou GAS para buscar o único coquetel. 26. Aplicativo de cocktail do projeto 2 - página de detalhes de cocktail: Então, vamos entrar nesse único arquivo js de coquetel. Neste arquivo, primeiro precisamos colocar um gancho novamente, como você reafirma. Use o efeito, ok? E também queremos precisar de um link do roteador React desativado. E também precisaremos usar melhor o perm, porque vamos precisar do ID. Então, uma vez que o usuário clica nos detalhes, então, se você clicar nos detalhes, você pode ver que precisamos desse ID, ok? Então, podemos obter essa resistência com a ajuda dos pais. E também precisamos dessa ação que acabamos de criar em nossos slides de coquetel. Então, temos que ir para a pasta redux, dez recursos e depois para a fatia de coquetel. E podemos trazer esse coquetel único de última geração. E também precisaremos seletor usado e do despacho do React redux. Então, a partir do React redux, precisamos usar o eleitoral, usar o despacho. Despacho e você selecionou. E, novamente, preciso do coquetel e da carga, em parte de nossa restauração com o cotovelo, usamos o seletor. Então, estado. E com a ajuda da chave AB de ponto teta, podemos extrair o coquetel e o valor do estado de carregamento. E, novamente, temos que definir essa coisa novamente. Então, vou copiar isso, essa parte e colar aqui. Porque, novamente, precisamos renomear a propriedade existente do coquetel porque aqueles chamados Luke são um pouco estranhos. Portanto, temos que renomear algumas das propriedades existentes desse coquetel. Então você pode ver que temos tudo o que somos agora. Vamos apenas renomear hum, da propriedade existente desse coquetel que teremos novamente, esse coquetel modificado. Ok? E armazenamos a referência do animal de estimação Eurydice em uma variável de despacho. E depois disso, temos que dissipar esta página de um único coquetel. Ok? Então, esse grande efeito já existe, e uma vez que tenhamos o ID, até agora , o que podemos fazer, podemos detectar esse id com a ajuda do uso. Então, seja qual for a ideia que temos em um URL, podemos detectar onde o id com a ajuda de um padrão enorme e esse enorme animal de estimação só correm quando temos o ID. Então, podemos enviar um único coquetel e fornecer a identidade, ok? E você pode ver que a ideia está ganhando grande textura aqui em nossa primeira ação de coquetel individual. Então, vamos voltar ao arquivo js de um único coquetel. E, novamente, temos que escrever mais um efeito de uso. Esse enorme efeito só será executado quando tivermos o ID. E então, tudo bem, e aqui novamente vamos verificar a duração do coquetel. Ok? Então, se você tem algum valor, isso significa que vamos considerar a duração do coquetel. E se for maior que zero, significa que temos o coquetel, o coquetel em nosso objeto de área. E depois disso, vamos abandonar a estrutura. Um pouco da coisa. Vamos ditar em que medida a propriedade deste coquetel, esta área de coquetéis com a Itália contém a única área do objeto com, porque esse erro de coquetel só será responsável por exibir as informações de um único coquetel. Portanto, isso só conterá um único objeto de área. Então, esse coquetel, podemos chegar ao índice zero porque ele se manterá, porque ele conterá apenas a única área do objeto. E podemos imaginar algo como STR, bebida. Ok? E podemos renomear isso para nomear. Ok. Da mesma forma, vou renomear, hum, a propriedade adjetiva. Ok? Então, eu vou pagar todas essas coisas aqui. Vou renomear todas as propriedades como FTR, beber isso, beber. Para enviar um e-mail diretamente ou para obter informações. Então, todo esse objeto de propriedade existente em um dia chamado aqui. E também vamos usar esse ingrediente. Até agora, ingrediente, o que temos que fazer. Então, temos que definir um novo ingrediente. Então, ingrediente, ingredientes. E essa será a matriz. E dentro disso teremos todos os ingredientes. Ok? Então, os ingredientes do STR também, vou definir um por um. Ok? E depois disso, vamos tomar no novo coquetel, ok, o chamado novo coquetel para ter o nome imagem, imagem corporal na categoria completa. Então, vamos colocar nessa categoria. Depois disso, vamos comer no copo. Em vidro, depois instruções, ingredientes. Ok. Então podemos fazer assim, modificar coquetel para novo coquetel. E se você não tiver os coquetéis, então faça isso modificando o coquetel para nulo. Ok? Então esse grande efeito só ocorre quando temos a identificação e algumas informações sobre o coquetel, ok? E aqui temos que verificar. Se não tivermos nenhum coquetel de modificação. Isso significa que podemos voltar. Olá. É bom marcar aqui. Assim como com a seção do nome da classe, hífen, título. E podemos dar uma descrição da vida, nenhum coquetel para mostrar. O que podemos fazer aqui. Então, podemos simplesmente remover este. Não precisamos desse. E lá dentro nós vamos voltar. Senão. Vamos terminar a estrutura do coquetel modificado. Do coquetel modificado, precisamos de nome, imagem e categoria em copo cheio. Instruções e ingredientes. Ok? E aqui podemos retornar, retornar que podemos usar o fragmento primeiro. E podemos verificar se há um carregamento. Em seguida, vou exibir o spinner. Ok? Então, vamos usar o div com o nome da classe spinner grow. E terá um papel com esse status. Ok? E dentro disso, vamos usar a tag span com o nome da classe com Willie hidden. Podemos te dar uma recarga ao vivo. Os três pontos. Aqui, vamos mostrar todas as informações sobre esse coquetel específico. Agora, teremos a tag da seção com o nome da classe, ficção, coquetel, hífen, eleição e todo o estilo com esse nome de classe que eu já defini em nosso arquivo CSS de pontos de índice. Ok? Portanto, você pode ver que não precisa se preocupar com esse arquivo CSS porque eu já forneci o link para todo o arquivo CSS que usei neste aplicativo. Dentro disso, teremos cinco links. Ok? Então, esse link tem basicamente o botão Voltar. E queremos usar botão, cor do botão. E vamos usar um botão com o nome da classe btn, hyphen danger. E podemos dar um estilo embutido. Então, margem, no topo. E esse será o valor do botão, será o retorno. Ok? E depois desse link, teremos a tag H2 com o nome da classe. Título da seção. Ok. Bem, vai ter no nome e nós vamos ter outro nome de classe com a bebida. Em emplumado. Vou usar tag de imagem, fonte. Vamos usar o e-mail apenas aqui. Em adulto. Vamos usar o nome. Ok? Então, vamos ter o div com o nome da classe e trazer informações. Então, vamos usar a tag p. Em seguida, vamos usar uma tag span com o nome da classe, drink, I open data. E é um pouco o nome. Ok. E estou feliz que tenhamos começado a ter o nome. Então, essa coisa vai ser repetitiva. Então, vou copiar essa tag p algumas vezes. Então, vamos copiar por um tempo. Então essa será a categoria. Ok? Então, podemos usar aqui a categoria. Essa será a entrada. Então esse será o informalmente e esse será o copo. Vamos dar um copo aqui. E depois disso, também teremos a tração. Essa será a instrução. Ok? E, em geral, vamos mostrar os ingredientes, ok? Então, esses serão um pouco diferentes nos ingredientes , OK. E vamos remover esse. Porque ingredientes, ter isso. Ok, você pode ver que temos o ingrediente na matriz. Então, o que podemos fazer aqui, para que possamos usar aqui para mapear, ok? Portanto, ingredientes, não mapa. Podemos ter item e índice. E podemos simplesmente devolver o item. Então vamos usar o tempo de bronzeamento. A chave. Se você não tiver nenhum ingrediente, sim, vou apenas devolver o nulo. E ainda assim vou mostrar todos os ingredientes desta vez. Portanto, podemos usar esse item e você também deve fornecer a chave. Então, a chave aqui é que vou usar o aprofundado. Ok? Então, acho que já terminei com esse único coquetel e acho que não estamos usando a imagem. Então, onde está a etiqueta da imagem? Ok, então aqui vai estar a imagem. Então, vamos atualizar este. Então, terminamos com esse único coquetel e vamos até o navegador e verificar se isso está funcionando ou não. Então, vamos clicar nos detalhes. Ok, então nós compramos esta propriedade não pode ler de indefinido. Ok? Então, o que podemos fazer aqui. Então, vamos entrar no navegador. Vamos, vamos primeiro a obrigação religiosa, e vamos clicar nos detalhes. Agora você pode ver que obtivemos esses ingredientes, OK. E vamos ver os outros ingredientes também. Então você também pode clicar nesse. Você pode ver que temos essa categoria de nome para vidro, ingredientes de instrução, ingredientes de instrução, todas essas informações sobre esse coquetel em particular, ok? 27. App de cocktail do projeto 2 - buscando cocktail: Então, a próxima coisa que vamos fazer é o hidrogênio, o coquetel e os guias. Já trabalhamos um pouco em nosso componente de entrada de pesquisa. Então, vamos completar esse componente de entrada de pesquisa. Então, vamos voltar ao código do Visual Studio. Então, primeiro, precisaremos escrever a ação em nosso arquivo cocktails live dot js. Então, vamos copiar este. Vamos renomear esse. Então, será a caixa de busca de busca. E vamos renomear esse. Ok, também precisamos mudar essa API. Então, desta vez, vamos recuperar o terceiro componente. Portanto, pesquise o texto e teremos que mudar esse APA. Vou apenas colar a API necessária para pesquisar os coquetéis. Então, vamos usar essa API, hidrogênio, o coquetel. E temos que definir novamente três ciclos de vida promissores em nosso redutor. Então, vou copiar esses três. Ok? E vamos colá-lo aqui. E vamos renomear este para Phage Cocktail, ok? Ok. E vamos atualizar o estado dos coquetéis, ok? Porque pode, porque pode resultar em mais de um coquetel com esse valor hierárquico. Ok? Então, vamos usar coquetéis JD dot e temos que focar novamente em apenas bebidas. Ok? Então, terminamos com a lógica em nosso slide de coquetéis, arquivo dot js. Então, vamos entrar no arquivo dot js de entrada de pesquisa. Dentro disso, vamos tocar em Font submit. Ao enviar. Você vai ter no topo da alça. E vamos definir rapidamente esse identificador. E essa alça alguns receberão o evento. Isso evitará a inadimplência com apenas um ponto E, ok? E temos que definir o onchange. Unchanged também mudará a alça para encontrar esta. Então, manipule a mudança e essa mudança de manípulo e essa mudança controlada. Nós vamos ter essa estratégia. Ou seja, já que estamos usando o usuário. Assim, podemos obter o valor como o valor atual de 30 pontos. Ok? E temos que trazer a primeira ação que criamos em nosso arquivo dot js de slides de coquetel. Então, precisamos voltar para a pasta de redação recursos, cocktails life, e temos que realizar essa ação, que pesquisar coquetel. E também precisaremos daqui. Você enviará do nosso React redux para menosprezar a ação. Primeiro, antes de despachar a ação, levou a armazenar a referência da enorme disparidade na variável de despacho. E aqui podemos enviar, ok. Então, pague e podemos dissipar o toque. Ok. E também precisamos fazer mais alguns investimentos em nosso arquivo index.js. E ligamos em algum momento, se você não conseguir o coquetel fornecendo o coquetel fornecendo o valor da pesquisa em passos, nesse caso, você precisará exibir algum conteúdo. Ok? Então, primeiro vamos entrar no arquivo index.js. Arquivo Index.js, onde estamos retirando toda a lista de coquetéis. Portanto, temos que voltar a esse componente da lista de coquetéis. E aqui temos que verificar, como se não tivéssemos coquetéis. Ok? Em seguida, basta retornar com alguns métodos. Como se o método fosse “não”, corresponda aos seus critérios, ok? E podemos verificar se está funcionando ou não. Então, vamos voltar ao navegador. Atualize esse aplicativo. Vamos pensar que te dei no coquetel o nome Adam. Você pode ver que temos apenas o coquetel com a palavra-chave Adam. E você também pode ver as informações sobre esse coquetel em particular. E a volta também está funcionando. 28. Projeto 3 Carrinho de Compras - App Demo: Olá a todos e bem-vindos a esta seção na qual aprenderemos como podemos realizar todos os tipos de operação de carrinho de compras com o kit de ferramentas do leitor no aplicativo React. E também vamos usar o Redux persist aqui com o kit de ferramentas 3D para manter o valor do item do carrinho de compras. Sempre que você reformular o aplicativo, o valor será per se. Então, vamos fazer uma rápida demonstração desse aplicativo, que vamos trabalhar nesta seção. Então este é o nosso carrinho de compras. E se você aumentar a quantidade, então você pode ver que o total está sendo atualizado aqui. E a comunidade em nossa cartilagem também está sendo atualizada. Então, todos os lugares estão atualizados. Sempre que você atualiza a quantidade e diminui a quantidade. Então, isso também está funcionando. Você pode ver que a quantidade do nosso cartão está sendo atualizada e que essa quantidade indesejada também está sendo atualizada. Você também pode remover o produto do carrinho de compras. Então, ao clicar nesse ícone, esse item será removido do nosso carrinho de compras. E o valor total será atualizado e a quantidade também será atualizada. Você também pode remover o item deste cartão se clicar nele novamente, pois temos apenas uma quantidade. E se você clicar novamente nessa seta para baixo, dessa forma também, ela será removida desse carro que a pegou. E você também pode limpar o carrinho clicando neste botão. Você pode ver que agora nosso software codificou a entrada t. E se você quiser obter todo o item novamente, então seu projeto clique neste botão. E, novamente, você pode realizar a mesma operação, como aumentar a quantidade ou diminuir a quantidade. E todo esse valor será atualizado. Então, vamos escrever uma reação redox diferente e diferente com a ajuda do kit de ferramentas Frieda. E também vamos manter o cartão de compras inteiro. Então, se você atualizar este aplicativo, para ver que nosso carrinho de compras persiste aqui, e assim por diante, persistindo, estamos usando a porcentagem Redux. Então, você também aprenderá como usar o paradox persist com o kit de ferramentas do editor neste aplicativo React. Portanto, esse é o aplicativo geral que vamos criar nesta seção. Então, nos vemos no próximo vídeo onde vamos configurar nosso produto cardíaco. 29. Project 3 Carrinho de Compras - Set-up: Gente, vou criar um projeto aqui. Então, eu estou neste diretório. Então, eu vou abrir um terminal. E vamos criar um projeto e o aplicativo Vx Create React. E o nome do meu projeto será carrinho de compras. Ok. Então esse será o nome do meu projeto. E vamos aguardar a criação do projeto. Levará cerca de dois a 3 minutos para concluir esse processo. Então, eu voltarei. Depois que esse processo for concluído. Pesquisas, nossa configuração do projeto agora está concluída. Então, primeiro vamos entrar nessa pasta que é carrinho de compras. E precisamos instalar alguns pacotes antes de começarmos a trabalhar nesse aplicativo. Então, vamos usar o kit MDB react UI. Para trabalhar em nosso componente. Precisamos redigir o kit de ferramentas. Também precisamos do React redux. Também precisamos do redox. E também precisamos que seus dutos persistam porque vamos manter nosso item de carrinho. Então, vamos aguardar a instalação do pacote e eu voltarei um duodécimo depois que o pacote for instalado. Então pessoal, nossa pipeta de cortisol. Então, vamos fazer primeiro. E Kenneth Clark e eu já abrimos esse projeto no meu código do Visual Studio. Então, vamos entrar no VS Code. Você pode ver que abri o projeto no meu código VS. Então, instalamos esses pacotes. Kit de ferramentas, react, redox, redox, redox persistst e MDB reage a você. Eu poderia. E nosso aplicativo está sendo carregado no navegador e em nosso projeto e foi carregado com sucesso no navegador. Agora, vamos ao VS Code First. E vamos fazer uma limpeza primeiro. Portanto, não precisamos desse. Ok. E vamos dar, por enquanto, o carrinho de compras, ok. Não precisamos desse logotipo, então vamos remover este. Vamos excluir esse arquivo. Vamos colocar nosso index.js e aqui está tudo bem. E vamos criar algum arquivo e pasta. Então, vamos ter uma pasta redex. E nós vamos ter algum arquivo aqui. Então, vamos ter o navbar NodeJS. Teremos uma barra de navegação, um contêiner de cartão. E vamos pegar nosso item e inserir o Redux. Vamos ter uma loja com pedágio. E você terá um recurso de pasta. Recurso interno, teremos nossos slides. Estamos lidando com o carrinho, então será Slice, slice dot j. Ok? E vamos até o arquivo app.js e vamos verificar se esse zumbido refletido ou não. Já que estamos usando aqui um Bootstrap de design de material. Portanto, precisamos trazer um arquivo CSS para nossa guia Material Design. Vou colar a declaração de importação do CSS ou o material não moveu o clube. Então, esse, precisamos colá-lo aqui. Agora, se você acessar o navegador, verá que isso se chama mudança. Isso significa que conseguimos configurar com sucesso o Bootstrap de design de material em nosso aplicativo. 30. Carro de Pedidos - Configure a RTK: Agora, vou configurar o kit de ferramentas do leitor neste aplicativo. Em seguida, vamos começar a trabalhar nesse componente que é o contêiner do cartão de identificação do item do carrinho de navegação. Então, vou começar a configurar o kit de ferramentas de redação neste aplicativo. Então, vamos para o arquivo Slash dot js do carrinho. E você precisa trazer vida criativa. Reduza o kit de ferramentas, crie slides. Nós precisamos. E depois disso, predefinimos nossa fatia, fatia. Fatia. Somos um nome predefinido, então será cartão. Ok? Em seguida, temos que definir o estado inicial do nosso aplicativo. Então, eu vou ter itens. Então, basicamente, ele terá todo o item do produto. Então, vou escolher uma falha de dados na pasta de origem. Então, esse arquivo de dados que precisamos aqui sob esta fonte, ok. Portanto, ele contém quatro produtos com título, preço e quantidade. Então, inicialmente, estou definindo que a quantidade é uma. Então essa é a quantidade. Ok? Agora vamos para os cartões como o arquivo JS e temos que trazer o arquivo de dados aqui. Importamos dados e podemos participar desta. Ok? Então, inicialmente vamos, então o quarto produto em nossa página, depois disso, teremos a quantidade total, ok? Inicialmente, será zero e a contagem total. Isso também será zero. E teremos um redutor dentro do qual escreveremos nosso real. Inicialmente, será empatia. Vamos exportar esse slide. O padrão de exportação. Cart Slice, ensinado a ler, disse: Ok. Agora vamos até este arquivo dot js da loja. E aqui temos que trazer a porta da garagem amanhã. Kit de ferramentas de redação. A partir do kit de ferramentas de redação, precisamos trazer a loja configurada. Agora, também precisamos usar nosso redutor de carrinho a partir dessa fatia de cartão dobrada. Depois disso, temos que basicamente exportar nossa loja. Então, vem a porta configurando a loja. E vamos ter um redutor. Então, basicamente acessaremos o estado que definimos dentro desses cartões, luz ou arquivo JS com o cartão-chave. Então, vamos atribuir esse carrinho, reduzi-lo ao carro. Portanto, a configuração da nossa loja está concluída. E agora temos que julgar por essa loja, a loja padrão de exportação. E na última etapa, temos que fazer algumas configurações dentro do nosso arquivo index.js. A partir do React redux, precisamos colocar o provedor em primeiro lugar. Então, vamos trazer o provedor para conectar nosso aplicativo React ao redex. E podemos simplesmente colocar esse componente do aplicativo, na verdade esse provedor. E também temos que trazer esse passeio. Vamos para esta pasta. E podemos fornecer essa história ao nosso provedor. Vamos salvar esse arquivo e verificar se nosso leitor liquidus nos permite totalmente configurado ou não. Então, vamos ao navegador. Não temos nenhum erro. Isso significa que dois líquidos foram configurados com sucesso. Você também pode verificar com a redução dúctil, se você tem uma altura desse DevTools em sua extensão do Chrome. Se você abrir este. Agora você pode ver que temos nosso estado inicial. Você pode ver que temos um produto dentro deste item. Tudo bem, isso significa que configuramos com sucesso nosso kit de ferramentas de redação neste aplicativo React. Portanto, a parte de configuração do kit de ferramentas de redução ainda está concluída. Agora vamos começar a trabalhar em componentes um por um. Então, primeiro começaremos a trabalhar em nosso arquivo nav bar dot js. 31. Projeto 3 Carrinho de Compras - Navbar: Agora vou começar com esse componente Navbar. Então, fornecia menos do que um trecho dendrítico aqui. Ok? E em app.js, teremos nosso componente Navbar e o contêiner do cartão. Ok? Então, vamos trabalhar nisso e podemos trazer nosso número com competência para apenas. Vamos salvar esse arquivo primeiro. E então podemos trazer essa barra de navegação. Portanto, o código VS importa automaticamente esse componente. Você pode verificar este. Então você pode ver que está funcionando. Agora, vamos para esse componente vizinho. E aqui temos que trazer algum componente do nosso bootstrap de design de material do MTV react UIKit. Precisamos trazer MDB, contêiner MDB, MDB, link da barra de navegação, MDB, marca navbar, emblema MDB. Ok? Então, todo esse componente de que precisamos. Depois disso, o que temos que fazer. Portanto, também temos que nos trazer um seletor e um grande despacho de nossa reação para fazer o próximo. Vamos trazer essas coisas primeiro. Já definimos o estado inicial dentro deste carrinho. Então, podemos tratar esse estado, ok? Em terceiro lugar, nosso arquivo dot js da barra de navegação. Então, dentro da barra de navegação, temos uma sacola de carrinho na parte superior, à direita. Ok, então aí temos dois. Então, a contagem total. Assim, podemos ler o valor do status com a ajuda de um grande selecionado. E exploramos o redutor com o cartão-chave. Ok? Podemos aceitar o estado apátrida capturado às escuras. E podemos capturar a contagem total. A partir de agora, será apenas zero. Então, vamos trabalhar nesse componente Navbar. Vou usar o fragmento aqui. E eu vou usar o número IMDB. E aqui ele será expandido. Alergia de cor escura. Eu vou te dar o primário. Ok. Em terceiro lugar está o número IMDB. Eu vou ter um contêiner IMDB. E então teremos a marca Navbar IMDB, ok? E aqui podemos dar um cartão de compras como um kit de ferramentas redox. Ok. E na terapia , temos que passá-los. Se for estilizar, vou dar um estilo como uma linha. O item será centralizado. Vamos mostrar. Vamos dar flexibilidade à tela e justificar o espaço entre elas. Vamos salvar esse arquivo e podemos verificar essas alterações. Então você pode ver que estamos comprando esta, nossa bela barra de navegação. Agora, depois disso, teremos o MDB, agora Berlim. E então eu vou usar aqui uma tag com o nome da classe MX, hífen três. Com a Itália, estou usando aqui o nome da classe bootstrap. E podemos ter o ícone do MDB. E eu vou usar os ícones do Font Awesome. Então, eu preciso colocar uma folha de estilo para habilitar o Font Awesome. Portanto, esse estado de crista é necessário para ativar um único torso. E dentro desse ícone do MDB, teremos um MDB ruim. Ok, vamos obter algum lucro no ícone MDB de Faraday. Então, estamos usando o ícone Font Awesome. E eu posso usar o equipamento que vou usar aqui para trocar cartas. Ok? O tamanho será grande. E a cor que vou usar aqui, certo. Agora, dentro está o valor do MDB. Temos que fornecer essa entrega. A cor será o perigo que aumenta o vermelho. Notificação, desculpe, até será uma notificação. E temos que dar um pouco de cada ladrilho para o interior. E eu vou dar o tamanho da fonte de 12 pixels. E aqui estamos mostrando pelo menos a contagem total, ok? E podemos verificar se está funcionando ou não. Então, vamos entrar no navegador. Agora você pode ver que está funcionando. Podemos ler esse valor zero em nossa loja. E atualmente não temos nenhum item no carrinho, então está indo para zero. Portanto, nossa barra de navegação é complicada aqui. E eu acho que essa enorme disparidade não é necessária. Mas vamos remover esse. Portanto, a parte da barra de navegação está concluída aqui. Agora vamos trabalhar em nosso contêiner de carrinho. 32. Projeto 3 Carrinho de Compras - Cart Design: Então, agora vou começar a trabalhar nesse componente de contêiner de cartão. Então, vamos enviar um trecho para cá. Então, primeiro, precisamos trazer um grande efeito, ok? E, novamente, precisamos aqui de um grande envio e uso selecionados de nossa reação a esse enorme seletor. Normalmente despacho. E precisávamos trazer algum componente do nosso material para o bootstrap. O componente que precisamos aqui, MDB, ícone MDB. Ok? Portanto, somente esses dois competentes precisam importar de nossa viagem de design de material. E aqui está o que temos que fazer. Então, primeiro, precisamos extrair algum estado que temos em nosso sistema e que temos em nosso arquivo cart slash dot js. Vamos usar aqui o seletor usado. E podemos sair do estado com o cartão de ponto estadual. Então, precisamos aqui de itens e valor total. Ok? Agora, o que temos que fazer. Então, vamos remover esse. Eu vou ser cada fragmento. E se você tiver os itens , eu vou soldar. Então agora o que eu vou fazer. Então, primeiro, vou agora usar sua tag H2 com o nome da classe lead hyphen, md, hyphen, md hyphen two. E eu vou te dar um título como seu carrinho de compras. Agora, temos quatro produtos dentro deste item. Então, vou usar esse componente dentro desse contêiner de cartão. Então, por enquanto, vou apenas gerar um trecho aqui. Vou trabalhar mais tarde. Ok? E aqui temos o item, então itens, item do mapa de pontos. E podemos devolver aqui o item do nosso carrinho. Ok? O código VS importa automaticamente esse componente e a chave. Vou rastrear ainda o ID do ponto do item. E eu vou diminuir a altura. Portanto, esses dados materiais indicam o preço do título do conteúdo. Ele o fez em Tóquio. Então, vamos salvar esse arquivo e entrar no navegador para inverter este. Portanto, esse componente não está dizendo que precisamos realmente acessar nosso arquivo app.js e trazer esse componente do contêiner do cartão. Vamos salvar esse arquivo. Agora vamos ao navegador. Agora você pode ver que esse componente do item do carrinho está sendo renderizado aqui. Portanto, temos quatro itens no arquivo de dados dot js. Portanto, está renderizando por tempo. Ok? Depois disso, temos que trabalhar neste arquivo dot js do item do carrinho. Então, agora vou começar a trabalhar nesse componente de item de carrinho. Então, aqui temos que trazer o efeito Hughes. E, novamente, precisamos trazer essas duas coisas. Então, há duas coisas que precisamos trazer. Eu vou usar aqui também. Então, vamos trazer aqui. Ok, agora, vamos remover este. E eu vou usar seu estilo embutido. Então eu vou usar aqui 70 e largura de visualização, ok? Largura máxima, vou usar aqui 90, então estará dentro da margem de aspas duplas. Eu vou te dar um zero pixel e um automático. Agora, dentro desse div, vou ter mais um div com o nome da classe. Emprestar. Novamente, eu vou ter e, novamente, vou ter um estilo embutido. Margem. Topo. Então, serão dez pixels. Ok, vamos formatar este. E dentro desse div, vou ter mais um div com o nome da classe. Todos os hífen SM hífen para. Esse composto receberá adereços porque estamos espalhando todo o item dessa forma. Então, ele receberá adereços aqui, como ID, imagem, título, preço e valor. Então, vou usar uma tag de imagem. Em terceiro lugar, posso fornecer esta imagem e, alternativamente, posso fornecer seu título. Vou usar aqui no LastName, fluido de imagem. E o estilo que vou usar aqui, ajuste de objeto, capa. Vamos formatar esse. Eu vou ter largura e altura. Vou ter apenas meu auge. Ok? Agora, depois dessa fita, vou ter mais um dia com a coluna hífen sm hífen dois. E vou fornecer a margem como suporte. E aqui eu vou ter a tag h5. Dentro disso, eu vou ter um título. Então, vamos verificar isso por enquanto, esteja funcionando ou não. Então, vamos ao navegador. Agora você pode ver que podemos exibir o item for junto com o título médio. Agora, depois dessa tag h5, vou ter mais uma tag h5. E esse será o preço. Ok? E aqui eu vou dar um pouco de cor. Então, a cor que vou usar aqui tem 61, 70, 98. Ok, vamos ver como fica. Então, nossos preços estão sendo exibidos ainda. Agora vou ter um ícone aqui, ícone MDB. E eu vou usar uma fonte ainda incrível. E esse será o estilo de ícone de rascunho que vou dar aqui, esse ponteiro e cor. Eu só vou te dar um vermelho. E esse MDB eu converti com um self close. Ok? Agora, depois dessa tabela, vou ter mais um div com o nome da classe chamado fn neles. Eu achei isso. E, novamente, vou usar o IMDB. Mas eu só posso. Será como flecha para cima. Ok? Então, eu vou usar aqui perto da Chevron. E podemos remover essa cor não é necessária aqui. E então eu vou mostrar a quantidade aqui que vou usar a tag p. E dentro dela eu vou dividir a quantia. E vou dar a eles uma linha se a margem do ladrilho, no topo, for de dez pixels. E depois disso, também vamos usar a seta para baixo para basicamente diminuir a quantidade do item. E isso basicamente aumentará a quantidade do item. Então isso vai cair, divisa abaixada. E acho que é isso por enquanto. Podemos verificar se está funcionando ou não. Então, vamos entrar no navegador. Então está funcionando. Você pode ver que temos setas para cima, setas para baixo ou incentivando ou degradando a quantidade de itens. Então, agora aqui temos dois. Então, o valor total também. Temos que continuar trabalhando neste arquivo dot js do contêiner do cartão. Então, depois disso, vou tomar água. E nós vamos ter uma linha horizontal. Então, quanto à etiqueta. Então, vou fornecer um estilo milenar. Então, será como exibir, flexionar e justificar o conteúdo. Espaçar uniformemente. E a margem direita será de 50 pixels. E aqui eu vou ter a etiqueta de abrangência total. E podemos ver aqui o valor total. E isso será inserido em D. Ok, então vamos colocar este dentro de um div. Neste div, vamos ter MDB, btn. Agora, dentro desse MDP com ele, vou passar instruções para eles, então pinte. Será um perigo. Com um clique, teremos. Então, definiremos o OnClick posteriormente. Então, por enquanto, vamos remover esse. E vamos ter cada peça. Portanto, será de largura um para uma célula típica. Ok? E vamos ter uma margem superior. Então, serão 50 pixels. O botão é valioso com um cartão transparente. Você também pode remover todo o item do carro. Então, vamos salvar esse arquivo e entrar no navegador. Agora, você pode ver que está funcionando. E, a partir de agora, a demanda é zero. Esse também é zero porque não definimos nenhuma ação para atualizar todo esse valor. Ok? Então, agora vamos começar a trabalhar em cada hidrodissecção para aumentar a quantidade ou diminuir a quantidade ou remover o item do carrinho. Ou se você quiser remover todos os itens do cartão , você também pode fazer isso clicando neste botão. Temos que definir a ação para cada operação. Até agora, vou escrever uma ação para obter o total do carrinho. Temos uma quantia para cada produto, então eu queria mostrar o total desse cartão. Ok. 33. Project 3 Carrinho de Compras - Carrinho Total Action: Então, vamos começar a trabalhar em nossa ação de redação do kit de ferramentas. Agora vou escrever uma ação do kit de ferramentas para obter o valor total do item do carrinho. Dentro desse redutor. Eu vou ter essa reação redox. Então, vamos ter um máximo de luz e obter o total do carrinho, ok? Um por ter apenas um estado. E ainda assim, quando definir uma variável, liste itens. Então, vou texturizar a quantidade e a contagem total do hotel. E eu vou usar o método ainda reduzir. Portanto, o método de redução com a Itália executa algum tipo de operação em todos os elementos da matriz e ele produzirá um único valor com base nessa matriz. Então, aqui vou ter o total do carrinho e o item do carrinho. Ok? E então , a partir do item do carrinho, vou ter esse preço e valor. Ok. Em seguida, custou o item, o preço total e pegou todos eles. Então, estou apenas aplicando uma matemática ainda simples aqui para calcular o valor do isqueiro da cota. E depois o carrinho. O valor total é igual a, então será mais é igual ao total. E a mesma coisa que farei com nossa contagem total também. Então, carrinho, total, contagem total e quantidade, ok? Entre aqui não há nada além de quantidade, ok? Então, podemos retornar o total. Ok? Agora também precisamos fornecer o valor inicial. Portanto, o valor total e o total encontrados serão zero, serão um. E depois disso, temos que atualizar nosso valor total e contagem total. Vamos supor que nosso valor total é igual a Eu vou desempenhar um papel em dígitos e mandar ele consertar. Então, vou fixar o valor total de 22 casas decimais. E não é. A contagem total é igual à contagem total. Ok? Então, isso está concluído. Agora temos que exportar essa constante de exportação real. E relacionará o slide do cartão com o total real do cartão. Agora podemos usar essa ação aqui no arquivo dot js do contêiner do cartão. Portanto, temos que usar dentro do nosso efeito de uso. E precisamos primeiro que a referência da unidade seja dividida em uma variável de despacho. Só então poderemos desesperar esse sotaque. Então, despache, pegue o carrinho, no total. Então, o código VS me sugeriu automaticamente essa ação de redex. Ele será importado automaticamente. Se não for importante automaticamente para você, você precisará importá-lo manualmente. Então, vamos ao navegador. Agora você pode ver que podemos ver a quantidade total desse produto, o que está correto. Portanto, quantidade total de produto na interrupção da parada cardíaca. Você pode ver isso aqui, porque inicialmente quantidade de itens do nosso carrinho é uma, ok? Então isso está concluído, ok? 34. Projeto 3 Carrinho de compras -aumentar, diminuir e remover a ação: Agora, a próxima ação que temos que definir para aumentar o item atual. Então, se você clicar nessa seta, ela aumentará. E o preço também será atualizado junto com o valor desse carrinho. Então, primeiro vamos definir a ação para aumentar a quantidade do item. Então, vou definir a ação aqui em cinza, a quantidade de itens do carrinho. Então, aqui eu vou ter aumentado e continuado com a ação. E então eu vou ter um estado de itens de pontos, itens, mapa de pontos. Eu vou comprar um item. E temos que verificar se ID do ponto do item corresponde à carga do ponto de ação. Carga útil. Nada além de ser o ID. Portanto, posso fazer com que o ponto paralelo contenha a ideia de que enviaremos do nosso componente. Então, se cheirar mal , só temos que aumentar a quantidade, ok? Então, nesse caso, o que temos que fazer, uma devolução, vou distribuir o item e atualizar a quantidade do item ponto m mais um. E podemos devolver o item. Então, isso é computado. Agora temos que enviar essa ação. Então, exporte este arquivo. E podemos usar este dentro do nosso arquivo dot js do item de carrinho. Então, novamente, elevamos a diferença de geralmente ser dividido em uma variável de despacho. Só então poderemos enviar uma ação. Então, esta é a Chevron Up. Isso significa que podemos aumentar a quantidade do item, o clique que temos que fornecer aqui. E eu vou dissipar esse aumento de épsilon. Portanto, o código VS é sugerido automaticamente com essa ação. E vou passar a identificação de que estou recebendo um ano outros adereços do nosso componente de contêiner de cartões. Vamos salvar esse arquivo e ir para o navegador. Atualize este. Agora, se aumentarmos esse. Então você pode ver que isso está aumentando, mas nosso cartão e essa quantidade de cartões não estão sendo atualizados. Então, o que temos que fazer é basicamente fazer algumas mudanças em nosso efeito de reutilização. Portanto, essa ação sempre será enviada sempre que tivermos alterações na quantidade. Assim, podemos passar os itens nessa dependência. Então, sempre que alguma alteração acontecer na matriz de itens, isso basicamente será acionado, ok? E obteremos o valor total atualizado do item junto com a quantidade total. Então, vamos entrar no navegador e atualizar este. Agora, vamos aumentar a quantidade. Então, como você pode ver, ele está sendo atualizado. E, no entanto, também foi atualizado para cinco. Você pode ver que está sendo atualizado. Agora, vamos basicamente implementar a funcionalidade de remover o produto desse carrinho de compras. Agora, na próxima seção, vamos tentar remover o produto do nosso carrinho de compras. Então, podemos tentar aqui, na verdade. Então, teremos removido e teremos um estado junto com a ação. E itens de pontos estaduais e itens de lote estaduais. Filtro de pontos. Nós vamos receber seu item. E temos que escrever aqui uma lógica básica, como se o ID do ponto do item não corresponder à ideia que estamos recebendo do componente, então temos que manter todos esses itens e remover o cartão de compras do item específico. Isso filtrará esse item, sairá o cartão de compras. E vamos exportar esse. Agora, podemos usar essa ação dentro do arquivo dot js do item do carrinho. Então, aqui vamos ter o onclick. Podemos simplesmente enviar esse. Remova o código VS sugerido automaticamente nesta seção. E podemos passar o documento de identidade. Vamos entrar no navegador. Esse aqui. E se você clicar nesse ícone de exclusão, que será excluído, o valor do carrinho será atualizado. Este carrinho de compras também está sendo atualizado. Então isso está funcionando. Você pode ver isso. Então, agora a próxima coisa é basicamente trabalhar em nossa quantidade reduzida. Portanto, temos que trabalhar com essa funcionalidade. Então, se você clicar nessa seta para baixo, a quantidade diminuirá. E se você tiver apenas uma quantidade, e se clicarmos novamente nela, na seta para baixo, ela será excluída do nosso carrinho de compras. Então também temos que cuidar dessa coisa, ok? Agora vou escrever, irrita o sotaque por diminuir a quantidade. Então, vou copiar este. Ok? Será quase idêntico. Nós somos uma coisa de combustível de aviação ascendente. Será diminuído. E desta vez, queríamos diminuir a quantidade se o ID correspondesse. E também queríamos fazer mais uma coisa. se você tiver apenas uma quantidade e clicar novamente na seta para baixo , ela será removida do nosso carrinho de compras. Então aqui podemos fazer como filtrado, ok? E podemos conferir aqui. Se eu virar ponto entre, não é igual a zero. Isso significa que se tornar zero, ele será removido do nosso carrinho de compras. Digamos que remova este. Digite onde quer que eles exportem este. Vamos usar essa ação dentro do arquivo dot js do item do carrinho. Então, aqui podemos usar o OnClick. Então, será diminuído. O código novamente é sugerido automaticamente sem ação. E eu vou passar o documento de identidade. E temos que basicamente entrar no despacho. Ok, então eu vou cortar essa. E eu vou ficar em terceiro e despachar. Só então funcionará. Vamos até o navegador. Atualize este. Vamos incluir esse. Vamos graduar este. Clique neste. Está sendo atualizado. Isso também determinará a atualização. E se você clicar novamente, esse item será removido do nosso carrinho de compras. Então, isso também está funcionando. Dessa forma. Além disso, você pode remover itens do cartão de troca. Ambos estavam trabalhando. Eles dizem que está pronto. Agora temos que trabalhar nesse cartão transparente. Se você clicar neste cartão transparente , todos os itens serão removidos. 35. Projeto 3 Carrinho de compras - Ação vazia: Então agora vou escrever um cartão de dados de entrada de barras fracionárias, ok? Portanto, ele pode ter um cartão claro e transparente. Ok? Bem, não ter um estado e um estado pontilham itens a dois. Ok. Vamos exportar essa ação. Cartão tão claro. E temos esse botão dentro do recipiente do nosso cartão. Ok? Portanto, podemos ter um método onclick e exibir esse cartão transparente de ação. Ok. O código soviético, novamente, automaticamente me sugeriu essa reação redox. Vamos salvar esse arquivo e entrar no navegador, ler verificar este. Neste, clique neste cartão transparente. Então agora nossa festa cartesiana, e se o carrinho estiver vazio, então, eu não quero que faça essa coisa, ok, então eu queria nadar. Eu digo como seu carrinho de compras na entrada. Então, aqui podemos verificar se o comprimento dos pontos dos itens é igual a zero, isso significa que temos um item zero no carrinho. Nesse caso, eu queria retornar como se seu top codificasse a entrada t. Vou usar a tag h3 com o nome da classe. E eu vou ter mais classe e ainda assim alguma margem. Os quatro melhores, ok? E podemos te dar o que você está ajudando. E eu vou usar seu ícone. Normalmente vou ser Span Tag. E eu vou ter o ícone do MDB. E a terceira é que eu posso, vou usar algum ícone. E eu posso ser como fazer compras em Heisenberg. E depois dessa tag span, vou selecionar a entrada D. Você pode ver que podemos ver esse método. E eu queria adicionar um botão aqui para pegar todos os itens do cartão. Então, se você quiser usar mais este aplicativo, você também pode começar do zero encaixando todas as cartas do dedo do pé irlandês. Portanto, podemos ter um botão aqui após essa tag h3. Então MDB, btn. E será ter itens bons para as pernas. E nome da classe. Eu vou te dar um hífen mx também. Ok. E vamos ver aparência do nosso botão. Está tudo bem, ok. Agora, temos que escrever uma seção básica de leitura para obter todo o carrinho da nossa loja. Então, aqui eu vou escrever uma reação redox basicamente para obter todos os itens. Ok? Podemos tentar a detecção. E, felizmente, podemos fazer como se os itens de um ponto de estado fossem iguais aos dados. Ok? E podemos exportar essa ação. Obtenha itens do cartão. Podemos usar a detecção dentro deste arquivo dot js do contêiner do cartão. E aqui podemos usar o método de clique. Podemos dissipar isso. Despache, pegue itens de guarda. Vamos salvar esse arquivo. E vamos entrar no navegador. Agora, vamos clicar nesse cartão transparente. Independentemente disso, meus três, como você, estão parando para se tornar amigos. E se clicarmos nesse item da grade, você receberá de volta todo o item que temos em nosso arquivo de dados dot js. Dessa forma, você também pode usar esse aplicativo. A funcionalidade está concluída. Você pode ver que tudo está funcionando conforme o esperado. 36. Projeto 3 Carrinho de compras - Persista o valor do carrinho com o Redux-Persist: A última coisa que fica clara se você estiver se referindo a essa obrigação. Então, eu queria manter todo o valor como total junto com esse valor e esse valor. Então, vamos usar aqui para manter todo o valor da carta. Então, se você leu este por enquanto, ele será reiniciado. Então, queríamos terminar o valor da carta. Então, vamos usar root x, continue com o kit de ferramentas do leitor. Então pessoal, agora eu vou configurá-lo. As rejeições persistem neste aplicativo React. Então, o que posso fazer aqui, primeiro, precisamos trazer um depósito. Portanto, já instalamos esse pacote no início. E também precisamos que o número do redutor persista. Persista em um redutor. E precisamos de combinador, redutor do nosso redox. Então, combinamos isso de hoje de Madrid x. Agora, temos que escrever aqui: persistir configuração, persistir conflito. Temos que dar a você um papel fundamental na primeira versão. E temos duas partes de armazenamento. Agora temos que usar esse redutor combinado. O redutor é igual à borracha combinada. E podemos ser regulamentados por este cartão. E você pode colar aqui. Ok? E então você tem que persistir em nosso redutor. Portanto, o redutor persistente é igual ao redutor persistente. Temos que passar a configuração, essa configuração, e depois temos que empacotar o redutor. E aqui podemos usar esse. Ok? Agora também precisamos fazer alguns ajustes dentro desse arquivo index.js. Então, aqui está o que temos que fazer, então, a partir do redex persistir, precisamos trazer uma loja persistente. E também temos que importar persistir e portar. Teste Redux PR. Temos que ir para a integração e reagir. E isso vai persistir. Agora, depois disso, optamos por usar isso, mas isso pode acontecer, temos que embrulhar nosso componente com a porta AND comprada e depois persistir. E aqui temos que usar o LED para a loja. E podemos passar aqui em dois. Ok? E podemos fornecer ainda praticados. Então, vamos salvar esse arquivo e verificar este no navegador. Atualize este. Portanto, não temos nenhum problema. Então, vamos realizar todas as operações. Então isso está funcionando. Então, total é obter detalhes. Este também está ficando melhor. Agora, deixe-me atualizar esse aplicativo. Então você pode ver que depois substituir nosso valor r está persistindo aqui. Portanto, o valor total também está persistindo. O quantitativo também persistiu e quantidade total no carro que eles também persistiram. Portanto, também conseguimos manter o valor do cartão com sucesso neste aplicativo. Agora espero que você tenha entendido a funcionalidade do carrinho de compras com a ajuda do kit de ferramentas Verita neste aplicativo React. 37. Aplicativo de blog do Project 4 - demonstração: Nesta seção. Primeiro, abordaremos alguns conceitos básicos sobre o kit de ferramentas Redux criando esse aplicativo de blog simples no qual o usuário pode postar um blog ou pode gostar ou não de um blog específico Com a ajuda deste aplicativo, você terá uma ideia básica sobre como trabalhar com o kit de ferramentas de redução em um aplicativo de reação Para este projeto, usaremos um código inicial para criar esse aplicativo usando o kit de ferramentas de redução. Nos vemos no próximo vídeo onde falarei sobre o código inicial Além disso, darei uma breve visão geral sobre o código inicial que usaremos nesta seção É isso aí, a partir desta parte de introdução. Te vejo no próximo vídeo. 38. Aplicativo de blog do Project 4 - Visão geral de código: Gente, é hora de começar a trabalhar em nosso primeiro projeto com o kit de ferramentas vermelho. Nesta força para este projeto que vamos construir, o kit Redo, forneci um código-fonte que está anexado a esta palestra Você pode descobrir o código-fonte desse projeto inicial antes prosseguirmos e escrevermos algum código Deixe-me dar uma breve visão geral sobre esse código inicial Eu criei este projeto usando esse modelo de redução. Você não precisa fazer essa etapa. Eu já forneci o código-fonte que está anexado a esta palestra. Vamos voltar ao código VS. Você pode ver que eu tenho um como arquivo. Eu também usei aqui o bootstrap, para que possamos evitar escrever código CSS No lado esquerdo, temos um formulário em bloco a partir do qual podemos publicar nosso blog. No lado direito, estou renderizando a lista de blogs que é enviada por este formulário de blog No momento, temos apenas um título. Se eu voltar para o navegador, você pode ver que no lado esquerdo temos um formulário de bloco e lado direito temos uma lista de blogs na qual vou renderizar todos os blogs. Vamos voltar ao código VS novamente. Aqui temos o arquivo JS de índice. Temos aplicativo e recurso no aplicativo, temos uma configuração de loja. No momento, não temos nenhum redutor. Isso está vazio. Temos uma pasta de recursos na qual tenho uma pasta de blocos na qual tenho formulário e lista de blogs. Ok, este é um formulário muito básico que eu escrevi aqui para que o usuário possa publicar o blog. Aqui, acabei de fornecer o código-fonte desse arquivo para que possamos nos concentrar mais em aprender o conceito do kit de ferramentas vermelho Aqui temos uma forma muito básica. Temos uma lista suspensa para selecionar o usuário. Temos um campo de entrada para o título e um corpo para o nosso blog. Agora também temos uma lista de blogs. Ok, então, no momento, estou renderizando os dois blocos desse componente em si. Ok, aqui também temos um usuário do blog. Também vamos mostrar que este blog foi criado por qual usuário? Ok. No momento, está tudo bem. E temos um botão de resposta aqui. Basicamente, você pode gostar ou não do blog, esse é um componente muito básico. Agora vamos voltar para esse arquivo GS de índice. Basicamente, estamos fornecendo a loja ao nosso aplicativo para que nosso componente possa acessar o estado, que vamos definir em nossa loja. Anteriormente, eu já informei que neste projeto vou usar uma versão cinco do bootstrap Eu já escolhi o CDN ou a versão cinco do bootstrap, para que possamos evitar escrever neste projeto Agora vamos falar sobre esse pacote, arquivo Json também Aqui temos esse kit de ferramentas de redução e redução de reação, que são importantes para trabalhar com o kit de ferramentas de redução em um aplicativo Eu já tenho essas duas dependências. Sempre que você configura um projeto de reação com esse comando, sempre que cria um projeto de reação com esse comando, você obterá essas duas dependências junto com outras Essa é a ferramenta de redução e redução de reações. Isso é tudo sobre a visão geral desse projeto inicial de blocos 39. Aplicativo de blog do Project 4 - Blog Slice: Agora vamos começar a trabalhar nessa simples obrigação do blog. Primeiro, vou criar uma fatia aqui que será como blogs Liz, vou importar uma fatia do slide vermelho Basicamente, é usado para definir nosso estado inicial, ação e redutor. Para isso, estamos criando uma fatia, crie uma fatia. Precisamos trazer depois disso, o que precisamos fazer aqui, temos que definir uma fatia do bloco Podemos usar essa fatia de criação, que não pode ser objeto, e precisamos definir um nome de fatia Vou dar um nome de fatia aqui, bloco, teremos o estado inicial Está bem? Então, deixe-me definir um estado inicial aqui, somente a partir desse arquivo JS da lista de bloqueios. Eu só vou cortar esse, ok? E eu vou colar isso aqui. Deixe-me renomear para o estado inicial. Ok, obtivemos nosso estado inicial, agora vamos ter um redutor no qual escreveremos uma ação no momento, deixe-a ser animal de estimação Deixe-me exportar este único controle de bloqueio de falhas. Estamos exportando esse redutor. Vamos conectar esse redutor ao arquivo Js da nossa loja. Ok, deixe-me voltar para esta pasta do aplicativo aqui. Vou trazer aquele redutor de bloqueio. Redutor de bloco aqui. Temos que ir para essa pasta e blocos de recursos e usar esse arquivo. Agora podemos conectar nosso redutor neste objeto redutor. Então, blocos, podemos dar qualquer chave, o que você quiser. Então, estou cedendo blocos, podemos simplesmente atribuir blocos. Redutor. Vamos salvar esse arquivo aqui. Tudo está bem, eu acho, ok. 40. Project 4 Blog App - liste blog com useSelector: Agora vamos ver esse arquivo de lista de blogs aqui. Primeiro, vou trazer um seletor do react reader. Porque precisamos selecionar o estado que definimos nas mentiras deste blog. Para isso, precisamos, vamos trazer aqui o seletor Então, podemos selecionar nossos blogs e blogs. Aqui podemos acessar todo o nosso bloco a partir desse bloco de estado porque nosso redutor está registrado com os blocos de teclas aqui Ok, agora temos todos os nossos blocos. Ok, estamos usando essa função de bloco de renderização para renderizar todo o blog. Temos conteúdo do título de identificação. Ok, usuário do blog. Então, no momento, não temos basicamente nenhum usuário. OK. Nesta vida, você pode ver que isso apenas fará com que o usuário desconhecido fique bem. Escreveremos a lógica da carta do usuário neste projeto. Primeiro, vamos nos concentrar em alugar o blog. Em nosso aplicativo, pegamos esse blog da nossa loja e estamos renderizando o blog usando essa função Vamos acessar esse arquivo de aplicativos e remover esse título artístico codificado, e eu vou trazer o componente da lista de blogs Ok, então deixe-me salvar esse arquivo, vamos para o navegador agora. Aqui você pode ver que obtivemos nossos dois blocos que definimos neste arquivo js de arquivos de blocos. Ok, temos esses dois blocos iniciais. Esta parte está concluída, onde aprendemos como selecionar o estado na loja. Essa parte acabou agora. 41. Project 4 Blog App - Crie seletor de blog: Agora, antes de avançarmos e usarmos esse componente, precisamos falar sobre esse enorme seletor Porque agora ele recebeu o estado e depois temos o bloqueio estadual. Mas se a estrutura do nosso estado mudar como agora, esse componente deve saber algo sobre a necessidade de saber que vamos para o bloco estadual, pode ser um blog estadual, outra coisa no futuro. Seria melhor se criássemos um seletor na fatia e depois o exportássemos Dessa forma, se a forma do estado alguma vez mudar no futuro, não precisaremos alterar cada componente. Poderíamos mudar uma vez no slide. Vamos fazer isso em nossas fatias de blocos aqui. Vamos criar um arquivo selecionado, eu vou exportar esse arquivo. Exporte, selecione todos os blocos. Teremos uma função anônima que vai para o estado A. Serão bloqueios estaduais, ok? Agora podemos trazer esse seletor para esse arquivo JS da lista de bloqueios Deixe-me trazer esse do Block Lies. Precisamos selecionar todos os blocos aqui. Podemos simplesmente passar, selecionar todos os blocos. Está bem? Vamos salvar esse arquivo. Vamos até o navegador. Isso ainda está funcionando com essa abordagem. A parte seletora também é preenchida neste aplicativo. 42. Project 4 Blog App - crie ação para adicionar blog: Agora vamos seguir em frente e criar função redutora ou adicionar o blog em nosso aplicativo Vou adicionar ação aqui dentro desse objeto redutor. Nós vamos ter um blog. Ok, vai haver uma ação estadual, podemos fazer algo assim. estado, o impulso e a ação fazem a carga útil aqui, a ação faz a carga útil Basicamente, as informações sobre nosso blog, que basicamente contêm título, corpo e ID do usuário. Esta é a nossa ação que trouxemos em nosso objeto redutor Agora falaremos sobre esse impulso de estado em um segundo, porque se você estiver familiarizado o suficiente com a reação, geralmente não alteramos um estado E esse empurrão de pontos funcionaria em uma matriz. Conversaremos em um momento. Deixe-me primeiro exportar essa função. Vamos ter um blog de mentiras. A ação aqui cria mentiras. Basicamente, gere um sotaque criado com o mesmo nome que definimos aqui Isso está no blog. Vai gerar automaticamente o criador do sotaque. 43. Aplicativo de blog do Project 4 - entenda o papel de immer js: Agora vamos falar sobre esse impulso estadual que escrevemos aqui. Geralmente costumávamos escrever um estado como espalhar o estado. Então, temos uma carga de ação como um novo item em vez de um push de estado, mas uso do kit de ferramentas de leitura surge nos bastidores, permitindo que você escreva seu script Java Onde você normalmente estaria alterando o estado. Mas não está sofrendo mutações. O estado surge, crie um novo estado por baixo. Agora, percebemos que isso só funciona dentro do create slice, onde mais em seu aplicativo você ainda precisa usar a maneira correta de não alterar o estado No entanto, o interior cria mentira. Você pode usar o state push e direcionar o estado de outras formas para lidar com isso Facilita o manuseio dentro daqui. 44. Project 4 Blog App - ação de envio para adicionar blog: Então, vamos seguir em frente e usar essa ação em nosso componente de formulário. Vamos fazer isso no arquivo de formulários de bloco. Vamos usar essa ação que acabamos de criar. Agora, em nossa fatia do blog, já temos um formulário básico aqui Você pode ver isso por enquanto. Vou apenas recomendar essa lista suspensa. Vamos nos concentrar em publicar o blog com título e corpo. Temos um E no Summit, no qual apenas evitamos o padrão, temos essa alteração de identificador para basicamente rastrear o estado de cada campo. Ou seja, temos aqui como área de entrada e texto. E vamos escrever uma lógica para enviar o blog apenas no Summit. Então, primeiro precisamos trazer um grande despacho. Ok, então precisamos trazer um grande despacho de um vermelho. Para despachar uma ação, envio enorme, temos que armazenar a referência de envio enorme em uma variável de despacho Temos que armazenar a referência desse grande despacho nessa variável de despacho para que possamos despachar Agora, aqui está o que temos que fazer primeiro aqui, vou verificar se temos o título, basicamente enviaremos o despacho Também temos que iniciar a ação. Vamos trazer a ação também. Do nosso blog está um blog que eu trouxe aqui. Podemos enviar aqui como um blog. Aqui, primeiro precisamos fornecer o ID. Vou usar um nano ID do pessoal do kit de ferramentas vermelho. Precisamos basicamente de um ID exclusivo para essa finalidade Para trazer um kit de ferramentas de duto nano ID, cada bloco deve conter um ID exclusivo Aqui podemos usar o nano ID e isso será entre parênteses Agora podemos manter o título. E depois disso, queríamos basicamente limpar cada campo de entrada, ou seja, o título e o corpo do conjunto. Vamos deixá-lo vazio. Este título, campo de entrada e exterior do corpo. Depois de enviar o blog, vamos verificar se ele está funcionando ou não Vamos entrar no navegador. E aqui eu esqueci de trazer o componente em nosso arquivo JS de pontos do aplicativo. Deixe-me trazer o componente para adicionar o formulário de bloco. Agora vamos entrar no navegador. Há algum problema com o estilo. Deixe-me ver o que está acontecendo. Precisamos adicionar estilo em nosso arquivo CSS de pontos de índice. Vou apenas colar o estilo. Temos que adicionar esse estilo básico em nosso arquivo de índice. Não se preocupe, esse estilo está sempre presente em sua estrela. Você não precisa se preocupar com essa parte. Vamos salvar este e entrar no navegador. Bom, ok, deixe-me reformular o aplicativo. Está parecendo bom. Agora temos que publicar nosso primeiro blog enviando essa ação que definimos Ok, em nosso cume. Vamos ver se está funcionando ou não. Deixe-me fazer um teste. Ok, deixe-me o que está acontecendo? Vamos clicar em Enviar. Temos alguns, ok, deixe-me ver o que está acontecendo aqui. Será Body Content. Certifique-se de alterar esse texto do conteúdo para o corpo. Agora vamos entrar no navegador e refletir esse aplicativo. Ainda estamos entendendo o problema. Será corpo, não conteúdo. Ok, vamos salvar esse. Vamos entrar no navegador. Agora temos nossos dois posts, ok, vamos fechar este. Vamos publicar nosso blog com a ação que acabamos de criar em nossos blogs mentiras. Vamos dar um T. Vamos clicar em Enviar. Você pode ver que isso está funcionando. Portanto, conseguimos adicionar com sucesso um blog simples com nossa ação que acabamos criar com a ajuda do kit de ferramentas 45. Aplicativo de blog do Project 4 - use o aplicativo de chamada de preparação: Agora nosso formulário está funcionando perfeitamente. Mas poderia ser melhor. Vamos falar sobre isso, porque agora ele precisa saber os detalhes sobre o estado. Mais uma vez, para enviá-lo corretamente, ele precisa enviar um objeto formatado corretamente E seria melhor se pudéssemos atrair um pouco disso. Não queremos duplicar esse tipo de lógica em cada componente publicado em nosso estado global Em vez disso, podemos lidar com isso rapidamente com um retorno de chamada preparado E o Prepare Callback pode gerar um ID exclusivo, formatar os dados e retornar o objeto com a carga útil E isso é basicamente o que estamos fazendo aqui. Isso realmente simplificará nosso componente e ele lidará com tudo mais uma vez, de volta à fatia Vamos ao Slice Temos que modificar nosso blog de anúncios. O que podemos fazer aqui, deixe-me cortar isso aqui. Vamos ter um redutor. Ok, vamos ter, novamente, a mesma coisa. Isso é estado e ação. Podemos simplesmente fazer como estado, pressionar com ação. Carga útil. Ação, carga útil Aqui podemos definir nosso retorno de chamada de preparação. Agora podemos passar o título e o corpo. Então, podemos retornar o objeto formatado. Está bem? E vai voltar com a carga útil Carga útil novamente, vamos ter uma identificação aqui. Novamente, precisamos trazer aqui o nano ID. Vamos trazer o nano ID, kit de ferramentas vermelho. Então, podemos ter nosso título e corpo. Ok, mas está faltando alguma coisa aqui. Forma e algo que está faltando. Deixe-me conferir aqui. Acho que temos que remover as duas coisas. Ok, e para devolver, temos que usar isso. Acho que minha ligação para isso é boa. Verifique. Ok, isso também parece bom e aqui temos que adicionar mais um. Ok, então deixe-me formatar este agora. Está tudo bem. Você pode ver que aqui passamos o título e o corpo que obteríamos do componente e, em seguida, ele retornou a carga útil da ação conforme precisa ser formatada Voltamos aqui e, em seguida, temos uma carga útil em que definimos ID com nano ID junto com título e corpo Modificamos nossa fatia com o retorno de chamada de preparação. Agora também temos que nos ajustar às coisas em nossa forma de bloco. A partir daqui, podemos remover esse objeto e simplesmente passar e colocar no corpo o resto da coisa em nossa fatia com este retorno de chamada de preparação que acabamos de definir aqui Ok, vamos voltar a este formulário. A vantagem aqui é que nosso componente, mais uma vez, nem precisa conhecer a estrutura do estado. Agora, tudo é tratado dentro do slide. Podemos simplesmente enviar os dados brutos de que precisamos. Vamos tentar isso em nosso navegador. Vou voltar ao meu navegador novamente. Vamos refletir esse aplicativo. Vamos fazer um teste de título, Test it Summit. Agora você pode ver que isso está funcionando. Com esse retorno de chamada de reparo, podemos publicar nosso blog com sucesso. Esta parte é concluída aqui. Basicamente, simplificamos ou codificamos um pouco em nossa fatia. Agora terminamos com isso e podemos remover esse. Não precisamos do NanoDCEO. Precisamos mais do ID para criar blog porque tudo é tratado dentro da nossa fatia Vamos nos livrar disso. 46. Aplicativo de blog do Project 4 - ferramenta de desenvolvimento de Redux: Agora, antes de avançarmos e na parte em que vamos selecionar no menu suspenso, vamos falar sobre o refazer. Deixe-me voltar ao navegador, atualizar este aplicativo. Primeiro, vou abrir uma ferramenta Redcap. Você pode instalar a extensão da ferramenta de fita adesiva no seu navegador. Vou abrir à minha direita. Ok, deixe-me atualizar este aplicativo. Aqui você pode ver que, no estado do nosso aplicativo, temos esses dois blocos em nosso estado inicial. E você pode ver o estado em um formato diferente, como gráfico. Você pode ver no gráfico. Você também pode ver no formato bruto que você tem um formato diferente para visualizar o estado do nosso aplicativo. vermelho basicamente é usado para rastrear o estado do aplicativo e você também pode rastrear a ação que você vai dissipar Vamos tentar adicionar um bloco novamente. Eu só vou te fazer um teste novamente. Vamos ver, Opto, você pode ver que enviamos nossa ação de blog de anúncios no Você também pode rastrear o envio da ação. Nós temos essa ação. Ok, agora temos três blogs. Em nosso aplicativo, este blog foi adicionado. Você pode ver que este novo blog foi adicionado à nossa loja. Você também pode calcular a diferença aqui. Ok, este novo blog foi adicionado em nossa loja. Essa é uma ação que acabamos de enviar pressionando o Isso é tudo sobre a visão geral básica da ferramenta Reduct Tap e como usar essa ferramenta de redução sempre que você estiver usando reduct em um aplicativo de reação Agora, vou minimizar esse. 47. Aplicativo de blog do Project 4 - crie uma fatia de usuário: Agora vou começar a trabalhar na parte do usuário neste aplicativo para que usuário possa selecionar o usuário no menu suspenso ao enviar o blog Vou ter mais uma pasta dentro desses recursos. Vou ter uma pasta como usuários, vamos ter mentiras, mentiras, pois, novamente, preciso criar uma mentiras, pois, novamente, fatia a partir do kit de ferramentas Reduct. Vamos partir da fatia do kit de ferramentas Reduct. Então, vou colocar o estado inicial. Teremos um usuário padrão para que você possa selecionar no menu suspenso de usuários Agora, depois disso, teremos uma fatia de usuário. Vamos fornecer o nome da fatia. Será, podemos ultrapassar seu estado inicial. O redutor será o objeto vazio. Agora, novamente, vou criar um seletor aqui para o usuário exportar e selecionar tudo Vamos ter uma função anônima. Serão estados e estados. Então, podemos exportar o redutor padrão de exportação. Então, podemos conectar esse redutor em nossa loja. Vamos ver esse arquivo de lojas. Eu posso simplesmente copiar esta, esta declaração de importação. Isso será um usuário, virá de mentiras. Precisamos mudar a peça inteira. Ele virá da pasta de usuários e, em seguida, da fatia de usuários. Aqui estará, e o redutor de usuários. Terminamos com a fatia do usuário neste aplicativo. 48. Project 4 Blog App - liste usuários em menu suspenso: Agora vamos voltar a esse formulário de bloco. Aqui, precisamos trazer todos os usuários primeiro. Precisamos trazer o seletor também. Aqui podemos ter todos os nossos usuários, ok, podemos trazer o seletor que acabamos de definir nesta fatia Vamos selecionar todos os códigos VS do usuário que serão importados automaticamente para mim. Ok, não está importando no seu caso, então você precisa importá-lo manualmente Agora temos todos os usuários, ok, podemos simplesmente descomentar essa linha de código aqui O que temos que fazer, vamos ter uma opção. Opção. Queremos todos os usuários, podemos mapeá-los. Vamos, ter uma opção será como usuário. Podemos digitar aqui um usuário de valor. Em seguida, dentro desse nome de usuário. Vamos usar essa opção de usuário aqui. No menu suspenso aqui, podemos ter a opção de usuários. Vamos ver se conseguimos ver o usuário ou não no menu suspenso Vamos voltar ao navegador. Aqui temos nossos três usuários que definimos em nossa vida de usuário, ou seja, John Doe, Nancy e James Bond Esta parte está concluída, mas ainda precisamos fazer algumas modificações antes de publicarmos nosso novo blog com as últimas alterações. 49. Aplicativo de blog do Project 4 - modifique ação e prepare uma chamada de volta: Que mudanças temos que fazer aqui. Vamos entender que, ao adicionar o bloco, também vamos passar para o usuário. OK. Aqui o que vamos fazer, você pode ver que, para o menu suspenso estamos usando aqui, handle, user, handle user basicamente restaurará o usuário, ok, ele restaurará o ID do usuário Como você pode ver, aqui no manipule a função do usuário. Vamos passar aqui o ID do usuário também. Como inicialmente definimos três coisas, como corpo do título e ID de usuário para nosso formulário de blog, estamos passando essa ID de usuário. Como temos essa parte de ação ao enviar esse bloco de anúncios, adicionamos mais um argumento, que é ID de usuário, como qual usuário está basicamente publicando o Também temos que modificar ou preparar função de retorno de chamada que definimos no blog li, vamos entrar nesse arquivo Deixe-me voltar para aquele arquivo que é uma fatia do blog. Então, agora ele receberá o ID do usuário. OK. Então, o ID do usuário será recebido e será o ID do usuário. OK. Portanto, modificamos nosso retorno de chamada de preparação. 50. Project 4 Blog App - Mostre blog com usuário: Agora também precisamos fazer algumas mudanças no componente de usuário do nosso blog. Ok, no momento está apenas mostrando o usuário desconhecido. Não estamos exibindo o nome do usuário. Ok, antes de fazermos isso, vamos voltar para este arquivo de lista de blogs. Aqui. Você pode ver que estamos passando o ID do usuário. Estamos mapeando cada bloco que estamos recebendo da nossa loja. E estamos passando o ID do usuário aqui, ok, para este componente de usuário do blog. Podemos mencionar esse ID de usuário aqui. Ok, depois disso, o que temos que fazer trazer o primeiro seletor do react reader Como precisamos descobrir qual usuário está basicamente publicando o blog, precisamos primeiro que todos os usuários que temos em nossa fatia de usuário selecionem primeiro lugar Então, precisamos, em primeiro lugar, de todo o seletor de usuários E podemos passar aqui o seletor que definimos na fatia do usuário, selecionar a porta de todos os usuários automaticamente para mim Depois disso, podemos escrever uma lógica básica aqui. Precisamos encontrar esse usuário específico que podemos usar aqui Todos os usuários descobrem que teremos cada usuário, já estamos recebendo o ID do usuário do nosso componente de lista de bloqueio. Será como o Dot ID. E se o ID corresponder , pegaremos esse usuário e mostraremos o nome O que temos que fazer aqui, vamos remover esse primeiro. Se tivermos o usuário, então o nome de usuário L, será um usuário desconhecido. Ok, vamos salvar esse arquivo. Vamos também acessar esse arquivo js do formulário de bloco de anúncios. Aqui. Também vou esvaziar o campo suspenso, ID do usuário, e ele ficará vazio após o envio Antes de publicarmos um blog com todas essas mudanças, eu queria desativar o botão Enviar até que todos os campos fossem preenchidos pelo usuário. O que eu posso fazer, eu posso ter um é encher. Ele vai verificar se cada campo de entrada tem algum valor ou não. Podemos usar seu título de ouro Bullion, será ouro corporal, será usuário Esse botão será desativado. Se algum campo de entrada ficar vazio, podemos apenas verificar este. Está bem? Vamos ver se está funcionando ou não. Precisamos voltar ao navegador. Reformule esta Vou selecionar um usuário aqui, John Doe. Vamos fazer um teste de título. Vamos fazer um teste corporal. Agora você pode ver que esse botão foi ativado após o envio do valor em cada campo de entrada Vamos clicar em Summit. Agora você pode ver que desta vez também recebemos o nome de usuário. Esse é John Doe. Ok, esta parte também está concluída aqui e você pode ver que também conseguimos publicar um blog com o nome de usuário. Terminamos aqui de selecionar o usuário e publicar o blog com o nome de usuário específico. 51. Aplicativo de blog do Project 4 - ação Redux para gosto/diferente: Vamos seguir em frente e trabalhar no restante das funcionalidades que temos no aplicativo. Também precisamos implementar a funcionalidade de gostar e não gostar Sempre que o usuário clicar no botão de curtir ou não curtir, ele aumentará Vamos trabalhar nesse recurso também. Com o kit de ferramentas de redução, precisamos escrever uma função redutora para E antes de escrevermos uma função redutora, vamos modificar a chamada de reparo novamente. Você pode ver que, no estado inicial, temos um objeto de resposta e ao contrário também teremos a mesma coisa no retorno da chamada de reparo. Primeiro, vamos dar uma resposta, ok? E será como se inicialmente fosse zero, toda a contagem fosse zero. Agora, sempre que um usuário criar um blog, vamos salvar esse. Agora vamos começar a escrever uma função redutora para gostar ou não gostar de p. Vou adicionar aqui a função redutora de resposta que é responsável por ou não função redutora de resposta que é responsável por ou gostar do ping de uma ação de estado da Vamos receber duas coisas. Sempre que um usuário enviar uma ação enquanto gosta ou não, o P receberá o ID do blog e a Você pode ver que esse componente aqui tem um nome e um emoji que usei aqui como entrada de objeto Como esse é um objeto e estamos mapeando sobre ele, esse nome é chave e mog é valor Vamos passar duas coisas: de qual bloco estamos basicamente gostando e da imagem Trabalharemos mais tarde nesse componente. Primeiro, vamos trabalhar nessa carga útil de facção da função redutora Vamos receber duas coisas, ou seja, o ID do blog e a resposta. Temos que verificar o blog existente no estado. Temos todas as informações sobre o estado do blog, primeiro publicaremos o blog. Temos que basicamente combinar com o blog, qual blog estamos basicamente gostando ou não gostando Primeiro, temos que pegar um blog específico e aqui podemos fornecer esse ID do blog. Se você tem o blog existente, então a resposta do blog existente. Aqui, resposta aqui, basicamente vamos incrementar, ok? 52. Aplicativo de blog do Project 4 - mostre uma contagem de gosto/diferente usando o Redux: O que temos que fazer a seguir. O que precisamos fazer é primeiro um grande envio de react reducts, um grande Aqui, precisamos primeiro a referência do despacho em uma variável de despacho Esse componente também receberá um blog. Ok, da nossa lista de blogs. OK. Você pode ver que, no momento, não estamos passando nada. Vamos aprovar o blog dela e podemos apenas um bloqueio específico. Ok, agora esse componente do botão de resposta está recebendo o blog específico. Aqui, o que podemos fazer com um clique, podemos basicamente enviar um despacho de ação Nós podemos iniciar a ação. Criamos a ação, mas acho que não exportamos. Vamos exportar esse. OK. Agora vamos voltar para esse botão de resposta aqui. Primeiro, precisamos trazer esse. Precisamos trazer essa fatia do blog da função redutora de função Temos que acrescentar uma resposta. Então, podemos enviar essa resposta adicionada. Temos que passar por duas coisas. Ou seja, o primeiro ID do blog, que já estamos obtendo desse blog ID de ponto. Será, ou seja, temos que mostrar também a contagem. Vamos fazer isso. Uma resposta no blog e podemos passar aqui o nome. Vamos entrar no navegador e ver se está funcionando ou não. Primeiro, consulte este. Agora você pode ver que inicialmente obtivemos a contagem zero. OK. Se você clicar nesse , ele não será incrementado Deixe-me ver o que está acontecendo. Somos capazes de despachar uma ação ou não. Primeiro, vamos ver se uma ação não está sendo despachada Na verdade, escrevemos essa função redutora fora desse objeto redutor, ok essa função redutora fora desse objeto redutor, ok? Está fechando aqui. Na verdade, precisamos escrever aqui. Ok, esse. E cole aqui. Atualize este primeiro. Isso está funcionando, ok? Como você pode ver, isso está sendo incrementado. Vamos adicionar um blog aqui com Nancy. Vamos fazer um teste para você. Vamos apenas copiar este. Vamos enviar, vamos ver se podemos gostar ou não desse blog recém-criado. Isso também é trabalho. Você pode ver que nossa funcionalidade também está funcionando neste aplicativo. Com a ajuda do leitor pegou. Parece que tudo está funcionando neste aplicativo de blog da Imple 53. Finalização: Se você estiver assistindo a este vídeo, significa que você concluiu este curso com sucesso e espero que você tenha entendido completamente sobre como trabalhar com o kit de ferramentas reduct no aplicativo React. Depois disso, você também poderá integrar o kit de ferramentas redact em qualquer react rejeitado existente. E você também pode converter esses projetos React em que o código Redux antigo usa esses projetos que você pode facilmente converter em Reduction Toolkit. É isso do meu lado. Se você tiver alguma consulta ou ponto, poderá colocar sua consulta na seção de comentários. Vou tentar o meu nível melhor para resolver sua consulta. Você também pode visitar meu canal do YouTube para obter mais conteúdo sobre reagente ou produto que você pode obter mais conhecimento sobre React e editor na quinta-feira, você sempre pode visitar meu oficial Canal do YouTube para mais rift de um reagente. E se você olhar para a minha playlist, eu tenho uma dívida diferente e diferente em um React. Eu tenho algum projeto iniciante, reduto projeto. Também criei um aplicativo de clone e também tenho um aplicativo de pilha completa. Então pessoal, você sempre pode visitar meu canal oficial do YouTube para mais de um Redux reagente. É isso do meu lado. Muito obrigado pessoal por fazer este curso. Vejo você em outros cursos.