Pular para conteúdo

Aula 12: RxJS e Programação Reativa ⚡

Nesta aula, vamos entender o motor por trás do Angular: a biblioteca RxJS. Vamos aprender a lidar com fluxos de dados assíncronos de forma elegante e poderosa.

🌊 O que são Observables?

Pense em um Observable como um "fluxo de água" (dados). Você (Observer) pode colocar um balde (subscribe) para receber esses dados à medida que eles chegam.

  • Observable: A fonte dos dados.
  • Subscribe: A ação de começar a ouvir os dados.
  • Operator: Uma ferramenta para transformar o dado antes que ele chegue no balde.

🛠️ Operadores: O canivete suíço

O método .pipe() é usado para encadear operadores que modificam o fluxo de dados.

Principais Operadores:

  1. map: Transforma cada dado que passa (ex: mudar o nome para maiúsculo).
  2. filter: Deixa passar apenas os dados que atendem a uma condição.
  3. switchMap: Cancela a requisição anterior e inicia uma nova (ideal para buscas em tempo real).
  4. tap: Permite "espiar" o dado para fazer um log, sem alterá-lo.
this.http.get<any[]>(url).pipe(
  map(posts => posts.filter(p => p.id < 10)),
  tap(posts => console.log('Posts filtrados:', posts))
).subscribe();

🎯 Subjects e BehaviorSubjects

São tipos especiais de Observables que permitem enviar dados manualmente.

  • Subject: Envia dados apenas para quem já está inscrito.
  • BehaviorSubject: Guarda o último valor emitido. Novos inscritos recebem o valor atual imediatamente.

🚀 Async Pipe (Boas Práticas)

No Angular, a melhor forma de consumir um Observable no HTML é o Async Pipe (| async). Ele faz o subscribe e unsubscribe automaticamente para você, evitando vazamentos de memória (memory leaks).

<ul>
  <li *ngFor="let item of (itens$ | async)">
    {{ item.nome }}
  </li>
</ul>

🌟 Diagrama RxJS

graph LR
    Source[Fonte: API/Click] --> Pipe[Pipe: Transformação]
    Pipe --> Op1[map]
    Op1 --> Op2[filter]
    Op2 --> Sub[Subscriber: Tela]

🚀 Prática: Busca Reativa

Vamos criar um campo de busca que: 1. Espera o usuário parar de digitar (debounceTime). 2. Não faz buscas repetidas (distinctUntilChanged). 3. Cancela buscas antigas se uma nova começar (switchMap).

🏁 Mini-Projeto da Aula

Crie um serviço de Notificações Global usando um BehaviorSubject. Qualquer componente da aplicação deve ser capaz de chamar enviarMensagem(texto) e um componente de "Alert" (que usa o Async Pipe) deve exibir essa mensagem automaticamente.