React: utilizando a arquitetura Saga com Redux Saga

Instalando o Saga - Apresentação

Olá! Boas-vindas ao curso de Redux Saga. Meu nome é Luiz Fernando e sou instrutor na Alura.

Luiz Fernando é um homem branco, de cabelos curtos na cor castanho-escuro. Tem o rosto, nariz e dentes longos, sobrancelhas grossas e olhos estreitos, também castanho-escuros. Seu rosto é contornado por bigodes e barba ralos. Usa uma camisa preta. Está sentado em uma cadeira gamer preta com faixas azuis na horizontal. Atrás dele, uma parede lisa, iluminada com um degradê nas cores turquesa e turquesa acinzentado.

Neste curso, aprenderemos a utilizar o middleware mais conhecido do Redux, o Redux Saga, para realizar diferentes chamadas.

O que vamos aprender?

• Vamos refatorar a chamada que busca todas as categorias para utilizarmos o Redux Saga.

• Aprenderemos a realizar essa busca e também a cancelá-la quando ela não for mais necessária. Por exemplo, após buscarmos uma categoria e voltarmos à página inicial, as categorias não serão buscadas novamente.

• Adicionaremos uma página de pagamento que será acessada por meio do carrinho, clicando no botão de "Finalizar compra".

• Aprenderemos a realizar múltiplas chamadas dentro do Redux Saga, recolher todos esses dados e transformá-los em um só, adicionando-o no Redux e utilizando-o na tela de pagamento.

• Com as múltiplas chamadas, faremos as informações do usuário, de seus cartões e das bandeiras desses cartões em chamadas diferentes .

• Veremos a sintaxe do Redux Saga e também a arquitetura Saga, sendo esta a origem do primeiro.

• Veremos a sintaxe do Function Generator, utilizada pelo Redux Saga. Ela não tem relação com o Saga, pois se trata na verdade de Javascript!

Vamos conferir todo esse conhecimento e todas as vantagens que o Redux Saga possui em relação a outros middlewares.

Não aprenderemos somente a utilizar o Redux, os middlewares e o Redux Saga, mas também a utilizar o Function Generator nesta e em qualquer outra funcionalidade Javascript que quisermos. Teremos mais um item no nosso cinto de utilidades.

Esperamos que este seja um assunto que desperte o seu interesse. Nos vemos dentro do curso!

Instalando o Saga - Clonando o projeto

Para começar o curso, precisaremos do nosso projeto. Como de costume, clonaremos o repositório do trato Tech. Neste caso, utilizaremos o repositório do Trato Tech Listener, o último que fizemos. Ele pode ser encontrado na primeira atividade desta aula.

Observação: Utilizaremos um repositório pessoal, mas você poderá utilizar o da Alura sem problemas, pois se trata de uma cópia e possui o mesmo conteúdo.

Acessaremos o repositório indicado pelo navegador e clicaremos no botão recolhido "Code", na cor verde, alinhado à direita. Em seu menu estendido, clicaremos no ícone de copiar, à direita da URL do HTTPS.

Acessando o terminal, já configurado na área que queremos utilizar, escreveremos git clone, colaremos o repositório copiado e pressionaremos "Enter".

git clone https://github.com/lfrprazeres/trato-tech-listener

O processamento será rápido pois ainda não instalamos os repositórios. Entraremos na página com o comando cd trato-tech-listener, onde cd significa "Change Directory" (Mudar Diretório).

cd trato-tech-listener

Escreveremos code . para abrirmos o repositório no VS Code. Neste momento, o VS Code será aberto.

code .

Ainda no terminal, escreveremos yarn para que as dependências sejam instaladas.

yarn

Quando este processo terminar, temos que iniciar o projeto e o servidor através do comando yarn start.

yarn start

Enquanto o projeto inicia, acessaremos o VS Code e pressionaremos "Ctrl+'" para abrir o terminal. É possível acessar o terminal pelo menu "Ver", localizado na aba superior do VS Code, onde clicaremos no submenu "Terminal".

Devido ao yarn start, será aberta uma aba no navegador com o nosso projeto. Vamos ignorá-la por enquanto.

Voltando ao terminal do VS Code, em seu interior daremos um yarn server para iniciar o servidor. Temos o JSON Server dentro do repositório, e agora temos a nossa API funcionando.

Acessaremos a aba do nosso projeto no navegador. Nele, veremos que a busca por categoria já está implementada. Se clicarmos em uma categoria, será feita a busca de itens e veremos dois toasts no centro inferior da página: o azul indicará o carregamento dos itens da categoria e o verde indicará a finalização bem-sucedida deste processo.

Clonamos e rodamos o projeto Trato Tech, ao passo em que rodamos o servidor e testamos a busca. A seguir, relembraremos como está o projeto e o que faremos para incrementá-lo e deixá-lo mais legal ainda. Nos vemos no próximo vídeo.

Instalando o Saga - Instalando o Redux Saga

Relembraremos como funciona o projeto que já temos e instalaremos o pacote que aprenderemos neste curso: o Redux Saga.

Com o VS Code aberto acessaremos o explorador lateral esquerdo, onde abriremos a pasta "src". Em seu interior, veremos sete pastas:

• "assets", que contém os nossos pngs;

• "commom\config" que possui a configuração da nossa API. Com ela, não precisamos escrever "localhost://" nem o local;

• "components", que contém subpastas com os componentes React reutilizáveis no projeto: "Busca", "Button", "Footer", "Header", "Input", "Item", "Navbar" e "PaginaPadrao";

• "pages" que possui subpastas para cada página: "Home" para a principal, "Categorias", "Carrinho" para a tela de carrinho e "Anuncie" para anunciar um produto novo;

• "services" onde fizemos o axio para realizarmos chamadas para a nossa API. Ela possui dois arquivos: categorias.js e itens.js, onde podemos realizar buscas por categoria ou itens baseados nela;

• "store", onde temos as pastas "middlewares", "reducers" e o arquivo index.js;

• "styles" que contém o arquivo SASS _breakpoint.scss.

Sobre os componentes reutilizáveis da pasta "components":

• "Busca" realiza o processo de mesmo nome;
• "Button" contém o botão utilizado no carrinho e em outros locais;
• "PaginaPadrao" contém elementos como o header e está contida em várias outras páginas;
• "Navbar" contém a
• "Item" que está no carrinho e na categoria.

Sobre os elementos da pasta "reducers":

• Em "reducers", temos todos os reducers do nosso Redux, para busca, carrinho, categorias e itens. Nele podemos tirar ou acrescentar itens dentro do carrinho ou favoritá-los.
• Em "middlewares", utilizamos os Middlewares que aprendemos em outro curso, para conseguir escutar Actions e utilizá-las.
• Por fim, no arquivo index.js temos a configuração do reducer do nosso store.

Entendemos a estrutura do nosso projeto. Em seguida, fecharemos todos os arquivos abertos no corpo do VS Code e abriremos o terminal com "Ctrl+'". Neste momento, o nosso servidor já estará executando.

Dica: Caso o seu terminal esteja bloqueado pelo comando que inicia o servidor e houver a necessidade de abrir um novo, basta acessar o canto superior direito do terminal e clicar no botão com o ícone de "+", o que permitirá a abertura de um novo terminal.

Em seu interior, executaremos o comando yarn add redux-saga@^1.2.2 para instalar o Redux Saga no nosso projeto. Vamos utilizar a versão 1.2.2 para que não haja nenhum conflito de versão.

O acento circunflexo permite que sejam instaladas quaisquer versões dentro da 1.2, mas impede que sejam instaladas versões de 1.3.0 para cima.

yarn add redux-saga@^1.2.2

Pressionaremos "Ctrl+'" para fechar o terminal e, por meio do explorador, acessaremos o arquivo package.json, onde veremos a instalação do Redux Saga.

"redux-saga": "^1.2.2",

Temos o Redux Saga instalado e sabemos como funciona nosso projeto. A seguir, entenderemos como ele funciona para poder utilizá-lo.

Sobre o curso React: utilizando a arquitetura Saga com Redux Saga

O curso React: utilizando a arquitetura Saga com Redux Saga possui 134 minutos de vídeos, em um total de 50 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:

• Instalando o Saga
• Entendendo a arquitetura
• Aplicando o Saga
• Criando uma tela de pagamento
• Fazendo as chamadas
• Finalizando pagamento