Alura > Cursos de Mobile > Cursos de React Native > Conteúdos de React Native > Primeiras aulas do curso React Native: gerenciando estados globais com Redux Toolkit

React Native: gerenciando estados globais com Redux Toolkit

Apresentando o projeto - Apresentação

Olá! Boas-vindas a este curso!

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

Autodescrição: Sou um homem pardo com cabelo curto liso e preto. Tenho bigode e uma barba que contorna meu maxilar, ambos curtos. Estou usando uma camisa azul marinho da Alura e estou sentado em uma cadeira de encosto alto nas cores preto e azul. Atrás de mim tem uma parede branca com uma iluminação azul.

Neste curso React Native: gerenciando estados globais com Redux Toolkit, vocês aprenderão sobre o Redux Toolkit, que é um dos gerenciadores de estados mais utilizados do React e React Native atualmente.

Para isso, utilizaremos o projeto Jornada Milhas, e faremos a refatoração dele para conseguirmos usar o Redux. Esse é um projeto bem robusto, então, no decorrer da formação, iremos refatorar pequenas partes dele.

Neste curso, faremos a refatoração do Logar, do Deslogar e do Cadastrar Usuário, passando o estado de usuário para dentro do Redux. Para isso funcionar, aprenderemos sobre:

Estou com o aplicativo aberto no emulador. Se eu clicar no menu sanduíche, no canto superior direito, e depois em "Login", sou direcionado para tela de Login. Ao preencher os campos com os dados de login padrão, que eu criei na plataforma, e clicar no botão "Acessar minha conta", percebemos que o usuário logou.

Clicando novamente no menu sanduíche e clicar no botão "Sair", realizamos o logout. Portanto, as ações de logar e deslogar estão funcionando.

Aprenderemos também a configurar o Flipper, que é um software para conseguirmos debugar nosso Redux. Dessa forma, descobriremos quais actions foram disparadas, quanto tempo isso durou e como isso alterou nosso estado. Portanto entenderemos como fazer essas configurações e como funciona cada parte do Redux no nosso curso.

Como pré-requisitos, eu espero que vocês tenham os seguintes conhecimentos básicos:

Então vocês precisam ter o Git instalado no computador de vocês assim como o Android Studio, se estiver no Windows ou no Linux, ou o Xcode se estiver no Mac. Caso prefiram, também podem usar o Android Studio no Mac. As demais configurações, como as do Flipper, aprenderemos neste curso.

Espero que gostem do conteúdo e vejo vocês em breve!

Apresentando o projeto - Clonando o projeto

Para começarmos nosso curso, precisamos primeiramente clonar o projeto para conseguirmos utilizá-lo. Para isso, acessaremos o GitHub do projeto jornada-milhas-redux, que pode ser na minha conta ou na conta da Alura, porque o código será o mesmo.

Com o repositório do projeto aberto, clicaremos no botão verde escrito "Code", no canto superior direito do repositório, abrindo uma janela suspensa para baixo. Nela temos a aba HTTPS com o endereço do repositório e, à direita do endereço, o botão de copiar, onde clicaremos.

Feito isso, acessaremos o terminal para executarmos o comando. Eu vou executar com o Git, escrevendo git clone https://github.com/alura-cursos/jornada-milhas-redux.git, colando a URL que copiamos. Em seguida, pressionamos "Enter" para ele clonar o repositório. Essa clonagem é bem rápida, porque ainda não temos as dependências.

Nosso próximo passo é acessar esse arquivo, codando cd jornada-milhas-redux. Uma vez acessado, nós abriremos o VS Code nessa página, escrevendo code . e pressionando "Enter". Lembrando que vocês podem usar a IDE que preferirem, mas eu prefiro o VS Code.

Após abrirmos o VS Code, iremos instalar as dependências. Recomendo que vocês também façam essa instalação com o Yarn, mas se quiserem instalar com o NPM (Node Package Manager) ou PNPM (Plug'n'Play Package Manager), não tem problema.

Eu prefiro utilizar o Yarn. Inclusive tem o yarn.lock dentro do projeto, que é um arquivo que conseguimos instalar na versão em que eu configurei para vocês. Por isso é melhor você utilizar a Yarn.

Portanto, no terminal, escreverei yarn e pressionarei "Enter", que é o comando para instalar as dependências da Yarn. Vocês podem escrever o mesmo ou podem usar o npm install se estiverem usando o NPM. A instalação pode demorar um pouco, então eu retorno quando terminar.

[Tela de carregamento com sons de circuitos]

Quando instalação acaba, podemos limpar o terminal, pressionando "Ctrl + L". Assim não precisamos ver tanta informação na tela. Teoricamente, agora temos o nosso projeto com todas as dependências.

O passo seguinte é abrirmos o emulador e rodarmos o projeto, para assistirmos ele abrindo no emulador. Então abriremos o Android Studio, onde clicaremos no botão More Actions, que fica abaixo do três botões principais, abrindo um menu suspenso. Nele, clicaremos em "Virtual Device Manager".

Com isso, abriremos a janela Device Manager, onde eu já tenho um emulador, lembrando que na atividade anterior, vocês encontram o artigo ensinando o passo-a-passo para conseguirem criar o emulador, que é bem básico. Clicando no botão de play, conseguimos inicializá-lo. Ele pode abrir ou não no projeto, mas não faz diferença.

Enquanto ele abre, voltaremos para o terminal e, faremos um pouco diferente dos projetos em Expo, nos quais simplesmente escrevemos yarn start. Ao invés de simplesmente emularmos, como se o projeto estivesse instalado no nosso emulador, faremos a instalação do projeto direto no emulador. Isso porque, no futuro, precisaremos dessa feature funcionando.

Portanto, ao invés de escrevermos yarn start, codaremos yarn build:sistema-operacional-do-emulador. Por exemplo, como estou usando um emulador Android, escreverei yarn build:android, mas se estiverem usando um emulador de Iphone, vocês escreverão yarn build:ios. Após essa linha de código, pressionaremos "Enter", que rodará esse comando.

No meu caso, ele será um pouco mais rápido, porque eu já rodei esse comando antes na minha máquina. Caso o seu demore muito, não tem problema, isso é esperado, porque ele realmente está fazendo o build, ou seja, ele está criando esse aplicativo, que depois será instalado dentro do emulador. Assim que esse processo acabar, eu retorno.

[Tela de carregamento com sons de circuitos]

A instalação terminou e o emulador já está abrindo automaticamente o Jornada Milhas. Quando a instalação acabar, aparecerá um QR Code junto a algumas outas informações para vocês.

Inclusive, caso o terminal não execute o aplicativo no emulador automaticamente, basta pressionarem a letra "A" no teclado, como está nas informações: Press a | open Android (Pressione a | abrir Android). Se estiverem no iOS, precisarão ler o QR Code, como costumamos fazer no Expo.

Esse comando é bem parecido com o yarn start. A diferença é que agora o Jornada Milhas é um aplicativo que está instalado no nosso computador, então ele roda de uma forma um pouco diferente. Futuramente, neste curso, descobriremos porque fizemos dessa forma.

Agora nossa aplicação já está funcionando no emulador, como descobrimos ao fazer alguns testes e vermos nossas telas. No próximo vídeo, começaremos a entender um pouco dos códigos: quais são os arquivos que temos, quais são as telas e, principalmente, quais as telas iremos alterar neste curso.

Até lá!

Apresentando o projeto - Conhecendo o projeto

Com nosso projeto instalado, começaremos a entender quais são os arquivos que temos e que eles representam nas nossas telas. Para isso, estou com o VS Code aberto no lado direito da minha tela e o emulador aberto no lado esquerdo, assim vocês também conseguem me ver no canto inferior direito da tela.

Vamos começar analisando os arquivos e pastas principais do VS Code, que estão na aba "Explorador", na lateral esquerda da janela. Todos os arquivos que estão fora das pastas, no final da lista, são arquivos de configuração. Entre eles, temos o App.tsx, que é muito padrão no Expo.

//código omitido

export default function App() {
  return (
      <RNPProvider theme={theme}>
        <SnackbarProvider>
          <NavigationContainer>
            <StatusBar />
            <Routes />
          </NavigationContainer>
        </SnackbarProvider>
      </RNPProvider>
  );
}

Dentro do return() ele tem um RNPProvider, que é um provider do React Native Paper, que eu estou utilizando. Também tem um NavigationContainer, do React Navigation, outro pacote que estamos utilizando. Fora isso, não tem nada de incomum.

Entre os arquivos temos também a configuração babel, no babel.config.js, e a configuração EAS (Expo Application Services), no eas.json, que é um arquivo do Expo para conseguirmos criar os vídeos, como o que criamos. Temos também o app.json, com as configurações principais do Expo.

Outro arquivo é o package.json, para tipagem de ambiente do React. Eu criei esse arquivo, mas ele é bem parecido com o React.js. De toda forma, não precisam se preocupar, porque não vamos alterar esse arquivo.

A pasta "Android" é a pasta que criamos no terminal com o comando yarn build:android. No caso, ela não foi criada porque já existia, mas se estivéssemos em um projeto sem essa pasta, ela seria criada.

Caso vocês façam o yarn build: ios, terá a pasta "ios" no lugar da Android, o que não é um problema, porque elas fazem a mesma coisa. Essa pasta faz com que o projeto rode em um device de Android ou de iOS.

Também temos a pasta "assets", com as imagens que aparecem no nosso emulador. Além das imagens, nela temos o server.ts, que é uma imitação de servidor com alguns dados. Entre eles temos as lista de usuarios, que inicialmente tem um usuário padrão que eu adicionei, e a lista de viagens que teremos no projeto.

Ao abrirmos a pasta "src", temos uma lista com várias pastas, sendo elas: components, config, context, pages, services e types. Começando com a "components", que contém alguns componentes que são reutilizados entre as páginas, sendo eles:

O "DatePicker" é para selecionarmos datas. O "DrawerContent" aparece ao clicarmos no menu sanduíche, que fica no canto superior direito da página. Fazendo isso, um menu é aberto da direita para esquerda, que é o chamado drawer, e o conteúdo desse menu é o Drawer Content, por isso temos esse componente.

O "GenderPicker" aparece quando clicamos no botão "Cadastre-se", dentro do menu drawer. Ele leva para um formulário onde, no campo "Gênero", tem três caixas de seleção com as opções de gênero: feminino, masculino e outro. Esse é o Gender Picker.

O "Menu" é a barra preta que tem na parte superior da tela, contendo o ícone do Jornada Milhas no canto esquerdo e o menu sanduíche no canto direito. Por fim, o "StringPicker" é um modal que aparece quando, na página inicial, clicamos no campo "Origem" ou "Destino". Nesse modal temos o nome de várias cidades. Esses são os componentes reutilizados nas telas.

A próxima pasta do "src" é a "config". Ao abri-la encontramos o arquivo theme.ts, que é o arquivo de temas do React Native Paper. Nele temos algumas cores que estamos reutilizando nas nossas telas.

A pasta seguinte é a "contexts", contendo os Contexts APIs que temos dentro do nosso curso. Não vamos mexer neles agora, mas provavelmente iremos substitui-los no futuro. Atualmente temos dois contexts APIs divididos em duas pastas: "Snackbar" e "Usuario"

Acessando "Snackbar > index.tsx", acessamos o código com o qual conseguimos mostrar uma Snackbar na tela. Já no "Usuario > index.tsx", temos o context API de usuário, se a pessoa usuária logar, deslogar ou excluir a conta, utilizaremos algo de dentro desse arquivo.

Fechando a pasta "contexts", a pasta seguinte é a "pages", que provavelmente é a pasta onde faremos mais alterações. Ao expandi-la, observamos que existem quatro telas dentro do nosso projeto, dentro de pastas: a Cadastras, a Home, a Login e a Perfil.

Expandindo cada uma dessas pastas, encontramos, majoritariamente, três arquivos, que são: index.tsx, styles.ts e types.ts. Nos arquivos index.tsx de cada tela temos os códigos dos componentes em si, em React e React Native. No styles.ts temos os estilos, utilizando o StyleSheet.create. Por fim, o typer.ts é onde tipamos as props dos componentes que estamos utilizando.

No caso da tela Home, que é um pouco mais complexa, temos também o arquivo consts.ts, com algumas constantes. No caso, encontramos os valoresPadrao dos Filtros que temos.

import { Filtros } from './types';

export const valoresPadrao: Filtros = {
  tipo: undefined,
  pessoas: 1,
  origem: '',
  destino: '',
  dataIda: undefined,
  dataVolta: undefined,
  filtrarPorUsuario: 'todas',
}

Além disso, na pasta "Home" também temos a pasta "utils", contendo o arquivo filtros.ts. Nele temos o código para termos funções utilitárias dentro da página Home, como filtrar as viagens e verificar se os filtros estão vazios.

Podemos fechar os arquivos abertos e minimizar todas as pastas ,clicando no quarto botão no canto direito da aba "Jornada Milhas", na coluna da esquerda. Em seguida, vamos expandir a pasta "src" novamente onde, abaixo da pasta "pages", temos a pasta "services", com os arquivos: usuarios.ts e viagens.ts. Esses arquivos são para imitarmos chamadas de API.

Abrindo o arquivo usuaris.ts, encontramos as constantes: carregarUsuarios, cadastrarUsuario, logar e mudarDadosUsuario. Elas são como uma chamada de API para poder cadastrar no servidor, mas, nesse caso, fazemos o cadastro em uma array, que utilizamos como fake API para fazermos ações de cadastro, login, entre outras.

Depois da pasta "services", temos a pasta "types", com tipos padrões do nosso projeto. Ela também tem os arquivos usuarios.ts e viagens.ts. O arquivo usuarios.ts contém os tipos de gênero e os tipos de dados do usuário, como id, nome e data de nascimento.

export type Genero = 'Feminino' | 'Masculino' | 'Outro';

export interface Usuario {
  id: string | number[],
  nome: string,
  dataNascimento?: string,
  genero?: Genero,
  cpf?: string,
  telefone?: string,
  cidade?: string,
  estado?: string,
  email?: string,
  senha?: string,
}

Já em "types > viagens.ts", temos o tipo de viagem, que pode ser ida ou ida e volta, e os dados da viagem em si, que contém dados como título, valor, foto, entre outros.

export type Genero = 'Feminino' | 'Masculino' | 'Outro';

export interface Usuario {
  id: string | number[],
  nome: string,
  dataNascimento?: string,
  genero?: Genero,
  cpf?: string,
  telefone?: string,
  cidade?: string,
  estado?: string,
  email?: string,
  senha?: string,
}

Ao final da pasta "src", após a lista de pastas, temos o arquivo routes.tsx, que contém as rotas do React Navigate. Com isso, já aprendemos tudo que precisamos para entendermos todos os arquivos do nosso projetos. Agora acessaremos o emulador para fazermos uma última revisão das telas em si, já que ainda não navegamos por ela.

Assim que abrimos o nosso projeto, acessamos a página "Home". Nela temos um filtro de viagens e, ao rolarmos a tela para baixo, encontramos algumas promoções de viagens. Após algumas sugestões, no final da página, temos o botão "Ver mais" que, ao clicarmos, mostrará outas opções de viagens.

Clicando no menu sanduíche do canto superior direito, abrimos o menu drawer e, ao clicarmos no botão "login", aparece a tela com o formulário de login. Vamos preencher o campo "E-mail ou CPF" com "luiz@gmail.com", que é o usuário padrão que temos no servidor, e o campo "Senha" com "123".

Fazendo isso e clicando no botão "Acessar minha conta", o login é feito e voltamos para tela home. Inclusive, na parte inferior da tela vemos o snackbar verde com a mensagem "Login efetuado com sucesso!". Esse é o componente "Snackbar" que vimos no projeto.

No campo "Passagens" da Home, abaixo dos campos para definir a data de ida e a data de volta, temos dois botões: um para "Viagens na minha cidade" e outro para "Viagens no meu estado". Portanto, o aplicativo obtém a cidade e o estado do cadastro de usuário para preencher o campo "Origem".

Clicando no menu sanduíche quando o login foi efetuado, temos também o botão "Editar dados pessoais". Clicando nele, somos direcionados para a tela "Meu perfil", a quarta tela da nossa aplicação que ainda não vimos. Nela temos os dados que a pessoa usuária preenche, e podemos alterá-los ou excluir a conta, clicando no botão "Excluir conta", no canto superior direito da tela.

Essas são todas as features. As que iremos usar neste curso são as de Login e Cadastro, ou seja, a de Usuário, em geral. Durante os outros cursos dessa formação, modificaremos outras telas, alterando o filtro, o snackbar e assim por diante.

Então vamos desenvolver e adicionar o Redux em todo esse projeto para aprendermos a facilidade que ele traz. E agora que já temos tudo isso bem explicado para entendermos como o projeto funciona, vamos codar e adicionar o Redux ao nosso projeto!

Sobre o curso React Native: gerenciando estados globais com Redux Toolkit

O curso React Native: gerenciando estados globais com Redux Toolkit possui 112 minutos de vídeos, em um total de 44 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