Alura > Cursos de Mobile > Cursos de React Native > Conteúdos de React Native > Primeiras aulas do curso React Native: aplicando Middlewares com Redux Thunk

React Native: aplicando Middlewares com Redux Thunk

Entendendo o problema - Apresentação

Olá! Meu nome é Luiz Fernando e sou instrutor aqui na Alura.

Audiodescrição: O instrutor se declara como um homem pardo de cabelo curto, no estilo degradê, bigode e cavanhaque. Está usando uma camisa da Alura azul marinho e, ao meu fundo, há uma luz azul e uma luz roxa projetadas na parede.

Neste curso, daremos continuidade à formação de React Native com Redux, desta vez abordando a introdução aos middlewares, mais especificamente sobre um middleware chamado Redux Thunk, que existe há muito tempo dentro do Redux.

Vamos continuar utilizando o aplicativo Jornada Milhas, no qual conseguimos fazer login, cadastrar e carregar viagens. Nós já trabalhamos com o login e o cadastro em outros cursos e, neste curso, vamos utilizar a tela inicial, que é a tela de carregamento de viagens.

O que faremos? Primeiramente, vamos refatorar a tela. Ao invés de utilizarmos State, implementaremos o Redux, que até então ainda não tinha sido usado. Todo o processo de quando a tela está buscando, e quando ela para de buscar, ou seja, esses status de loading ou de não loading, faremos isso com o Redux Thunk.

Para exemplificar, ao atualizarmos a página do aplicativo, conseguiremos visualizar uma animação de carregamento e, ao final, ele mostra as viagens às pessoas usuárias. Rolando a tela até o final e clicando no botão "ver mais", na borda inferior do aplicativo, mostra-se o mesmo modal com a informação de carregamento e carrega as demais viagens.

Toda essa funcionalidade será abordada neste curso, e entenderemos o porquê do middleware é tão importante no Redux.

Se não entendeu totalmente essa pequena explicação, sinta-se à vontade para verificar os pré-requisitos deste curso, bem como outros cursos da formação antes de prosseguir nesse. Assim, conseguirá entender com mais clareza o que foi mencionado.

E se compreendeu e sentiu curiosidade, siga comigo que neste curso vamos aprender muito!

Entendendo o problema - Funcionamento do projeto

Para começarmos este curso, primeiro precisamos clonar o projeto. No momento, estou com o meu GitHub aberto. Possivelmente, você abrirá o GitHub da Alura, mas o código será o mesmo.

Acima da lista de arquivos, no canto superior direito, há um botão verde escrito "Code". Após clicar neste botão, um menu suspenso abrirá na parte inferior, com a guia "Local" e a opção "HTML" selecionadas. Nessa opção tem uma barra de endereços com uma URL e, à direita da URL, há o botão de copiar, onde clicaremos para copiar a URL.

Após isso, abriremos o terminal. No meu caso, ele já localizado na minha pasta da Alura. Digitaremos git clone e colaremos a URL que copiamos. Pressionaremos "Enter" para clonar o arquivo, o que será rápido, pois ainda não instalamos as dependências.

Agora, acessaremos o diretório "jornada-milhas-thunk", codando cd jornada-milhas-thunk. Note que acessamos a branch "master". Porém, antes de instalarmos as dependências, vou explicar um método de organização que costumo usar.

Ao voltarmos para o repositório no GitHub, perceberemos que, na realidade, encontramos na branch "aula1.2". Se já está familiarizado com meus cursos, saberá que sempre separo o código baseado em cada aula e em cada vídeo. Deste modo, a "aula 1.2" se refere ao código do segundo vídeo da aula 1. O primeiro foi a introdução, o segundo é este que você está assistindo.

Portanto, para seguirmos, em vez de entrar na branch master, acessaremos a branch "aula 1.2", e então começaremos esse projeto. Queremos acessar o código referente exatamente a este vídeo aula.

Dica: caso você queira avançar para alguma aula de interesse, queira retomar algum conteúdo ou tenha alguma dúvida, você pode realizar um checkout e acessar a branch exata do código que você quer examinar naquele momento.

Voltando ao terminal, escrevermos git checkout aula 1.2. Agora estamos na branch "aula 1.2", com o código correspondente. Feito isso, codaremos code . para ele abrir o VS Code exatamente na pasta do projeto.

Após o VS Code ser aberto, voltaremos ao terminal e escreveremos yarn, para que possamos instalar as dependências. Enquanto elas estão sendo instalada, vou falar brevemente sobre o que temos no projeto, caso você ainda não o conheça.

Na aba Explorer, que está no lado esquerdo do VS Code, encontramos as pastas do projeto. No meu caso, tenho a pasta "Android", dado que estou utilizando o Windows. Caso esteja utilizando o macOS, provavelmente usará o build que irá gerar uma pasta "ios".

Temos também a pasta "assets", que contém imagens e nosso servidor fake (server.ts). Outra pasta do nosso projeto é a "node_modules", que são as dependências que estamos baixando neste momento.

Na pasta "src" está localizado nosso código propriamente dito. Nela, encontramos algumas pastas. A primeira é a "components" (componentes), com os componentes que são reutilizáveis. Depois temos a "config", que contém a configuração de tema da nossa aplicação.

A pasta "config" deriva do React Native Paper. Ao acessarmos "src > config > theme.ts", na primeira linha do arquivo theme.ts encontramos a importação do DefautTheme do react-native-paper', que é o pacote de estilos que utilizamos nesse projeto.

Primeira linha do arquivo theme.ts

import { DefaultTheme } from 'react-native-paper';

Voltando às pastas do "src", a próxima é a pasta "context" (contexto), que contém os context APIs do nosso projeto. Agora ela só tem o Snackbar, pois nós já refatoramos os outros para utilizar o Redux.

Na pasta "pages" (páginas), estão as páginas do nosso projeto. Na "services" (serviços), estão os serviços que se conectam com a API, nos quais estamos utilizando o fetch.

Outra paste é a "store" (armazenamento), que é o armazenamento do nosso Redux, onde estamos fazendo todas as manipulações que aprendemos durante os cursos. Então, tudo que envolve Redux e Redux Selections, está nessa pasta.

Na pasta "types", que contém os tipos do TypeScript da nossa aplicação. Nela temos o tipo usuario e o tipo viagem, mas também podem ser armazenados outros tipos.

Por fim, temos o arquivo routes.tsx, que está utilizando o React Navigation para gerenciamento das rotas da nossa aplicação. E fora da pasta "src", temos alguns arquivos padrão, como o gitignore e o App.tsx, esse sendo o arquivo principal da nossa aplicação. Esses são apenas alguns dos arquivos da nossa estrutura, que já está bem definida.

Retornando ao terminal para verificar se as dependências já foram instaladas, descobrimos que elas foram instaladas corretamente. Agora vamos executar nosso código.

No terminal, se estiverem com o projeto no Windows, como eu, escrevam yarn build:android. Se estiverem no macOS, escrevam yarn build:ios. Em seguida, pressionamos "Enter".

Então, estou rodando no Android e, no meu caso, já estou com o meu emulador Android aberto. Se seu emulador não estiver aberto, abra o Android Studio e abra o emulador de sua preferência, ou crie um. Neste ponto, você já deve saber como fazer isso. Com o emulador aberto, o comando que executamos rodará automaticamente nele.

Um recurso adicional que vamos precisar para este projeto é o Flipper. Em cursos anteriores desta formação, já explicamos como baixar e configurar o Flipper.

Caso você ainda não tenha visto, o Flipper é um software que consegue capturar as informações que estão rodando no emulador e mostrar algumas informações. Por exemplo ,ele tem o relatórios de falha (crash reporter), onde ele mostra se o código ou se o emulador falhou. Ele também consegue obter informações sobre os logs.

Vamos voltar para o terminal. Ele está levando um tempo para terminar, então vamos aguardar. Uma vez que foi executado nosso script, é mostrado que ele está esperando pelo Metro, que é uma parte do Expo. Ele também está solicitando para eu abrirmos com o Android. A outra opção é abrir com a Web, então provavelmente no iOS estará com essa opção ativada.

Ele já identificou o Watchman, que é parte do Flipper, e já está mostrando a mensagem "Android Bundling complete". Assim, ao selecionarmos nosso emulador, conseguimos ver nosso projeto Jornada Milhas rodando.

Se parecer que eu passei as informações muito rápido, é porque já fizemos esse tipo de configuração em cursos anteriores, que são pré-requisitos para este. Portanto, caso esteja enfrentando muitas dificuldades para configurar o Flipper ou o ambiente de código, consulte os cursos anteriores onde abordamos essas configurações com mais detalhes.

Abrindo o Flipper, na coluna da esquerda, encontramos agora mais opções. Na seção "React Native" temos o Hermes Debbuger (RN), do React Native, e o React DevTools, que nos permitem visualizar a estrutura dos nossos componentes em React.

Já na seção "Enabled" (Habilitado), encontramos o Redux Debugger, que configuramos em cursos anteriores, e nos permite visualizar as nossas ações sendo disparadas. Com isso, conseguimos interceptá-las e ver a diferença que foi feita com essa ação no store e ações similares.

Conseguimos clonar o projeto, baixar as dependências, distinguir as diferenças entre as branches. Também rodamos o Flipper e o projeto.

Agora, com tudo funcionando, vamos descobrir como começar este curso com os middlewares.

Entendendo o problema - Entendendo o problema dos useStates

Agora que nossa aplicação já está em operação, vamos analisar o código para identificar o que precisamos alterar. Portanto, abriremos o VS Code e acessaremos "src > routes.tsx.

Logo no começo do código, entre as importações, começaremos removendo a importação de { Usuario } e de { useState } que não estão sendo utilizados em routes.tsx. Porém, não é nesse arquivo que faremos as principais alterações.

Arquivo route.tsx

import { createDrawerNavigator } from '@react-navigation/drawer';
import Home from './pages/Home';
import Login from './pages/Login';
import Menu from './components/Menu';
import DrawerContent from './components/DrawerContent';
import Cadastrar from './pages/Cadastrar';
import Perfil from './pages/Perfil';

//código omitido

Navegaremos para "src > pages > home > index.tsx". Em outros cursos, nós já realizamos ajustes na tela de login, na tela de cadastro e na tela de perfil, porém, ainda não fizemos alterações na tela principal ou home.

Com o index.tsx aberto, vamos observar os detalhes do código e identificar o que podemos mudar. Para isso, vou fechar a aba do Explorer, pressionando Ctrl B para fechá-la.

Rolando pelo código, encontramos um useSelector, que utilizamos para verificar o usuário logado, recurso que implementamos quando criamos o Redux de usuário. Entretanto, há vários useStates.

Temos um useState para viagens, outro para origens e outro para destinos, sendo que os dois últimos são filtros. Ou seja, temos viagens e filtros ao mesmo tempo, tornando o código confuso. Há ainda um useState de setBuscando.

Se clicarmos duas vezes em setBuscando, na linha 40, e depois pressionarmos "Ctrl + F", a IDE fará uma busca por essa palavra, que aparece em uma barra flutuante no canto superior direito da área de edição de código.

Clicando na seta para baixo dessa barra, encontramos o bloco carregarMais. Como o próprio nome sugere, esse bloco serve para carregar mais viagens, e nele temos que setBuscando(true) e, ao final do bloco, definir setBuscando(false). Entretanto, sabemos que quando queremos carregar mais informações, nós desejamos que este processo seja automático.

Vejam a quantidade de trabalho que temos utilizando vários useState diferentes. O componente, cuja principal função deveria ser apenas apresentar o que desejamos, acaba tendo o trabalho adicional de gerenciar o estado das viagens, dos filtros, além de diferenciar quando está buscando informações ou não. Percebam a quantidade de responsabilidades deste componente.

O que faremos neste curso é começar a simplificar este componente. Utilizaremos Redux juntamente com o que aprenderemos sobre Middlewares e Redux Thunk para facilitar esse fluxo de informação.

Ao invés do componente ter a responsabilidade de manter e efetuar mudanças nos estados, ele apenas solicitará ao Redux que execute determinada ação. Por exemplo, ele irá solicitar a busca por viagens ou carregamento de uma página, e então apenas retornará o resultado dessa operação.

Queremos ainda que o Redux nos informe sobre o status do processo de busca, como por exemplo, se está buscando informações, se está carregando ou não, se houve algum erro ou não.

É tudo isso que vamos aprender neste curso.

Sobre o curso React Native: aplicando Middlewares com Redux Thunk

O curso React Native: aplicando Middlewares com Redux Thunk possui 100 minutos de vídeos, em um total de 45 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 powered by ChatGPT

    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