Padrões de tipagem de stores Zustand
Defina stores Zustand tipadas com interfaces e ações
Padrões de tipagem de stores Zustand é uma aula grátis de TypeScript Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de TypeScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de TypeScript Academy inclui 4 aulas no total.
Por que tipar o Zustand?
Zustand é uma biblioteca minimalista de gerenciamento de state. Com a integração adequada com TypeScript, você obtém leituras do store, ações e seletores seguros quanto aos tipos, sem código repetitivo.
import { create } from "zustand";Store tipado básico
Defina a interface do store e passe-a como um genérico para create.
interface CounterStore {
count: number;
increment: () => void;
decrement: () => void;
}
const useCounter = create<CounterStore>((set) => ({
count: 0,
increment: () => set((s) => ({ count: s.count + 1 })),
decrement: () => set((s) => ({ count: s.count - 1 })),
}));Lendo o state do store
Use o gancho com um seletor para ler partes específicas do state. O TypeScript infere o tipo de retorno a partir do seletor.
function Counter() {
const count = useCounter((s) => s.count); // number
const increment = useCounter((s) => s.increment); // () => void
return <button onClick={increment}>{count}</button>;
}Separando state e ações
Um padrão comum separa as propriedades do state dos métodos de ação na interface para uma organização mais clara.
interface State { count: number; }
interface Actions { increment: () => void; reset: () => void; }
type CounterStore = State & Actions;Ações assíncronas no Zustand
O Zustand oferece suporte nativo a ações assíncronas — basta tornar assíncrona a função da ação dentro do criador.
interface UserStore {
users: User[];
fetchUsers: () => Promise<void>;
}
const useUserStore = create<UserStore>((set) => ({
users: [],
fetchUsers: async () => {
const data = await api.getUsers();
set({ users: data });
},
}));Tipagem do middleware immer
Use o middleware immer do Zustand para atualizações no estilo mutável. O tipo do store é propagado corretamente.
import { immer } from "zustand/middleware/immer";
const useStore = create<CounterStore>()(
immer((set) => ({
count: 0,
increment: () => set((state) => { state.count++; }),
}))
);Middleware de ferramentas de desenvolvimento
Combine as ferramentas de desenvolvimento com a tipagem adequada para habilitar o suporte ao Redux DevTools mantendo os tipos intactos.
import { devtools } from "zustand/middleware";
const useStore = create<CounterStore>()(
devtools(
(set) => ({ count: 0, increment: () => set({ count: 1 }) }),
{ name: "CounterStore" }
)
);Tipagem de store persistente
O middleware persist serializa o state no localStorage. Tipifique-o corretamente com a interface de state parcial.
import { persist } from "zustand/middleware";
const useStore = create<CounterStore>()(
persist(
(set) => ({ count: 0, increment: () => set((s) => ({ count: s.count + 1 })) }),
{ name: "counter-storage" }
)
);Padrão de fatias tipadas
Para stores grandes, divida-os em fatias tipadas que sejam combinadas em uma única chamada de create.
type UserSlice = { users: User[]; setUsers: (u: User[]) => void; };
type UiSlice = { modal: boolean; openModal: () => void; };
type AppStore = UserSlice & UiSlice;Assinando fora do React
Acesse o state do store e assine suas alterações fora dos componentes React usando a API do store tipado.
// Access current state outside React
const count = useCounter.getState().count;
// Subscribe to changes
useCounter.subscribe((state) => console.log(state.count));Recapitulação: tipagem do Zustand
Tipagem do Zustand: defina uma interface de store, passe-a para create, use seletores para leituras tipadas do state e encadeie middlewares (immer, ferramentas de desenvolvimento, persist) pelo padrão de aplicação parcial para garantir a propagação correta dos tipos.
Verificação rápida
Como ler uma parte específica do state do Zustand em um componente sem novas renderizações causadas por alterações não relacionadas?
O que você aprendeu
Os stores do Zustand são tipados passando um genérico de interface para create. Use funções seletoras para leituras eficientes e seguras quanto aos tipos. Combine middlewares como immer, ferramentas de desenvolvimento e persist pelo padrão de aplicação parcial do Zustand para obter a inferência correta do TypeScript.
Perguntas Frequentes
A aula “Padrões de tipagem de stores Zustand” é grátis?
Sim — o texto completo de “Padrões de tipagem de stores Zustand” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de TypeScript Academy, atualize para CoddyKit PRO. O curso de TypeScript Academy inclui 4 aulas no total.
O que vou aprender em “Padrões de tipagem de stores Zustand”?
Defina stores Zustand tipadas com interfaces e ações Você pratica TypeScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar TypeScript Academy?
Nenhuma experiência prévia é necessária. TypeScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Padrões de tipagem de stores Zustand”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de TypeScript Academy?
Sim. Cada aula de TypeScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Tipando slices e thunks do Redux Toolkit
- Padrões de tipagem de stores Zustand
- XState: máquinas de estados tipadas
- Estado derivado e seletores com tipos