Pular para conteúdo

Aula 12: RxJS ⚡

O Motor Reativo do Angular


🌊 O que é RxJS?

Uma biblioteca para lidar com fluxos de dados assíncronos.

Tudo no Angular é Reativo!


🛰️ O conceito do Observable

Imagine um fluxo de água.

  • Observable: A torneira (emite dados)
  • Observer: O balde (recebe os dados)
  • Subscribe: O ato de abrir a torneira

🛠️ Operadores: Os Filtros

Podemos transformar a água antes dela chegar no balde!

  • map: Transforma o dado
  • filter: Deixa passar só o que interessa
  • tap: Espia o dado (para logs)

⚡ switchMap

O salvador de performance!

Se uma nova requisição chega, ele cancela a anterior automaticamente.

  • Essencial para campos de busca!

🎯 Subjects vs BehaviorSubjects

  • Subject: Como uma rádio ao vivo (perdeu o início, já era).
  • BehaviorSubject: Como um On-Demand (você entra e recebe o último valor).

🚀 O Async Pipe (| async)

A forma mais elegante de usar Observables no HTML.

  • Faz o subscribe sozinho
  • Faz o unsubscribe sozinho
  • Evita Memory Leaks!

⚠️ Cuidado: Memory Leaks

Se você faz .subscribe() manual, você deve fazer o .unsubscribe() no ngOnDestroy.


🎯 Prática

Vamos criar um campo de busca inteligente que só pesquisa quando o usuário para de digitar!


❓ Dúvidas?

Vamos reagir! 🚀