React: entendendo Middlewares com Redux Thunk

Iniciando o projeto - Apresentação

Boas-vindas ao curso React: Redux com middleware!

Meu nome é Luiz Fernando, sou instrutor da Alura, e neste curso, vou explicar o que é Middleware e a relação dele com o Redux. Nós conheceremos como Redux Thunk, que é um middleware instalado no Redux Toolkit de forma padrão.

Entenderemos como utilizar o Redux Tank para fazer chamadas assíncronas, tirando essa responsabilidade do componente. Também descobriremos que o Redux Tank facilita a parte chata de criar um estado de loading, seja quando está carregando, seja quando já está carregado, e até quando é rejeitado. Portanto tudo é muito mais fácil com o Redux Tank.

Aprenderemos, na prática, como construir um Tank assíncrono e não-assíncrono, permitindo-nos conectar dois reducers. Além disso, se um reducer disparar uma action, conseguiremos ver o middleware de outro reducer lidando com essa ação. Tudo isso é muito poderoso e benéfico para nós, que desenvolvemos com o Redux.

Ao atualizarmos a página do TratoTech, que criamos nos cursos anteriores, observamos no centro inferior da janela dois Toastes aparecendo, um de carregamento e outro de sucesso. Ambos foram feitos com o Tank. Esse toast() aparece quando temos uma action, e ele é uma resposta do middleware à essa ação que foi disparada.

Espero que esse curso seja muito importante para você, porque esse tema é muito importante para o mercado de trabalho, já que os middlewares são muito utilizados em empresas grandes.

Vejo vocês no curso!

Iniciando o projeto - Clonando o projeto

Neste o curso, continuaremos usando o projeto do TratoTech, que estamos construindo ao longo dos cursos de Redux aqui na Alura. No GitHub, acessaremos o repositório do trato-tech-immer, que é o projeto do segundo curso, e nele vamos assegurar que estamos na Branch (ramificação) main, conferindo na parte superior esquerda do repositório.

Copiando o código

Em seguida, clicaremos no botão verde escrito "Code", que está na parte superior direita do repositório. Assim abrimos a janela flutuante "Clone" e confirmaremos se a aba "HTTPS" está selecionada, clicando nela.

Logo abaixo da aba "HTTPS" está um campo de texto com o link de código deste repositório e, ao final dele, um botão de copiar, que tem o símbolo de dois quadrados sobrepostos. Clicaremos nesse botão para copiar esse repositório.

Conhecendo o repositório do GitHub

Outro ponto para vocês entenderem é que eu sempre fui um aluno muito assíduo da Alura, mas algo que sempre me incomodou é que, quando eu queria um código específico de um vídeo, era bem difícil eu conseguir. Por isso que em todos os meus cursos eu separo branches (ramificações) diferentes baseadas no curso, nas aulas e nos vídeos.

É possível observar isso abrindo a lista de branches, no lado superior esquerdo, onde está escrito "main". Nela temos a lista com os códigos completos de cada aula, que são as branches começando com "A" maiúsculo, como em "Aula1".

Além disso, tem os códigos do final de cada vídeo, com "aula" escrito com "a" minúsculo, como em "aula1.2". No caso, "aula1.2" é o código final do segundo vídeo da Aula 1 do curso passado.

Então se quiserem o código especificamente de um vídeo, é possível conseguir no GitHub, tanto do curso passado, quanto neste curso. Inclusive podem encontrar algo como o "aula3.1-erros" de vez em quando, porque eu posso ter feito um código novo em alguma parte da aula, como em um "Para saber mais", e também disponibilizo ele para vocês.

Configurando o código

Com o link do repositório copiado, abriremos o Git Bash e navegaremos para pasta que utilizaremos. No meu caso, vou codar cd F:/www/alura, que é a pasta que eu utilizo.

Observação: O cd utilizado no comando é de change directory.

Estando na pasta desejada, codamos clear, para limparmos o terminal. Em seguida escrevemos git clone, clicamos em um espaço vazio com o botão direito no mouse e selecionamos "Paste", para colar a URL que copiamos do GitHub. Portanto codamos git clone https://github.com/alura-cursos/trato-tech-immer.git e pressionamos "Enter".

A cópia será feita rapidamente, então podemos acessar a pasta em seguida, codando cd-trato-tech-immer. Pressionamos "Enter" e, uma vez que estamos dentro da pasta, codamos yarn para instalar as dependências do nosso projeto, porque precisamos delas para rodar o TratoTech.

Lembrete: Vocês podem fazer essa instalação de dependências na pasta em que quiserem, mas é bom manter um certo nível de organização para conseguirem achar o repositório depois.

Quando a instalação dos pacotes acaba, podemos escrever code . no Git Bash. Dessa forma o nosso projeto é aberto no VS Code e percebemos que ele está pronto. sendo assim, não precisaremos criar nada, porque já temos todos os códigos que precisamos.

No próximo vídeo faremos uma rápida exploração pelo código, para o caso de vocês não se recordarem do curso antigo. Então explicarei como o código está atualmente e quais features pretendemos fazer.

Iniciando o projeto - Entendendo o código

Já temos o projeto instalado na máquina, então vamos revisá-lo e relembrar os códigos que ele contém. Para isso, voltaremos para o Git Bash e escreveremos yarn start para rodarmos o projeto. Dessa forma, o TratoTech será aberto no localhost:3000.

Dica: A inicialização do projeto também pode ser feita via npm, escrevendo npm start.

Analisando o projeto

Na página do TratoTech já conseguimos identificar algumas coisas que já temos. Por exemplo, existem categorias e dentro de cada categoria temos itens, ambos criados com os nosso reducers.

Ao clicarmos em uma categoria, como a "Eletrônicos", conseguimos observar os itens que estão ali. Além disso, podemos removê-los, clicando no botão com "X" no canto superior direito do item.

Na parte inferior direita do cartão do item, ao lado do preço, também temos botões de ação. Clicando no botão com ícone de coração, podemos favoritá-lo. O botão com ícone de carrinho, nos permite adicionar o item ao carrinho.

Por fim, temos o ícone de lápis com a linha embaixo, que é o botão de editar. Clicando no botão de editar, podemos mudar o título e depois confirmar, clicando no mesmo botão, que mudou para um ícone de confirmar.

Na parte superior esquerda da seção, após o nome a descrição, também temos o botão de "Quero anunciar". Ao clicar nele, somos direcionados para uma página de anúncio com um formulário para adicionar um produto.

Clicando no ícone de carrinho no canto superior direito da página, conseguimos acessar os itens no carrinho. Na página do carrinho, é possível mudar a quantidade de cada item adicionado e, clicando no botão inferior direito, também podemos finalizar a compra, zerando o subtotal do carrinho. Portanto nossa página está totalmente funcional.

Analisando o código

Voltando ao código, no VS Code, notamos que existem algumas pastas dentro da pasta "src". Temos a pasta "src > assets", com todos os PNGs, ou seja, nossas imagens. Também tem a "src > components", com componentes que são reutilizados no nosso projeto. Esses componentes são:

• "Busca", que é o botão de busca;
• "Button", que é um botão genérico;
• "Footer", da NavBar;
• "Header", que temos em várias páginas;
• "Input", que aparece ao clicarmos em editar ou quando estamos na página de anúncio;
• "Item, que aparece no carrinho e quando abrimos uma página de categoria;
• O próprio "NavBar";
• "PaginaPadrao, que contém o NavBar e o Footer, para conseguirmos reutilizar esses componentes em páginas diferentes.

Outra pasta que temos é a "src > pages". Nela temos a página de "Anuncie", a de "Carrinho", as de "Categoria", e a "Home", que é a página inicial do TratoTech. Em "src > store" tem a pasta "reducers", com vários reducers dentro, e o index.js, com a própria store, onde adicionamos todos os reducers. Então vamos analisar quais são os reducers em "src > store > reducers".

• busca.js, com o componente de busca;
• carrinho.js, que mostra o carrinho, caso adicionarmos algum item no carrinho;
• categorias.js, onde estão todas as categorias com um valor inicial, mas apenas usamos essas categorias, não as alteramos;
• itens.js, com os vários itens e algumas ações, como a mudarFavorito e cadastrarItem, enfim, todas as funcionalidades.

Por fim, temos "src > styles" com o breakpoints.scss, mas apenas com dois breakpoints. No nosso projeto ainda temos o index.css e o index.js.

No index.js temos um .StrictMode, que aprenderemos como e porque teremos que tirar neste curso, o Provider, que provê o Redux para o nosso projeto. Além disso, temos as rotas para as páginas, que vimos anteriormente.

Agora que já temos uma ideia do que temos no projeto, nos próximos vídeos descobriremos quais features faremos e porque as construiremos.

Até o próximo vídeo.

Sobre o curso React: entendendo Middlewares com Redux Thunk

O curso React: entendendo Middlewares com Redux Thunk possui 90 minutos de vídeos, em um total de 36 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
• Servidor
• Middlewares
• Avançando no Redux Thunk
• Criando Toasts