Boas Práticas com Zustand

Se você chegou até aqui, provavelmente já sabe o que é Zustand e como usá-lo no React. Mas, para garantir que seu código permaneça limpo, eficiente e fácil de manter, vamos explorar algumas boas práticas ao trabalhar com Zustand.

1. Nomeação Clara de Estados e Ações

Manter nomes claros e descritivos para os estados e ações é essencial para a legibilidade e manutenção do código. Considere o seguinte exemplo:

Exemplo ruim:

const useStore = create((set) => ({   x: 0,   inc: () => set((state) => ({ x: state.x + 1 })), }));

Exemplo bom:

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

A segunda abordagem deixa claro o propósito do estado (count) e da ação (increment). Isso facilita o entendimento de outros desenvolvedores (ou até mesmo do seu futuro eu!).

2. Uso de TypeScript para Tipar Estados e Ações

O TypeScript pode ser um grande aliado para evitar erros ao trabalhar com Zustand. Ele garante que você saiba exatamente quais estados e ações estão disponíveis na sua store.

Exemplo:

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

Aqui, o tipo CounterState define o formato esperado do estado e das ações, fornecendo segurança adicional ao usar a store.

3. Quando Dividir Stores para Modularidade

Tentar colocar tudo em uma única store pode rapidamente tornar o código confuso e difícil de manter. É uma boa prática dividir suas stores em módulos menores e especializados sempre que possível.

Quando dividir?

• Quando os estados e ações não estão relacionados.
• Quando diferentes partes do aplicativo dependem de estados distintos.

Exemplo:

Em vez de uma única store para tudo:

const useAppStore = create((set) => ({   user: null,   isAuthenticated: false,   theme: 'light',   toggleTheme: () => set((state) => ({     theme: state.theme === 'light' ? 'dark' : 'light'   })), }));

Divida em stores menores:

Store para autenticação:

const useAuthStore = create((set) => ({   user: null,   isAuthenticated: false,   login: (user: any) => set({ user, isAuthenticated: true }),                logout: () => set({ user: null, isAuthenticated: false }), }));

Store para tema:

const useThemeStore = create((set) => ({   theme: 'light',   toggleTheme: () => set((state) => ({     theme: state.theme === 'light' ? 'dark' : 'light'   })), }));

Agora, cada store tem uma responsabilidade específica, tornando o código mais modular e fácil de entender.

Conclusão

Seguindo essas boas práticas, você garante que seu uso do Zustand seja mais organizado, legível e fácil de manter. Nomeie estados e ações de forma clara, aproveite o poder do TypeScript para evitar erros e divida suas stores para manter a modularidade do seu projeto.

Com essas dicas, sua aplicação React será mais robusta e escalável!

Referência

• Documentação Oficial do Zustand