Aula 10 - Stores e Gerenciamento de Estado 📦

Objetivo

Objetivo: Aprender a compartilhar dados entre componentes distantes sem "perfurar" a hierarquia com Props, dominando o uso das Svelte Stores para gerenciar o estado global da aplicação.

1. O Problema: Prop Drilling 🪚

Quando um dado precisa sair do topo da aplicação e chegar a um componente muito profundo, temos que passar esse dado por todos os componentes intermediários. Isso se chama Prop Drilling e torna o código difícil de manter.

A Solução: Stores

Uma Store é um objeto que guarda um valor e permite que qualquer componente da aplicação se "inscreva" para receber atualizações quando esse valor mudar.

2. Writable Stores: O Coração do Estado 💓

A writable store permite que você leia e escreva dados.

// store.js
import { writable } from 'svelte/store';

export const contador = writable(0);

Como manipular:

.set(val): Define um novo valor.
.update(n => n + 1): Atualiza baseado no valor atual.
.subscribe(val => ...): Escuta as mudanças.

3. Fluxo de Dados com Store (Mermaid) 📊

graph LR
    S[Store Global] --> C1[Componente A]
    S --> C2[Componente B]
    S --> C3[Componente C]

    C2 -- "Atualiza Dado" --> S
    S -- "Notifica todos" --> C1
    S -- "Notifica todos" --> C3

4. O Atalho Mágico: O Cifrão `$` ✨

Abrir e fechar inscrições manualmente com .subscribe dá trabalho e pode causar vazamento de memória. O Svelte tem um atalho: basta colocar um $ na frente do nome da store no HTML ou script.

<script>
  import { contador } from './store.js';
</script>

<h1>O valor atual é: {$contador}</h1>
<button on:click={() => $contador++}>Incrementar</button>

Conceito

O $ faz o Auto-subscription: ele se inscreve quando o componente aparece e se desinscreve automaticamente quando o componente é destruído.

5. Criando e Usando uma Store 💻

<div id="termynal" data-termynal>
    <span data-ty="input">import { writable } from 'svelte/store';</span>
    <span data-ty="input">export const user = writable({name: 'Visitante'});</span>
    <span data-ty="progress"></span>
    <span data-ty># No componente:</span>
    <span data-ty>$user = {name: 'Ricardo'};</span>
</div>

6. Mini-Projeto: Carrinho de Compras Global 🚀

Sua missão: 1. Crie um arquivo cartStore.js e exporte uma writable store chamada carrinho (iniciando como um array vazio). 2. No componente Produto.svelte, adicione um botão que dê um update na store adicionando um novo item. 3. No componente Navbar.svelte, exiba o total de itens no carrinho usando {$carrinho.length}. 4. Certifique-se de que, ao adicionar um produto, o número na Navbar atualize instantaneamente!

Dica

Você também pode criar Derived Stores (Lojas Derivadas) que dependem de outras stores. Ex: uma store totalPreco que calcula a soma de tudo que está no carrinho.

7. Exercício de Fixação 📝

O que é Prop Drilling e como as Stores resolvem isso?
Diferencie os métodos .set() e .update() de uma writable store.
Qual a importância de usar o prefixo $ ao acessar uma store em um componente?

Próxima Aula: Vamos conectar nosso app ao mundo real com o Consumo de API REST! 🌐