Frontend e Zustand

Frontend e Zustand

O Zustand é o core inegociável do frontend. A lógica do frontend mora nas stores; componentes consomem stores. Não há fuga desse padrão.

A regra da store

Toda store vive em uma pasta própria, com dois arquivos obrigatórios:

stores/[nome-da-store]/
├── store.ts     ← estado + ações (a lógica)
└── sync.tsx     ← componente de sincronização

Esta estrutura é inegociável. Pode-se adicionar outros arquivos à pasta da store (funções auxiliares, seletores, tipos) para melhorar a organização — isso é livre.

• Dividir a store em vários arquivos quando ela cresce muito: recomendação, não obrigação.
• Componentes chamam stores para ler estado e disparar ações; não concentram lógica de negócio.
• Hooks são permitidos apenas em casos pontuais (ex.: estado puramente local de um componente, sem necessidade de store). O núcleo da lógica é sempre Zustand.

O componente de sync

O sync.tsx é responsável por sincronizar a store com o mundo externo (dados do servidor, parâmetros de rota, etc.), mantendo o store.ts focado em estado e ações. Ele é montado onde a store precisa ser alimentada.

A pasta lib/

A lib/ é obrigatoriamente dividida por ambiente de execução:

lib/
├── server/   ← código que só roda no backend
├── client/   ← código que só roda no frontend
└── shared/   ← código usado por ambos

Isso evita vazar código de servidor para o cliente (e vice-versa) e deixa explícito o contexto de cada utilitário.