📚 Tópicos 📊 Sumário de Slides

📊 Capítulo 14: Estado Global com Zustand

Especialização em Frontend com React

---

🗺️ A Arquitetura Baseada em Seletores Atômicos do Zustand

flowchart TD
    STORE["useCarrinhoStore = create((set) => ({\n  itens: [],\n  aberto: false,\n  adicionar: (item) => set(s => ({ itens: [...s.itens, item] })),\n  toggle: () => set(s => ({ aberto: !s.aberto }))\n}))"]
    --> COMP1["Header.vue / Header.tsx\nconst total = useCarrinhoStore(s => s.itens.length)"]
    STORE --> COMP2["SidebarModal.tsx\nconst aberto = useCarrinhoStore(s => s.aberto)"]

    NOTE["Se o carrinho receber um novo item, APENAS o Header re-renderiza!\nO SidebarModal NÃO re-renderiza porque o seletor 's.aberto' não mudou! ⚡"]
    STORE -.-> NOTE

    style STORE fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style COMP1 fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
    style COMP2 fill:#e1f5fe,stroke:#03a9f4,stroke-width:2px
    style NOTE fill:#fff3e0,stroke:#ff9800,stroke-width:1.5px

---

🎯 Slide 1: Por Que o Zustand Conquistou o React?

• Zero Providers: Não envolve sua aplicação em dezenas de <Context.Provider> aninhados.

• Seletores Atômicos: Re-renderiza exclusivamente os componentes que consomem a fatia exata de estado modificada.

• Boilerplate Mínimo: Menos de 10 linhas para criar uma store completa e tipada.

---

🎯 Slide 2: Persistência Automática com Middleware

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

export const useAuthStore = create<AuthStore>()(
  persist(
    (set) => ({
      token: null,
      definirToken: (token) => set({ token }),
    }),
    { name: 'auth-storage' } // Salva e sincroniza automaticamente no localStorage!
  )
);

---

🎯 Slide 3: Acesso Fora do React

• Pode ser lido ou atualizado dentro de interceptors do Axios ou utilitários JS normais via useAuthStore.getState() e useAuthStore.setState() sem depender de hooks!

---

🔗 Navegação do Capítulo 14

📖 Ler Conteúdo Completo

🧠 Fazer Quiz

💻 Ver Exemplos

🧩 Exercícios

Slide 1 de 1

Atalhos: ← → Navegar • Espaço Avançar • F Tela Cheia • Home Início • End Fim