Alura > Cursos de Mobile > Cursos de React Native > Conteúdos de React Native > Primeiras aulas do curso React Native: escutando ações em tempo real com Listener Middleware

React Native: escutando ações em tempo real com Listener Middleware

Conhecendo o Listener - Apresentação

Olá! Boas-vindas a mais este curso. Meu nome é Luiz Fernando, e sou instrutor aqui na Alura.

Audiodescrição: Luiz Fernando se identifica como um homem pardo. Possui cavanhaque e cabelos pretos, bem curtos. No corpo, usa uma camiseta azul-escuro com a logo da Alura. Ao fundo, uma parede lisa com iluminação em degradê do azul para o roxo.

Neste curso, vamos continuar com o projeto Jornada Milhas abordando o Listener Middleware, um Middleware bem conhecido e utilizado na comunidade de Redux. Ele serve para escutar ações que são feitas dentro do Redux e realizar outras tarefas complexas dentro dele.

Vamos ver alguns exemplos do que faremos neste curso.

O que aprenderemos neste Curso?

Vamos abrir o emulador com o Jornada Milhas. Se atualizarmos a página, veremos alguns snackbars coloridos subindo da parte inferior da tela, informando que a viagem está sendo buscada e que foi encontrada com sucesso. Isso está sendo feito no Listener, que está escutando as viagens sendo buscadas e criando os stackbars a tempo.

Além disso, a seção de origens e destinos (que são chamadas a fazer para a API), estão sendo buscadas no Listener. Por exemplo, se os filtros estiverem funcionando e clicarmos rapidamente no botão "Ida e Volta" e em seguida no botão "Somente Ida", o Listener vai escutar as queries (consultas) do RTK Query e, se houver mais de uma, ele vai cancelar aquela que não está sendo utilizada, e só teremos a última query sendo buscada. Isso ajuda muito na performance, pois resultará em apenas uma busca.

Vamos aprender tudo isso com o Listener e entender o que ele consegue proporcionar, como:

Quais são os pré-requisitos?

Como pré-requisito, recomendamos que você tenha entenda sobre:

Isso é bem importante. Caso não tenha estudado a Formação que abrange essas áreas, mas saiba sobre o que estamos falando, também conseguirá assistir a este curso tranquilamente.

Se interessou pelo conteúdo? Então, nos vemos no próximo vídeo.

Conhecendo o Listener - Clonando o projeto

Para começarmos o curso, precisaremos do nosso repositório.

Caso você venha do curso anterior de RTK Query, recomendamos que baixe o novo repositório em vez de usar o que já tem, porque esse repositório tem várias mudanças do curso de RTK Query para este que vamos iniciar agora, e assim evitamos perder tempo com coisas que já conhecemos.

Clonando o projeto

Com o GitHub aberto, no repositório que chamamos de jornada-milhas-listener, clicaremos no botão verde "Code" e copiaremos a URL, um procedimento padrão do GitHub. Em seguida, entraremos no terminal e escreveremos o comando git clone, seguido da URL que acabamos de copiar.

git clone https://github.com/lfrprazeres/jornada-milhas-listener.git

Após o término do clone, ele ainda não estará com as dependências. Usaremos o comando cd para entrar na pasta.

cd jornada-milhas-listener

Feito isso, estaremos na branch main, mas se voltarmos ao navegador, notaremos que pegamos da branch aula1.2. Recomendamos pegar dessa branch, já que a main pode estar com o código completo do curso.

Se você quiser acompanhar uma aula específica, basta abrir as branches no repositório e pegar o código exatamente no ponto que precisa.

De volta ao terminal, escreveremos o comando yarn build:android.

yarn build:android

Foi retornado um WARNING, dizendo que precisa de suporte e não funcionou ainda, porque precisamos instalar as dependências. Então, digitaremos o comando yarn para podermos instalar as dependências com o Yarn, que funciona como um yarn install.

yarn

Finalizada a instalação, antes de rodar o build do projeto, executaremos o comando code . para abrir o VS Code neste repositório.

code .

Com o VS Code aberto e de volta ao terminal, digitaremos yarn build:android novamente. Agora será instalado esse aplicativo no emulador, que inclusive já está rodando. Recomendamos deixar o emulador em execução desde o início. Além disso, já estamos com o Flipper aberto, debugger utilizado nesse projeto e nessa formação.

Com o Flipper aberto, o emulador rodando e o terminal instalando a aplicação, aguardaremos a conclusão. Ao final, teremos a aplicação instalada e aberta no nosso emulador.

Conclusão

No próximo vídeo, relembraremos algumas coisas que já fizemos e mostraremos as atualizações entre os dois cursos para que possamos começar do mesmo ponto!

Conhecendo o Listener - Mudanças no projeto

Agora vamos falar sobre o projeto e sobre algumas mudanças que ocorreram.

Mudanças no projeto

Estamos com o emulador aberto, mostrando o Jornada Milhas, projeto que utilizamos durante toda a formação de Redux com React Native. No canto superior direito, temos o menu hambúrguer, que tem um botão de login e outro de cadastro, mas não entraremos em detalhes. Além disso, temos a tela principal que temos usado nos últimos cursos.

Antes de falar de fato das mudanças, podemos perceber que a tela de carregamento antes era um modal e agora ela é exibida na parte inferior. Isso vai ser crucial para o que vamos fazer neste curso.

Essa tela está com carregamento infinito, porque não abrimos o nosso servidor. Então, vamos acessar o VS Code, pressionar "Ctrl + '" para abrir o terminal, e digitar o comando yarn server para rodar o servidor, que vai fornecer os dados necessários.

yarn server

Com o servidor rodando, vamos pressionar "Ctrl + '" novamente para fechar o terminal. Em seguida, vamos abrir o emulador e pressionar "R" para recarregar a página. Agora são exibidas as viagens para nós. Até esse ponto, é tudo o que já vimos. São todas as viagens que precisamos. O botão "Ver detalhes" ainda não fizemos, mas você pode ficar à vontade para fazer.

A grande mudança que está entre o curso de RTK Query e este curso, que não trabalhamos durante a gravação, é fazer o filtro funcionar. O filtro funcionar nada mais é do que o Redux do dia a dia. Não trabalhamos com os Middlewares, apenas com o filtro em si.

Se clicarmos, por exemplo, em "Ida e volta" no emulador, ele vai carregar a página novamente e mostrar as viagens de ida e volta em vez de somente ida. Clicando em "Somente ida", ele vai recarregar e mostrar apenas viagens de ida.

O interessante é que, se clicarmos em "Ida e volta" novamente, ele não vai carregar nada, porque o RTK Query armazenou aquilo no cache. Isso nos ajuda a pegar algumas das coisas que já implementamos.

Vamos mostrar isso no código. Com o VS Code aberto, entraremos em "src > store > reducers > filtro > index.ts", onde temos todos os filtros que utilizamos, como tipo, pessoas, origens, destinos, dataIda, dataVolta, entre outros.

Temos duas actions em reducers, que são mudarFiltro e resetarFiltros. resetarFiltros é quando clicamos no botão de resetar filtros, e mudarFiltro pega um objeto com alguns filtros que queremos mudar e acopla esse objeto novo no Redux com o objeto antigo.

Na página Home, em "src > pages > Home > index.tsx", não temos mais muita informação, porque separamos tudo em arquivos diferentes, isto é, em componentes diferentes. Dentro de "src > pages > Home > components", agora temos as pastas "Filtros" e "Viagem", correspondentes à parte de cima com os filtros e à parte de baixo com as viagens.

Em "Filtros > index.tsx", conseguimos encontrar todas aquelas informações que tínhamos do lado de cima. Em vez de termos vários useState diferentes, agora temos o useAppSelector(), que pega todas as informações que precisamos do Redux: destinos, origens e filtros.

Então, obtemos as informações, e até temos um hook para que possamos trocar a origem e o destino e coisas do tipo, que são apenas algumas funções que sabem trocar o tipo, a origem e o destino.

O mais importante que você precisa saber é que conseguimos migrar as coisas que eram useState para o Redux, e saindo da questão dos filtros, também temos o SnackBar, que antigamente era feito com o useContext e agora é feito com o Redux, porque também vamos utilizar esse recurso neste curso.

Conclusão

Agora você já tem uma ideia de como funciona o projeto, caso tenha começado do zero, e para você que veio do curso anterior de RTK Query, compreendeu as diferenças feitas no núcleo do código.

Não houve muita mudança, mas implementamos algumas funcionalidades para que possamos partir de um ponto mais avançado, para atingirmos o que realmente queremos aprender neste curso: o Listener Middleware.

Agora que sabemos tudo isso, vamos para o próximo vídeo!

Sobre o curso React Native: escutando ações em tempo real com Listener Middleware

O curso React Native: escutando ações em tempo real com Listener Middleware possui 73 minutos de vídeos, em um total de 40 atividades. Gostou? Conheça nossos outros cursos de React Native em Mobile, ou leia nossos artigos de Mobile.

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

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

Plus

De
R$ 1.800
12X
R$109
à vista R$1.308
  • Acesso a TODOS os cursos da Alura

    Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

Matricule-se

Pro

De
R$ 2.400
12X
R$149
à vista R$1.788
  • Acesso a TODOS os cursos da Alura

    Mais de 1500 cursos completamente atualizados, com novos lançamentos todas as semanas, emProgramação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Luri, a inteligência artificial da Alura

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

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

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