Criando e Consumindo Store com Zustand: Um Guia para Iniciantes em React

Se você já usou React e experimentou soluções como a Context API ou até mesmo o Redux para gerenciamento de estado, provavelmente já percebeu que, em projetos maiores, essas abordagens podem se tornar complexas ou verbosas. É aqui que o Zustand entra em cena, oferecendo uma alternativa leve, simples e eficiente.

Hoje, vamos explorar como criar e consumir uma store no Zustand, cobrindo estados, ações e seletores. Vamos lá? 🚀

Estrutura Básica de uma Store com Zustand

A store no Zustand é onde definimos nossos estados e ações. A ideia é simples: usamos o método create para configurar a store e suas funcionalidades. Aqui está um exemplo básico de uma store de contador:

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

Nesta configuração:

• count é o estado inicial.
• increment e decrement são as ações que modificam o estado.

Consumindo a Store no Componente

Agora que criamos a store, podemos consumi-la nos componentes React usando o hook useStore. Esse hook é o coração do Zustand e permite acessar tanto o estado quanto as ações.

Aqui está como consumir a store:

import React from 'react'; import { useCounterStore } from './store'; function Counter() {   const count = useCounterStore((state) => state.count);   const increment = useCounterStore((state) => state.increment);   const decrement = useCounterStore((state) => state.decrement);             return (     <div>       <h1>Count: {count}</h1>       <button onClick={increment}>Increment</button>       <button onClick={decrement}>Decrement</button>     </div>   ); } export default Counter;

O Zustand torna isso bem direto:

• Passamos uma função para o hook que extrai exatamente o que precisamos da store, evitando acessar todo o estado desnecessariamente.

Seletores: Melhorando a Performance

Em aplicações maiores, evitar re-renderizações desnecessárias é fundamental. Com Zustand, podemos usar seletores para acessar partes específicas do estado. Isso ajuda a garantir que um componente seja re-renderizado apenas quando a parte do estado que ele usa for alterada.

Por exemplo:

const count = useCounterStore((state) => state.count);

Aqui, o componente será re-renderizado apenas quando o valor de count mudar. Isso reduz a sobrecarga de renderizações desnecessárias, melhorando a performance da aplicação.

Conclusão

Criar e consumir uma store no Zustand é extremamente simples, mas essa simplicidade não compromete a performance ou a flexibilidade. Com o uso de seletores e hooks eficientes, o Zustand se torna uma ferramenta poderosa para gerenciar o estado da sua aplicação React.

Nos próximos artigos, exploraremos funcionalidades mais avançadas, como persistência de estado e middlewares. Não perca! 🚀

Fontes para Explorar mais

Se você deseja se aprofundar no Zustand, aqui estão alguns recursos úteis:

• Documentação Oficial do Zustand: Uma leitura obrigatória para entender todas as funcionalidades.
• Artigo sobre Gerenciamento de Estado: Um ótimo ponto de partida para entender quando e como usar diferentes abordagens de gerenciamento de estado.