Alura > Cursos de Front-end > Cursos de React > Conteúdos de React > Primeiras aulas do curso React: avançando em Middlewares com Listener Middleware

React: avançando em Middlewares com Listener Middleware

Iniciando o projeto - Apresentação

Boas-vindas ao curso de Redux: Avançando em Middleware com Listener Middleware.

Meu nome é Luiz Fernando, sou instrutor da Alura, e neste curso aprenderemos a resolver um problema muito comum no dia a dia das empresas.

Quando realizamos uma busca na API, como no TratoTech nesse momento, temos alguns problemas, como as buscas duplicadas, ou seja, quando já temos um dado e ele é buscado novamente. No nosso caso, resolveremos isso com o Listener Middleware.

Ao acessarmos a página inicial do TratoTech e atualizá-la, nós obteremos, de forma dinâmica, apenas as categorias, e não os itens. Isso porque só precisamos das categorias nessas páginas.

Se acessarmos a página da categoria "Eletrônicos", buscamos apenas os itens eletrônicos, porque já temos essa categoria. Ao atualizarmos essa página, obtemos apenas a categoria "Eletrônicos" com os seus itens.

Portanto todas as páginas estão trabalhando de forma dinâmica, buscando apenas o que é exibido na tela. Isso é muito bom para performance e para concisão das páginas em si, e nesse curso usaremos o Listener Middleware para essa implementação. Também aprenderemos como:

Então tudo isso ajudará vocês a resolver o problema de duplicidade e proporcionará o conhecimento e experiência para resolver problemas baseados no Redux que o Redux Thunk não conseguia resolver.

Até mais!

Iniciando o projeto - Clonando o projeto

Nós começaremos clonando o projeto do trato-tech-thunk diretamente do GitHub da Alura. Então clicamos no botão verde escrito "Code", no lado superior direito da lista de arquivos e pastas.

Com isso abrimos uma janela flutuante de clonagem. Nela, copiaremos o link HTTPS do repositório, clicando no ícone ao final do campo com o endereço. Depois abrimos nosso terminal e acessamos a pasta onde queremos fazer a clonagem. No meu caso, eu já estou na pasta onde quero criar essa cópia.

Em seguida escrevemos git clone, colamos o link que havíamos copiado e pressionamos "Enter". O repositório é copiado rapidamente.

O próximo passo é acessarmos a pasta do repositório, codando cd trato-tech-thunk. Nela vamos instalar as dependências do projeto, codando yarn e pressionando "Enter".

Quando as dependências terminam de ser instaladas, podemos codar code . para abrirmos o VS Code exatamente na pasta em que estamos, ou seja, a pasta do projeto, que é a "trato-tech-thunk". Por fim, voltamos ao terminal e escrevemos yarn start para rodarmos esse projeto no nosso navegador.

Quando a página do TratoTech abre, vocês devem ter notado no centro inferior da janela do projeto as mensagens de "Carregando categorias" e "Erro ao buscar". Isso ocorreu porque o back-end ainda não está rodando.

Sendo assim, no próximo vídeo vamos relembrar como rodar o back-end e como nosso projeto está funcionando. Além disso, começaremos nossa aprendizagem de como resolver alguns problemas com outro middleware que conheceremos.

Iniciando o projeto - Rodando o servidor

No vídeo anterior instalamos as dependências e rodamos o projeto, mas não conseguimos exibir as categorias. Através da mensagem que criamos no curso anterior, entendemos que esse é um erro ocorreu porque ele não conseguiu buscar as categorias no servidor, uma vez que nosso back-end ainda não está rodando.

Sendo assim, abriremos o VS Code e iremos relembrar como rodar o back-end do nosso projeto. Para isso, começarei ensinando para vocês uma forma de descobrir como acessar o back-end caso estejam em outro projeto.

No projeto temos um arquivo db.json, isso já indica que temos um back-end baseado em JSON, e provavelmente existe um JSON Server dentro dele. Contudo, a primeira coisa que precisamos fazer para descobrir como algo é rodado, é acessar o package.json.

O package.json é um arquivo JSON contendo, obviamente, um objeto. Dentro dele, precisamos encontrar o "scripts", que é um conjunto de comandos existentes no nosso projeto, no qual podemos executar ações.

Neste caso, temos scripts de "start", "build", "test", "eject" e "server". Os quatro primeiros foram criados de forma automática pelo create react app, mas o "server" foi criado por nós no último curso.

O "server" utiliza o json-server para criar um servidor JSON na porta 3001, como observamos no código do script. Então nós utilizaremos esse comando para rodar o back-end.

Portanto pressionamos "Ctrl + ' (aspas simples)", para abrirmos o terminal do VS Code, codamos yarn server e pressionamos "Enter". Dessa forma rodamos rapidamente nosso back-end.

yarn server

yarn run v1.22.15

$json-server --watch db.json --port 3001

{^_^}/

Loading db.json

Done

Resourcers

http://localhost:3001/categorias

http://localhost:3001/itens

Home

http://localhost:3001

Recebemos como resposta dois caminho, um com "/categorias" e outro com "/itens", então provavelmente nossa busca irá funcionar agora. Podemos pressionar "Ctrl +'" para fechar o terminal e abrir nossa página do TratoTech no navegador.

Ao atualizarmos a página, reparamos que as categorias carregaram e também recebemos as mensagens de "Categorias carregando" e de "Sucesso". Agora nosso back-end está rodando, mas vamos começar a explorar o que precisamos fazer.

Ao acessarmos, por exemplo, a categoria "Eletrônicos", tanto a categoria, quanto os itens estão carregados, porque obtemos essas informações na página anterior. Entretanto, se atualizarmos a página, ela fica completamente branca, como vimos no final do curso passado.

Aprendemos que isso é algo possível de resolver com o Thunk, mas que fica muito complexo, porque precisamos acompanhar várias ações diferentes. Também precisaríamos rodar uma action diferente para cada tela no Redux Thunk, e tudo isso seria bastante problemático.

Neste curso aprenderemos outro middleware que resolve esse problema de forma mais fácil. Então nos próximos vídeos o veremos na prática, e descobriremos como criar e utilizar esse novo middleware.

Até lá!

Sobre o curso React: avançando em Middlewares com Listener Middleware

O curso React: avançando em Middlewares com Listener Middleware possui 109 minutos de vídeos, em um total de 38 atividades. Gostou? Conheça nossos outros cursos de React em Front-end, ou leia nossos artigos de Front-end.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda React acessando integralmente esse e outros cursos, comece hoje!

Plus

De
R$ 1.800
por
12X
R$109
à vista R$1.308
  • Acesso a TODOS cursos por 1 ano

    Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Certificado

    A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.

  • Mentorias com especialistas

    No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.

  • Comunidade exclusiva

    Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.

  • Acesso ao conteúdo das Imersões

    Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.

  • App Android e iOS para estudar onde quiser

    Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.

Matricule-se

Pro

De
R$ 2.400
por
12X
R$149
à vista R$1.788
  • Acesso a TODOS cursos por 1 ano

    Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Certificado

    A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.

  • Mentorias com especialistas

    No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.

  • Comunidade exclusiva

    Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.

  • Acesso ao conteúdo das Imersões

    Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.

  • App Android e iOS para estudar onde quiser

    Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.

  • Luri, a inteligência artificial da Alura

    Luri é nossa inteligência artificial que tira dúvidas, dá exemplos práticos, corrige exercícios e ajuda a mergulhar ainda mais durante as aulas. Você pode conversar com a Luri até 100 mensagens por semana.

  • Alura Língua - Inglês e Espanhol

    Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.

Matricule-se

Ultra

12X
R$209
à vista R$2.508
  • Acesso a TODOS cursos por 1 ano

    Formações com mais de 1500 cursos atualizados e novos lançamentos semanais, em Programação, Inteligência Artificial, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Certificado

    A cada curso ou formação concluído, um novo certificado para turbinar seu currículo e LinkedIn.

  • Mentorias com especialistas

    No Discord, você tem acesso a eventos exclusivos, grupos de estudos e mentorias com especialistas de diferentes áreas.

  • Comunidade exclusiva

    Faça parte da maior comunidade Dev do país e crie conexões com mais de 120 mil pessoas no Discord.

  • Acesso ao conteúdo das Imersões

    Acesso ilimitado ao catálogo de Imersões da Alura para praticar conhecimentos em diferentes áreas.

  • App Android e iOS para estudar onde quiser

    Explore um universo de possibilidades na palma da sua mão. Baixe as aulas para assistir offline, onde e quando quiser.

  • Luri, com mensagens ILIMITADAS

    Mensagens ilimitadas para estudar com a Luri, a IA da Alura, disponível 24hs para tirar suas dúvidas, dar exemplos práticos, corrigir exercícios e impulsionar seus estudos.

  • Luri Vision, a IA que enxerga suas dúvidas

    Envie imagens para a Luri e ela te ajuda a solucionar problemas, identificar erros, esclarecer gráficos, analisar design e muito mais.

  • Alura Língua - Inglês e Espanhol

    Aprenda um novo idioma e expanda seus horizontes profissionais. Cursos de Inglês, Espanhol e Inglês para Devs, 100% focado em tecnologia.

  • 6 Ebooks da Casa do Código

    Receba cupons da Casa do Código, a editora da Alura, e escolha ebooks que acompanharão a sua jornada de aprendizado para sempre.

Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas