Primeiros passos com Zustand
![Primeiros passos com Zustand](/content/images/size/w2000/2024/06/-----BLOG-COMMUNITY-BR----Primeiros-passos-com-Zustand.png)
Zustand é uma biblioteca de gerenciamento de estado para aplicativos React. Ela foi projetada especificamente para funcionar com React e torna o gerenciamento de estado simples e eficiente. É open source e compartilho com vocês neste link GitHub o repositório, também o site onde têm um exemplo prático do Zustand.
Para entender melhor o Zustand, devemos saber que um estado, que é a forma de interagir, muda, exibe e armazena informações em uma aplicação React.
Existem dois tipos de estados: local e global. A diferença entre eles é que o primeiro só está disponível e gerenciado dentro do componente onde está definido, é de fácil manutenção e acessibilidade limitada, pois as informações só podem ser compartilhadas por props de um componente pai. Por sua vez, o global tem um alcance ao nível da aplicação, ou seja, qualquer componente pode gerir o estado sem utilizar adereços, o que aumenta a sua complexidade.
Em seus primórdios, o React não tinha bem trabalhado o gerenciamento dos estados globais, já que naquela época as aplicações web em geral não tinham esse problema resolvido. Para resolver isso, o React usou adereços. O problema disso era a quantidade excessiva de renderizações (cargas de tela) que causava, gerando baixo desempenho nas aplicações.
Para resolver este problema, o Redux nasceu em 2015, posicionando-se como o preferido dos desenvolvedores, que criou um único container ou loja e simplificou todos os inconvenientes anteriores, mas o que não foi levado em consideração foi o quão complexo era tecnicamente. fragmentos de código sendo repetidos. A equipe React, percebendo isso, optou por lançar uma versão melhorada chamada Redux Toolkit, simplificando ao máximo as complicações de seu antecessor.
![](https://community.revelo.com.br/content/images/2024/06/CTA_Blog_Revelo--3--4.png)
Exemplo
Neste exemplo, usarei o Visual Studio Code como editor de código VSC. Para realizar este exemplo precisamos:
✅ Conhecimento de React: É a biblioteca necessária para usar o Zustand.
✅ Conhecimento de JavaScript: É a linguagem que será utilizada para este exemplo específico, mas também é compatível com TypeScript.
✅ Ter Node.js.
✅ Um gerenciador de pacotes: pode ser npm, pnpm ou yarn.
Passo 1: Crie um projeto com React. Este exemplo será chamado zustand_Exemplo (Ejemplo, em espanhol). O objetivo é criar uma lista verificada e exibi-la.
👉 Neste exemplo, o React será utilizado sem framework, pois o objetivo é mostrar como funciona o Zustand, mas fica a seu critério se deseja ou não adicionar o framework ao seu exemplo.
![](https://community.listopro.com/content/images/2024/06/image-7.png)
Passo 2: Instalar a dependência do Zustand
![](https://community.listopro.com/content/images/2024/06/image-8.png)
Passo 3: Crie o store principal, neste exemplo criaremos o src dentro do diretório principal. O nome do arquivo será useTaskStore.js.
Passo 4: Dentro do arquivo que acabou de ser criado é onde criaremos o store:
![](https://community.listopro.com/content/images/2024/06/image-9.png)
⚠️ O store Deve sempre começar com o prefixo use, já que o Zustand usa hooks e essa é a sua sintaxe.
Com create podemos definir a variável, que necessita de uma função como parâmetro, retornando assim a criação da loja.
![](https://community.listopro.com/content/images/2024/06/image-10.png)
Neste exemplo, precisamos de:
✅ Um array: é onde os dados serão salvos.
✅ Uma função para adicionar dados: Chame addTask, ela recebe o estado que são os dados da lista e irá adicioná-los ao array definido acima.
✅ Uma função para verificar se a tarefa da lista foi concluída. Ou seja, verificará se o check foi pressionado.
![](https://community.listopro.com/content/images/2024/06/image-11.png)
Passo 5: Deve ser criada a tela onde possamos ver o exemplo funcionar. Para este exemplo, será criado um componente chamado TaskList.
![](https://community.listopro.com/content/images/2024/06/image-12.png)
Passo 6: No componente App.jsx, o componente TaskList.jsx deve ser chamado, assim:
![](https://community.listopro.com/content/images/2024/06/image-13.png)
No navegador você vê o seguinte:
Aqui devemos criar um estado local para obter o valor que inserimos na entrada e, ao clicar, devemos adicioná-lo ao estado global (ao array chamado tasks que foi criado no arquivo useTaskStore.js), com o qual o código é que você verá o seguinte:
Primeiro o estado é importado:
![](https://community.listopro.com/content/images/2024/06/image-14.png)
Para obter o que definimos na loja, é feito da seguinte forma:
![](https://community.listopro.com/content/images/2024/06/image-15.png)
👉 Usaremos o array de tasks para exibir as informações no JSX, enquanto usaremos a função addTask para adicionar os dados que escrevemos na entrada.
O JSX ficará assim:
![](https://community.listopro.com/content/images/2024/06/image-16.png)
👉 O destaque é onde adicionamos lógica ao componente, além de adicionar o mapa no final para exibir a lista.
A função que chamamos ao clicar é a seguinte:
![](https://community.listopro.com/content/images/2024/06/image-17.png)
⚠️ No mapa você pode ver um componente chamado TaskITem, que mostra as informações que estamos passando.
![](https://community.listopro.com/content/images/2024/06/image-18.png)
Visualmente no navegador, podemos ver a lista assim:
👉 Se a lista for impressa, ficará assim:
Se desejar verificar uma tarefa como concluída, basta clicar na caixa, assim saberemos visualmente e em código que ela foi concluída.
Verificamos se a tarefa foi executada e se o useTaskStore foi utilizado de forma independente em cada componente.
⚠️ Se você quiser ver o exemplo em execução, deixo o código completo aqui.
![](https://community.revelo.com.br/content/images/2024/06/CTA_Blog_Revelo--1--4.png)
Conclusão
Zustand em React.js representa uma revolução na gestão de estado. Sua simplicidade sintática, combinada com desempenho excepcional, torna-o uma escolha de destaque. Ao eliminar a complexidade do código repetido, fica mais fácil construir e manter aplicativos complexos. Além disso, sua compatibilidade total com TypeScript fornece uma experiência de desenvolvimento robusta, garantindo tipos seguros e erros mínimos. Resumindo, o zustand oferece um equilíbrio perfeito entre potência e acessibilidade, tornando-o uma escolha líder para gerenciamento de estado no React.
Espero que este conteúdo seja muito útil em seus projetos, como desenvolvedor é bom conhecer todas as ferramentas para aproveitá-las ao máximo. Nunca pare de praticar todo o conhecimento para se tornar cada vez melhor 💻.
Sucesso 🚀!
A Revelo Content Network acolhe todas as raças, etnias, nacionalidades, credos, gêneros, orientações, pontos de vista e ideologias, desde que promovam diversidade, equidade, inclusão e crescimento na carreira dos profissionais de tecnologia.