Introdução e Instalação do Zustand - Gerenciamento de Estado Descomplicado no React

Se você já sentiu que gerenciar estado no React pode ser complicado com ferramentas como Redux ou Context API, deixe-me apresentar o Zustand.

Zustand é uma biblioteca leve e intuitiva que simplifica o gerenciamento de estado global e local.

• Fácil de usar em projetos pequenos ou grandes.
• Sem boilerplate complicado.
• Poderoso e escalável!

Neste post, vamos explorar como instalar e usar o Zustand no seu projeto React, criando uma simples aplicação de contagem.

O que é o Zustand?

Zustand é uma biblioteca de gerenciamento de estado para React, criada para ser simples e eficiente. Ela permite que você:

• Gerencie o estado global ou local.
• Trabalhe sem precisar configurar reducers ou actions.
• Use APIs modernas e minimalistas.

Como instalar o Zustand?

Para começar, você precisa adicionar o Zustand ao seu projeto React. Abra o terminal e rode:

npm install zustand # ou yarn add zustand

Conceitos básicos do Zustand

O que é uma Store?

No Zustand, uma store é onde o estado da aplicação é armazenado.
Ela é como uma "caixa" que guarda dados e funções para atualizá-los.
Pense na store como um mini banco de dados para seu app React.

Como o Zustand funciona?

O Zustand utiliza o padrão de design Publisher/Subscriber.

1. Publisher (store): Armazena os dados e expõe funções para modificá-los.
2. Subscriber (componentes): Se inscrevem na store para obter ou alterar dados.

Estado no Zustand

No Zustand, o estado é um simples objeto. Você define o estado inicial na store e pode modificá-lo com funções chamadas de ações.
Exemplo:

import create from 'zustand'; const useStore = create(() => ({                                                                                                                 count: 0, }));

Ações no Zustand

Ações são funções que modificam o estado.
Exemplo:

import create from 'zustand'; const useStore = create((set) => ({   count: 0,   increment: () => set((state) => ({ count: state.count + 1 })),                                                                   }));

Acessando o Estado e Ações

Os componentes React podem acessar o estado e as ações diretamente.
Por exemplo:

• Você pode obter o valor do estado para exibir na interface.
• Pode-se chamar uma ação para atualizar o estado com base na interação do usuário.

Isso é feito usando o hook personalizado que o Zustand cria para você.

import React from 'react'; import create from 'zustand'; const useStore = create((set) => ({   count: 0,   increment: () => set((state) => ({ count: state.count + 1 })),                                                                   })); function Counter() {   const count = useStore((state) => state.count);   const increment = useStore((state) => state.increment);   return (     <div>       <h1>Count: {count}</h1>       <button onClick={increment}>Increment</button>     </div>   ); } export default Counter;

Por que o Zustand é diferente de outras bibliotecas?

1. Sem contexto: Não depende da Context API do React, evitando re-renderizações desnecessárias.
2. Simplicidade: Apenas uma função para criar e acessar a store.
3. Performance: Atualiza apenas os componentes que realmente precisam, sem afetar o restante do app.

Finalização

Com isso, concluímos o básico sobre como usar o Zustand para gerenciar o estado no React. Você viu como é fácil criar uma store, definir o estado inicial e adicionar ações para manipulá-lo de forma intuitiva e eficiente. É um grande passo para deixar sua aplicação mais organizada e performática, sem a complexidade de ferramentas mais robustas.

Nos próximos posts deste blog, exploraremos tópicos mais avançados do Zustand, como middlewares, persistência de estado e estruturação para projetos maiores. Não perca a oportunidade de aprofundar seus conhecimentos e levar suas habilidades de gerenciamento de estado a um novo nível.