React: gerenciando estados globais com Recoil

Conhecendo a biblioteca Recoil - Apresentação

Olá, estudante! Boas-vindas ao curso de Recoil! Meu nome é Mônica Hillman e vou te acompanhar nessa jornada.

Audiodescrição: Mônica se descreve como uma mulher branca, de cabelos longos e loiros. Utiliza um óculos de armação prateada, possui um piercing no septo e veste uma camiseta preta. À sua frente, um microfone na altura do pescoço. Ao fundo, uma estante com itens decorativos sob uma iluminação degradê azul e roxo.

Neste curso, aplicaremos a biblioteca Recoil em uma aplicação já existente chamada Indexa, uma lista de contatos. Vamos entender essa aplicação?

Na tela inicial, vemos um logotipo, uma frase e uma barra de pesquisa. Se digitarmos "teste" na barra de pesquisa, o sistema indicará que nenhum contato corresponde a essa palavra. Ao removermos o termo pesquisado, todos os contatos serão exibidos. Atualmente, temos apenas o Gato Bonifácio na lista.

Para adicionar um novo contato, clicamos no botão "Criar novo contato", que nos leva à rota de cadastro. Essa página contém um formulário com campos para o link da imagem, nome e número. Vamos inserir uma imagem qualquer, nomear o contato como "Gato Cerelepe" e adicionar um número fictício. Depois, clicamos no botão "Salvar alterações".

Ao retornar para a tela inicial, veremos dois contatos: Bonifácio e Cerelepe. Cada linha da lista exibe opções de edição e remoção. Vamos testar a edição clicando na primeira opção ao lado do contato Cerelepe. Isso nos levará para a rota de edição, onde o formulário já estará preenchido com as informações do contato. Podemos, por exemplo, alterar apenas o nome para "Gato Chiquita" e salvar as alterações.

De volta à tela inicial, o contato estará atualizado. Se quisermos remover um contato, clicamos no ícone de lixeira correspondente ao contato que queremos excluir. Um prompt aparecerá pedindo confirmação para a exclusão. Ao confirmar, o contato será removido da lista.

Durante o curso, implementaremos todas essas funcionalidades, com foco na lógica e no uso do Recoil — a parte visual já está pronta. Trabalharemos com instalação, criação de átomos e selectors, além da implementação de um hook personalizado. Utilizaremos o useRecoilState, que permite acessar e atualizar o estado global do Recoil, e o useRecoilValue, que resgata o valor desse estado sem precisar modificá-lo.

Mas por que aprender tudo isso? No mercado de trabalho, à medida que uma aplicação cresce, é comum precisar de uma biblioteca para gerenciar estados de forma eficiente. O Recoil é uma excelente opção para esse cenário.

Antes de começar, é essencial ter conhecimentos básicos de HTML, CSS, JavaScript e React, pois receberemos o projeto pronto e focaremos exclusivamente na implementação das funcionalidades com Recoil.

Se você quer dominar essa tecnologia, inscreva-se no curso! Nos vemos no próximo vídeo!

Conhecendo a biblioteca Recoil - Instalando a biblioteca Recoil no projeto

Vamos entender melhor a estrutura do nosso projeto?

Entendendo a Estrutura da Aplicação

Estamos desenvolvendo uma aplicação de lista de compras com três rotas. A primeira é a tela inicial, que apresenta um container com algumas imagens, um campo de digitação, um botão para criar um novo contato e uma lista contendo as informações das pessoas salvas.

Ao clicar no botão de criação de contato, o usuário é redirecionado para um formulário que solicita o link da imagem, o nome e o número do contato. Após inserir os dados e clicar em "Salvar alterações", a tela é atualizada, mas as informações não são armazenadas. Isso pode ser confirmado ao retornar à tela inicial, onde nenhum contato aparece na lista.

Entendendo a Estrutura de Arquivos e Componentes

Cada item da lista possui opções para edição e remoção, porém, essas funcionalidades ainda não estão implementadas, tornando a página estática. Como a lista de contatos e os dados de cada contato serão utilizados em todas as telas, é necessário garantir a interação com essas informações. Assim, na tela de edição, será possível modificar os dados no back-end; na tela de criação, adicionar novos contatos; e na tela inicial, exibir, editar ou remover os registros.

A aplicação conta com diversos componentes. Ao abri-la no Visual Studio Code, é possível visualizar, no canto esquerdo, dentro da pasta src, uma estrutura organizada. A pasta components contém elementos reutilizáveis, como o botão "Voltar", o container, o formulário, o cabeçalho (Header), o título e o Wrapper. Já as pages representam as páginas da aplicação, cada uma contendo seus respectivos componentes. No caso das telas de edição e cadastro de contatos, há componentes em comum, armazenados na pasta components. A barra de pesquisa e o botão de adição à lista de contatos, exclusivos da tela inicial, estão localizados no Main.

Nosso projeto contém diversos arquivos e pastas, o que pode tornar cansativo mencionar todos individualmente. O essencial é garantir que a aplicação permita a manipulação dos contatos sem a necessidade de passar várias props entre diferentes componentes.

Utilizando a Biblioteca Recoil

No React, as propriedades podem ser passadas apenas de um componente pai para um componente filho, mas não no sentido inverso. Isso significa que o componente de nível superior na árvore de elementos pode compartilhar informações com seus descendentes, mas não o contrário.

Para resolver essa limitação, utilizamos bibliotecas de gerenciamento de estado, que permitem centralizar e disponibilizar estados de forma acessível a todos os componentes. Neste curso, adotaremos a biblioteca Recoil.

Para instalar o Recoil no projeto, é necessário consultar a documentação oficial da biblioteca. Na página inicial, o cabeçalho contém a seção "Docs", que leva à documentação completa. Dentro dessa seção, há diversas formas de instalação, mas focaremos na opção "Getting Started", localizada no menu lateral esquerdo.

A seção "Getting Started" da documentação do Recoil explica como utilizá-lo em um projeto React desde a criação da aplicação. Como já temos um projeto pronto, podemos pular essa parte e ir direto para a instalação.

A documentação apresenta diferentes opções de ferramentas para instalação, e utilizaremos o npm. Para isso, copiamos o comando npm install recoil e voltamos ao Visual Studio Code.

Caso nenhum terminal esteja aberto, podemos acessá-lo clicando na sétima opção do cabeçalho do Visual Studio Code, selecionando "Terminal" e, em seguida, "Novo Terminal". No terminal, colamos o comando npm install recoil e executamos. Se o Recoil ainda não estiver instalado no projeto, o processo pode levar alguns instantes. Basta aguardar até que a instalação seja concluída.

Configurando o RecoilRoot

Com o Recoil instalado, podemos começar a utilizá-lo. Na documentação, dentro de "Getting Started", há um ponto importante sobre o uso do RecoilRoot. Esse é o primeiro passo após a instalação: devemos envolver a aplicação com o RecoilRoot, garantindo que todos os componentes dentro dele possam acessar todos os outros gerenciados pela biblioteca na aplicação.

De volta ao Visual Studio Code, aplicamos essa configuração no arquivo main.jsx, que é o principal dentro da pasta src (não o que está dentro de pages). Esse arquivo contém a criação da raiz do React, o StrictMode e o componente App:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
      <App />
  </StrictMode>,
)

Logo após o StrictMode e antes do App, envolvemos o App com o RecoilRoot, garantindo que todos os componentes da aplicação de lista de contatos estejam dentro da raiz do Recoil.

Além disso, é fundamental importar o RecoilRoot do Recoil. Se o Visual Studio Code não fizer isso automaticamente, podemos clicar na palavra, pressionar "Ctrl + Espaço" no teclado e selecionar a sugestão de importação. Caso isso não funcione, podemos adicionar a importação manualmente com import { RecoilRoot } from 'recoil'.

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'
import { RecoilRoot } from 'recoil'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <RecoilRoot>
      <App />
    </RecoilRoot>
  </StrictMode>,
)

Próximos Passos

Com a biblioteca instalada e o RecoilRoot configurado, podemos seguir com o desenvolvimento da aplicação. Vamos para o próximo vídeo para continuar a implementação!

Conhecendo a biblioteca Recoil - Implementando átomos do Recoil para gerenciar estado

Agora que instalamos o Recoil e configuramos o RecoilRoot, precisamos implementar uma nova funcionalidade. Precisamos de um local centralizado para armazenar as informações dos contatos e permitir seu acesso a partir de qualquer componente ou página, sem a necessidade de enviá-las via props. Para isso, o Recoil fornece um recurso chamado átomo.

Criando o Átomo

Para criar um átomo, seguiremos este processo no Visual Studio Code: no explorador de arquivos, localizado normalmente à esquerda da tela, clicamos com o botão direito do mouse sobre a pasta src. Selecionamos "New Folder"* e nomeamos a nova pasta como atoms. Sobre essa pasta, clicamos novamente com o botão direito do mouse e selecionamos "New File". Nomearemos esse arquivo como contatosState.js.

Definindo o Átomo

Agora, vamos construir o átomo. Começamos declarando a variável com export const contatosState. Essa estrutura permite que a variável seja acessada em outros arquivos. Para definir que essa variável será um átomo, utilizamos atom(). Dentro do atom(), passamos um objeto com as informações essenciais para seu funcionamento.

A primeira configuração essencial dentro de um átomo é o seu identificador único. Para isso, utilizamos key: "contatosState". Esse identificador deve ser exclusivo para evitar conflitos caso seja necessário criar outros átomos no futuro. Como este átomo será utilizado especificamente para armazenar contatos, faz sentido nomeá-lo como "contatosState".

Em seguida, definimos o valor inicial do estado. Esse valor é representado pela propriedade default. Podemos atribuir uma string vazia (""), um objeto vazio ({}) ou um array vazio ([]), que é o mais adequado para armazenar múltiplos contatos.

Caso desejemos iniciar o átomo com informações já preenchidas, basta adicionar os dados dentro do array. Por enquanto, manteremos vazio.

export const contatosState = atom({
    key: "contatosState",
    default: [],
})

O atom não é uma funcionalidade nativa do JavaScript, então precisamos importá-lo da biblioteca Recoil. O Visual Studio Code pode sugerir a importação automaticamente ao pressionarmos "Ctrl + Espaço" sobre a palavra atom. Caso isso não ocorra, podemos adicionar manualmente a seguinte linha import { atom } from "recoil" no início do arquivo.

import { atom } from "recoil";

export const contatosState = atom({
    key: "contatosState",
    default: [],
})

Com isso, nosso átomo estará pronto para ser utilizado na aplicação!

O Que é um Átomo?

Falamos bastante sobre átomos, criamos um átomo e o importamos do Recoil, mas afinal, o que é um átomo? O Visual Studio Code possui uma funcionalidade interessante: ao passar o mouse sobre atom, ele exibe uma explicação indicando que um átomo representa um fragmento de estado que pode ser lido e atualizado.

No contexto do React, quando falamos de estados, estamos nos referindo a variáveis que armazenam valores e podem ser atualizadas sem a necessidade de recarregar a página. Isso permite que a aplicação identifique automaticamente as mudanças e re-renderize apenas os componentes que dependem daquele estado.

Próximos Passos

Agora que centralizamos as informações dos contatos em um único arquivo, vamos continuar o desenvolvimento do nosso projeto, conectando esse estado à nossa API, que será o JSON Server.

Nos vemos lá!

Sobre o curso React: gerenciando estados globais com Recoil

O curso React: gerenciando estados globais com Recoil possui 86 minutos de vídeos, em um total de 47 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:

• Conhecendo a biblioteca Recoil
• Recuperando dados e hook useRecoilState
• Salvando contatos
• Editando informações
• Deletando contato e fazendo pesquisa