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:

Comentários