Aula 19 - Gerenciamento de Estado Global e Persistência 💾

📑 1. Fundamentos Teóricos & Análise Técnica

No Svelte 5, o gerenciamento de estado global transcendeu a necessidade de APIs especiais como writable() ou bibliotecas externas como Redux. Como as Runes operam universalmente em qualquer arquivo com a extensão .svelte.ts, um estado global nada mais é do que uma classe ou objeto regular exportado contendo campos $state().

Essa simplicidade elimina qualquer atrito arquitetural: 1. Qualquer componente que importar a instância da classe terá acesso imediato aos mesmos dados reativos. 2. O compilador garante que alterações nos campos da classe disparam re-renderizações cirúrgicas apenas nos componentes que consomem tais propriedades. 3. A persistência em localStorage ou sessionStorage pode ser facilmente encapsulada com sincronização reativa através do evento window.addEventListener('storage'), permitindo que diferentes abas do navegador reflitam mudanças de estado em tempo real.

📐 Arquitetura Conceitual & Diagrama de Fluxo

graph TD
    StoreFile["appState.svelte.ts (Instância Global com Runes)"] --> CompHeader["Header.svelte (Consome Usuário)"]
    StoreFile --> CompCart["CartView.svelte (Consome Itens)"]
    StoreFile --> Storage["Local Storage do Navegador"]
    Storage -.->|Evento storage| OtherTab["Outra Aba do Navegador Sincronizada!"]
    CompCart -->|Mutação Direta| StoreFile
    style StoreFile fill:#e3f2fd,stroke:#1565c0
    style Storage fill:#fff3e0,stroke:#e65100
    style CompCart fill:#e8f5e9,stroke:#2e7d32

🔍 Pilares e Diretrizes Técnicas

Nesta unidade, aprofundamos os seguintes conceitos fundamentais: - Ausência de Boilerplate: Classes TypeScript normais com $state tornam-se lojas de estado completas. - Sincronização entre Janelas: Uso do evento nativo storage para sincronizar sessões abertas simultaneamente. - Acesso Fora de Componentes: Funções de serviço e utilitários podem ler e alterar a store diretamente. - Performance Incomparável: Sem vDOM e sem seletores manuais; o rastreamento é feito pelo compilador.

🛠️ 2. Implementação Prática em Svelte Universal Stores

Abaixo está a implementação técnica de referência, estruturada com padrões de engenharia de software e foco em robustez:

// authStore.svelte.ts (Loja de Estado Global com Persistência em Svelte 5)
// Estado global puro compartilhado via .svelte.ts
class AuthManager {
  user = $state<string | null>(localStorage.getItem('auth_user'));
  isAuthenticated = $derived(this.user !== null);

  login(username: string) {
    this.user = username;
    localStorage.setItem('auth_user', username);
  }

  logout() {
    this.user = null;
    localStorage.removeItem('auth_user');
  }
}

// Exporta uma única instância singleton
export const auth = new AuthManager();

💡 Análise Passo a Passo do Código

1. Instância Compartilhada: Ao exportar auth = new AuthManager(), todos os arquivos compartilham a mesma referência em memória.
2. Rune $derived Integrada: isAuthenticated computa a condição booleana instantaneamente e notifica a interface.
3. Persistência Transparente: O localStorage é atualizado conjuntamente com o estado sem requerer plugins ou bibliotecas externas.

🎯 3. Próximos Passos & Sequência Didática