DEV Community

Levy Henrique Alves Nunes
Levy Henrique Alves Nunes

Posted on

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));
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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));
Enter fullscreen mode Exit fullscreen mode

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!

Image of Datadog

How to Diagram Your Cloud Architecture

Cloud architecture diagrams provide critical visibility into the resources in your environment and how they’re connected. In our latest eBook, AWS Solution Architects Jason Mimick and James Wenzel walk through best practices on how to build effective and professional diagrams.

Download the Free eBook

Top comments (0)