Módulo 20: Signals II (Gestão de Estado Moderna)
2. Resumo da Aula Anterior
No Módulo 19, aprendemos os básicos dos Signals: signal(), .set() e .update(). Agora, vamos descobrir como fazer com que estes Signals falem uns com os outros e como reagir a mudanças de forma inteligente usando Computed e Effect.
3. O Que Vais Aprender Hoje
- ✅ Criar Signals derivados com o computed().
- ✅ Executar lógica automática com o effect().
- ✅ Entender o conceito de Memoization (Eficiência Máxima).
- ✅ Gerir o estado da App sem precisar de bibliotecas pesadas.
4. Teoria: A Inteligência Artificial da App
Computed: É um Signal que depende de outros. Ele é "preguiçoso": só faz o cálculo se alguém pedir o valor E se os Signals de origem tiverem mudado. Se o valor for o mesmo, ele devolve o resultado guardado (Cache).
Effect: É um vigilante. Ele corre código sempre que um Signal muda, mas não deve ser usado para mudar o estado (HTML), apenas para coisas externas como guardar no Banco de Dados ou fazer animações.
📊 Analogia: A Folha de Excel
Imagina uma folha de cálculo profissional:
- Signal (Célula A1): Tu escreves o preço de um produto (10€).
- Computed (Célula B1): Tu escreves a fórmula
=A1 * 1.23(IVA). Tu não precisas de atualizar a B1 à mão. Sempre que mudas a A1, a B1 "acorda", faz a conta por ti e mostra o novo valor. - Effect (O Alarme): Imagina que tens uma regra: "Se o total passar dos 100€, toca uma sirene". A sirene não muda as células, apenas reage ao valor final para fazer algo no mundo real.
5. Exemplos Práticos
Exemplo 1: Valores Derivados (Computed)
O computed rastreia as dependências automaticamente.
preco = signal(100);
quantidade = signal(2);
// Este signal atualiza-se sozinho!
total = computed(() => this.preco() * this.quantidade());
console.log(this.total()); // 200 Exemplo 2: Reagir a Mudanças (Effect)
Ideal para persistência de dados ou logs.
constructor() {
effect(() => {
// Sempre que o total mudar, guardamos no log
console.log(`Log: O novo total é ${this.total()}`);
localStorage.setItem('total_vendas', this.total().toString());
});
}Exemplo 3: No HTML (Limpeza Total)
O HTML fica limpo e sem lógica complexa.
<div>Preço: {{ preco() }}€</div>
<div>Qt: {{ quantidade() }}</div>
<hr>
<strong>Total a pagar: {{ total() }}€</strong>6. Agora é a Tua Vez!
Vamos criar o "Calculador de Impostos Pro":
- Cria um Signal
salarioBruto(ex: 2000). - Cria um **Computed**
impostoque calcula 20% do salário. - Cria um **Computed**
salarioLiquidoque subtrai o imposto ao bruto. - No HTML, mostra os três valores.
- Cria um **Effect** que faz as contas e guarda o
salarioBrutonolocalStoragesempre que ele mudar.
7. Verificação de Conhecimento
8. Resumo do Que Aprendemos
- 📌 **computed()** cria valores que dependem de outros Signals e são calculados apenas quando necessário.
- 📌 **effect()** serve para correr código secundário (não visual) em resposta a mudanças.
- 📌 Signals evitam renderizações desnecessárias, tornando a App ultra-performante.
- 📌 Esta é a base para gerires o estado global da tua aplicação de forma simples.
9. Desafios Práticos
Desafio 1: A Armadilha do Effect
Podes usar o effect() para mudar o valor de um Signal (usando .set())? É uma boa ideia?
Desafio 2: Herança de Inteligência
Um computed pode depender de outro computed? Existe algum limite para estas "correntes"?
Desafio 3: Adeus RxJS?
Agora que temos Signals, ainda precisamos de usar Observables do RxJS para tudo no Angular?