Encadeamento com RxJS

Ao trabalhar com aplicações modernas e reativas, uma das bibliotecas mais populares para lidar com fluxos de dados assíncronos é o RxJS. Neste post, vamos explorar o encadeamento de operadores usando o RxJS.

O que é RxJS?

RxJS é uma biblioteca para programação reativa usando Observables, para facilitar a composição de código assíncrono ou baseado em callback. Simplificando, ela permite que você crie e manipule sequências de eventos ou dados de forma declarativa.

Encadeamento com Operadores

Uma das características mais poderosas do RxJS é a capacidade de encadear operadores. Os operadores são funções puras que permitem a composição e transformação de observables.

Vamos dar uma olhada em um exemplo básico:

import { from } from 'rxjs';
import { filter, map } from 'rxjs/operators';

const numbers = from([1, 2, 3, 4, 5]);

const evenSquares = numbers.pipe(
  filter(num => num % 2 === 0),
  map(num => num * num)
);

evenSquares.subscribe(value => console.log(value));

No exemplo acima, começamos com um Observable que emite números de 1 a 5. Primeiro, filtramos os números ímpares e depois mapeamos os números restantes para seus quadrados. O resultado seria:

4
16

Principais operadores e seu encadeamento

Aqui estão alguns dos operadores mais comuns e como você pode encadeá-los:

1. map: Transforma os valores emitidos pelo observable.
2. filter: Filtra os valores com base em uma condição específica.
3. mergeMap/flatMap: Mapeia cada valor para um observable e os "achata" em um único observable.
4. switchMap: Como o mergeMap, mas cancela qualquer emissão anterior se um novo valor é emitido.
5. catchError: Captura erros no observable e permite tratá-los ou substituí-los.

Exemplo com encadeamento de múltiplos operadores

Vamos imaginar que queremos obter dados de uma API, transformá-los e filtrar alguns resultados.

import { of } from 'rxjs';
import { catchError, filter, map, switchMap } from 'rxjs/operators';

const apiCall = (url: string) => {
  // Aqui você poderia fazer um fetch ou algo similar
  return of([{ id: 1, name: 'Example' }]); // Dummy data
};

const data$ = of('api/my-endpoint').pipe(
  switchMap(url => apiCall(url)),
  map(data => data.name),
  filter(name => name !== 'ExcludeMe'),
  catchError(error => {
    console.error('Error:', error);
    return of([]);
  })
);

data$.subscribe(data => console.log(data));

Conclusão

O encadeamento com RxJS proporciona uma maneira elegante e declarativa de manipular streams de dados. Com uma compreensão sólida dos operadores disponíveis e como encadeá-los, você pode escrever código assíncrono mais limpo e compreensível. Experimente em seus projetos e veja por si mesmo o poder da programação reativa!