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:

• Realizar ações de inscrição de desinscrição, escutando ações e agir de acordo com elas;
• Utilizar o delay, para termos tempo para executar ou não uma ação;
• Fazer mini tarefas com os listeners;
• Obter o estado atual do Redux dentro do listener middleware;
• Disparar uma ação no listener middleware;

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:

• Iniciando o projeto
• Listener
• Escutando categorias
• Avançando nas categorias
• Escutando itens