React Academy · Aula

Persistindo o estado com o middleware persist

Sincronize o estado do Zustand com localStorage ou sessionStorage usando o middleware persist.

Persistindo o estado com o middleware persist é uma aula grátis de React Academy no CoddyKit. Esta é a aula 3 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 React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

Boas-vindas

Nesta lição, você usará a camada intermediária persist do Zustand para sincronizar automaticamente o estado do store com localStorage, fazendo com que ele sobreviva às recargas da página.

Por que persistir o estado?

Sem persistência, todo o estado do store é redefinido quando o usuário atualiza a página. Persistir itens do carrinho, preferências do usuário ou estado da interface, como painéis abertos, em localStorage oferece uma experiência contínua entre sessões.

A camada intermediária persist

Envolva sua chamada create() com persist(). Forneça uma chave de armazenamento exclusiva. O Zustand lerá automaticamente do localStorage durante a montagem e gravará a cada alteração de estado.

import { create } from 'zustand';
import { persist } from 'zustand/middleware';

const useCartStore = create(
  persist(
    (set) => ({
      items: [],
      addItem: (item) => set(s => ({ items: [...s.items, item] })),
    }),
    { name: 'cart-storage' } // localStorage key
  )
);

Persistência parcial com partialize

Use `partialize` para persistir somente fatias específicas do store. Isso exclui dados transitórios, como indicadores de carregamento, do localStorage.

persist(
  (set) => ({ user: null, token: null, loading: false, fetch: () => {} }),
  {
    name: 'auth-storage',
    partialize: (state) => ({ user: state.user, token: state.token }),
    // loading and fetch are NOT persisted
  }
)

Usando sessionStorage

Para persistir apenas durante a sessão do navegador, com limpeza ao fechar a aba, passe `createJSONStorage(() => sessionStorage)` como opção de armazenamento.

import { createJSONStorage } from 'zustand/middleware';

persist(storeCreator, {
  name: 'session-data',
  storage: createJSONStorage(() => sessionStorage),
})

Versionamento e migração

Quando a estrutura do store mudar, com novos campos ou chaves renomeadas, defina um número de `version` e forneça uma função `migrate` para atualizar os dados persistidos antigos.

persist(storeCreator, {
  name: 'my-store',
  version: 2,
  migrate: (persistedState, version) => {
    if (version === 1) {
      return { ...persistedState, newField: 'default' };
    }
    return persistedState;
  },
})

Hidratação e SSR

No servidor, com Next.js, localStorage não existe. A camada intermediária persist do Zustand lida com isso de forma segura: ignora a hidratação no servidor e reidrata o estado no cliente após a montagem.

Retorno de chamada onRehydrateStorage

Use `onRehydrateStorage` para executar código quando o store for restaurado do armazenamento. Isso é útil para disparar uma chamada de API depois de restaurar um token.

persist(storeCreator, {
  name: 'auth',
  onRehydrateStorage: () => (state) => {
    if (state?.token) state.fetchUser();
  },
})

Limpando o estado persistido

Chame `useMyStore.persist.clearStorage()` para remover os dados persistidos de localStorage, o que é útil nos fluxos de saída da conta.

const handleLogout = () => {
  useAuthStore.persist.clearStorage();
  useAuthStore.setState({ user: null, token: null });
};

Limites de tamanho do armazenamento

O localStorage tem um limite de 5–10 MB por origem. Evite persistir grandes conjuntos de dados, como catálogos completos de produtos. Persista apenas identificadores ou pequenos objetos de configuração.

Verificação rápida

Qual opção da camada intermediária persist permite excluir determinados campos do estado ao salvá-lo em localStorage?

Recapitulação

Envolva seu store do Zustand com persist() e forneça uma chave de nome. Use partialize para armazenar apenas as fatias relevantes. Crie versões e migre os dados quando a estrutura do store mudar. Use clearStorage() ao sair da conta.

A seguir

Próxima lição: **DevTools do Zustand e testes de stores** — você se conectará ao Redux DevTools e escreverá testes unitários para as ações do Zustand.

Perguntas Frequentes

A aula “Persistindo o estado com o middleware persist” é grátis?

Sim — o texto completo de “Persistindo o estado com o middleware persist” é 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 React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Persistindo o estado com o middleware persist”?

Sincronize o estado do Zustand com localStorage ou sessionStorage usando o middleware persist. Você pratica React 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 React Academy?

Nenhuma experiência prévia é necessária. React 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 3 de 4.

Quanto tempo leva a aula “Persistindo o estado com o middleware persist”?

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 React Academy?

Sim. Cada aula de React 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

Criando seu primeiro armazenamento Zustand
Seletores e prevenção de novas renderizações desnecessárias
Persistindo o estado com o middleware persist
DevTools do Zustand e testes de armazenamentos

← Voltar para React Academy