Recoil: Gerencie estados no React facilmente (passo a passo)

Você já teve dificuldades em compartilhar estados entre seus components do React? Ou já teve dificuldades na hora de usar o Redux? O Recoil chegou para te ajudar a não passar mais aperto.

O Recoil é uma biblioteca criada dentro do Facebook (assim como o próprio React) que tem como objetivo te ajudar a gerenciar estados de uma forma fácil e intuitiva (usar o recoil é como usar um hook qualquer no React).

Neste artigo eu vou te apresentar os principais pontos do Recoil e te mostrar através de um exemplo prático como utiliza-lo na suas aplicações, então pega seu café, respira fundo e vem comigo.

 

 

Entendendo o Recoil

Na versão atual o Recoil é baseado principalmente em dois pilares, os Atoms e os Selectors, vamos falar um pouco deles para você compreender a mágia por trás desta lib de gerenciamento de estados do React.

 

Atoms

Atoms são unidades de estado, é possível atualizar e ler estes estados de uma forma fácil.
Também é possível conectar seus components a estes Atoms para que quando eles sejam atualizados os components sejam renderizados novamente.

Você também pode usar os Atoms ao invés dos estados locais dos components e utiliza-los para compartilhar os estados entre muitos components.

 

Exemplo: Declarando um Atom (estado) para armazenar o tamanho de uma fonte de texto:

Obs: Use chaves únicas para definir seus Atoms (isso ajuda no debug e evita problema no compartilhamento de estados)

 

Usando um Atom:

Ps: Note como a experiencia é a mesma se usar o hook useState.


Atualizando um Atom (usando o hook useRecoilState):

Ps: Esses exemplos vem da documentação oficial 🙂

 

Selectors

Os Selectors sâo funções puras (que tem como objetivo devolver valores derivados dos Atoms) que recebem um Atom como argumento, quando o Atom que veio como argumento é atualizado o selector também atualiza o valor de retorno.
Assim como no caso dos Atoms, os Components também podem se ‘inscrever’ para serem avisados quando os selectors forem atualizados, quando isso acontece eles são renderizados novamente.

 

Declarando um Selector:

Obs: O get é usado para chamar o Atom associado, quando um get é declarado dentro do Selector ele gera uma ligação entre eles, quando o Atom for atualizado o Selector também será.

 

Usando um Selector:

Ps: Esses exemplos vem da documentação oficial 🙂

 

 

Recoil na Prática

Neste artigo nós vamos criar uma sessão de comentários (lista com comentários anteriores e campo para escrever um novo) que terá seus estados gerenciados através do Recoil, neste exemplo vamos demonstrar como organizar seus atoms e selectors e como utiliza-los nos components de forma fácil.

 

 

Dependências

  • NodeJs

  • Npm ou Yarn

 

 

Passo a Passo

 

Gerando o Projeto e instalando o Recoil

1 – Para gerar o projeto rode:

2 – Entre no projeto:

3 – Instale o Recoil rodando:

Npm

Yarn

4 – Crie a pasta de components, o component Comments, o component Comment e o Component Form rodando:

Detalhes:

  • – O component Comments vai exibir a lista de comentários e um formulário para a criação de um novo comentário.
  • – O component Comment vai exibir um único comentário (ele será chamado por comments)
  • – O component Form vai permitir a criação de um novo comentário (ele será chamado por comments)

5 – No index.js do comments coloque a base do component:

6 – No index.js do comment coloque a base do component:

7 – No index.js do form coloque a base do component:

8 – Em app.js coloque:

Detalhes:

  • – Importamos e incluimos o component Comments que vai exibir a lista de comentários e o formulário para criar um novo comentário.
  • – Todos os components que vão usar o Recoil precisam ter como pai na arvore de components o RecoilRoot, por isso importamos ele e incluimos em volta do component Comments (e de todos os possíveis components que usariamos).

 

 

Preparando os components

1 – No components Comments coloque:

Detalhes:

  • – Importamos o component Comment (para exibir a lista de comentários)
  • – Chamos o component Comment três vezes passando o username (de forma fixa inicialmente, depois vamos mostrar os comentários usando os estados)

2 – No component Comment coloque:

Detalhes:

  • – Incluímos o recebimento de props (onde receberemos o username e o texto do comentário)
  • – Exibimos o username e o texto recebido de uma forma simples

3 – No component Form coloque:

Detalhes:

  • – Nós criamos uma estrutura básica de um formulário para o envio de comentários

4 – Suba o servidor rodando:

Npm

Yarn

 

 

Criando e consumindo o Atom

1 – Crie a estrutura de pastas onde ficaram os atoms e selectors rodando:

Detalhes:

  • Eu prefiro organizar elementos diferentes em pastas diferentes. Por exemplo, eu separo ou components em uma pasta, os atoms e selectors em outras e etc, mas é comum ver no mundo Js a separação por feature, ou seja, colocar tudo que tem a ver com comentários em uma única pasta.

  • Não existe uma maneira necessariamente mais correta, mas a minha experiencia pessoal aponta que é mais fácil entender toda a sua estrutura quando ela está separada pela natureza dos elementos 🙂

2 – Crie agora os arquivos onde vão ficar o Atom e o Selector de comentários.

3 – No Atom que criamos coloque:

Detalhes:

  • Vamos usar este Atom (estado) para salvar o array de comentários da nossa aplicação

  • Key é o nome único que damos a este estado (no caso commentsState) e default é o valor que ele vai iniciar (no caso um comentário)

4 – Atualize o component Comments para exibir os comentários apartir do Atom:

Detalhes

  • Primeiro importamos o hook useRecoilState para podermos usar o Recoil no nosso component

  • Depois importamos o nosso Atom criado anteriomente

  • Depois usamos o Hook passando nosso Atom commentsState (em: const [comments, setComments] = useRecoilState(commentsState)) para criar uma constante com os comentários (comments) e uma função para alterar o Atom (setComments)

  • Finalmente para usar os commentários que vem do Atom nós criamos um looping (comments.map…) que pega cada comentário de comments e exibe usando o component Comment

5 – Para ver o resultado suba o servidor:

Npm

Yarn

 

 

Criando e usando o Selector

1 – Agora vamos criar um selector que conta o número de comentários, no selector que criamos coloque:

Detalhes

  • Primeiro importamos o selector da biblioteca recoil para podermos criar nosso próprio selector

  • Depois importamos nosso state Comments para poder utiliza-lo na hora de contar os comentários (selectors podem receber Atoms ou outros Selectors e eles são atualizados assim que suas dependencias mudam)

  • Declaramos nosso selector passando uma key que é a chave única que identifica aquele selector (no caso commentsCountState) e depois passando um get que recebe uma função que executa o processamento para dar o resultado desejado (no caso contar o numero de comentários do array).

  • Dentro da função nós também chamamos um get passando o Atom commentsState, ele é responsável por pegar o valor do Atom para o processamento e também por conectar o selector ao Atom fazendo com que o Selector mude quando o Atom mudar.

2 – No nosso component Comments vamos incluir a contagem de comentários colocando:

Detalhes

  • Primeiro importamos o useRecoilValue para poder usar nosso selector

  • Depois importamos nosso selector

  • Declaramos nosso selector e colocamos o resultado dele em uma constante (const commentCount = useRecoilValue(CommentCountState))

  • Exibimos o número de comentários chamando {commentCount}

3 – Para ver o resultado suba o servidor:

Npm

Yarn

 

 

Atualizando o valor do Atom

1 – Para podermos adicionar comentários ao Atom nós precisamos passar a função setComments para o Component Form, então em Comments atualize:

De:

Para:

2 – Vamos atualizar o nosso component Form para que ele se transforme em um component controlado (para que seus inputs estejam associados a states locais), coloque nele:

Detalhes

  • Incluimos o hook de estados locais (useState)

  • Criamos os estados correspondentes ao Input (username e text)

  • Nas Tags input nós associamos seus valores aos estados e chamamos a função correspondente para que quando eles sejam atualizados eles atualizem também os estados

3 – Agora vamos criar uma função para que quando o form seja submetido ele chame o setComments que passamos anteriomente para atualizar o nosso Atom, no component Form coloque:

Detalhes

  • Primeiro criamos a função handleSubmit que é chamada assim que submetemos nosso form

  • Nela primeiro nós passamos o comando para impedir que a página seja atualizada assim que o form fosse submentido (evt.preventDefault();)

  • Depois nós chamamos o setComments passando os comentários anteriores (usando o operado spread …props.comments) e o novo comentário gerado através do form

  • Chamamos também as funções setUsername e setText para limpar os campos depois de enviarmos o form

  • Por fim nós colocamos o onSubmit={handleSubmit} na Tag form para que ela chamasse nossa função na hora do envio

4 – Para ver o resultado suba o servidor:

Npm

Yarn

5 – Pronto, nosso exemplo foi finalizado com sucesso o/

 

 

Conclusão

Neste exemplo foi fácil perceber como é realmente prático utilizar o Recoil para gerenciar e compartilhar estados entre components no React, espero que você considere utilizar ele em seus próximos projetos.

O Recoil ainda é um trabalho em andamento (eu escrevo este artigo em Julho de 2020 :)) e ele deve receber muitas features interessantes como o controle dos side effects (que envolve a chamada da APIs para sincronizar os estados) e muito mais.

Você pode acessar o exemplo completo no Github: https://github.com/OneBitCodeBlog/recoil-react

Obrigado por ler este artigo, se gostou envie ele para um(a) amigo(a), isso nos ajuda a levar o conhecimento a mais pessoas.

Grande abraço,

Leonardo Scorza

 


 

Programador(a), uma pergunta importante!

 

Você sente verdadeiramente que é um Programador(a) completo(a)?


Por muito tempo eu fiquei em dúvida se eu estava pronto ou não e essa insegurança me levou a pesquisar profundamente sobre o que realmente é necessário para ser um programador web completo.

Depois de fazer muitos treinamentos, ler muitos livros, conversar com outros desenvolvedores, ir a eventos e até trabalhar em empresas do Brasil e do exterior foi que eu pude encontrar as bases fundamentais para ser um programador Web com confiança (sem medo de buscar jobs e assumir grandes projetos).

Eu peguei todo esse conhecimento e somei com toda a didática que eu aprendi criando cursos e tutoriais que são acessados por milhares de pessoas todos os meses e criei um treinamento chamado Programador Full Stack Javascript.

Nele eu vou te mostrar o ‘caminho das pedras’, ou seja, o essencial para você dominar a programação web, se sentir mais completo(a) e conseguir o seu tão merecido Job de respeito.

Então se você quer evoluir de verdade (sem perda de tempo), clica no link abaixo e conheça o treinamento agora.

Link: Programador Full Stack Javascript em 8 semanas ->

 


 

0 0 vote
Article Rating
julho 10, 2020
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
Feito com s2 por OneBitCode
0
Would love your thoughts, please comment.x
()
x
%d blogueiros gostam disto: