Gerenciamento de Estado Simplificado com Zustand em React

O gerenciamento de estado é uma parte essencial do desenvolvimento de aplicações com React. Bibliotecas como Redux e MobX são amplamente usadas, mas podem ser excessivas para necessidades mais simples. Zustand oferece uma alternativa leve e menos verbosa, ideal para muitos casos de uso em React. Neste artigo, vamos explorar como configurar e usar Zustand em um projeto React com TypeScript.

Configuração inicial

Primeiro, adicione o Zustand à sua aplicação:

npm install zustand

Agora, vamos criar uma store simples para um contador:

import create from 'zustand'

interface CounterState {
  count: number;
  increment: () => void;
  decrement: () => void;
}

export const useCounterStore = create<CounterState>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

Usando a store em um componente

Com a store configurada, você pode usar o estado em qualquer componente do seu projeto. Aqui está um exemplo de um componente Counter que usa nossa useCounterStore:

import React from 'react';
import { useCounterStore } from '../store/useCounterStore';

const Counter: React.FC = () => {
  const { count, increment, decrement } = useCounterStore();
  
  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

Vantagens do Zustand

Zustand simplifica significativamente o gerenciamento de estado, especialmente quando comparado a outras soluções mais complexas. Ele permite um código mais limpo e uma melhor separação de preocupações, facilitando a manutenção e o teste da sua aplicação.

Experimente Zustand para seus projetos React e veja como ele pode tornar o gerenciamento de estado mais eficiente e menos intrusivo.