DEV Community

Levy Henrique Alves Nunes
Levy Henrique Alves Nunes

Posted on

Entendendo os Operadores do RxJS

O RxJS (Reactive Extensions for JavaScript) é uma biblioteca para programação reativa com JavaScript. Um de seus principais conceitos é o Observable, que representa uma fonte de valores ou eventos que outros podem "observar". Para transformar, filtrar e combinar esses valores, usamos operadores. Neste post, vamos explorar os operadores do RxJS e como usá-los.

O que é um Operador?
No contexto do RxJS, um operador é uma função pura que recebe um Observable como entrada e retorna um novo Observable como resultado. Isso permite que os operadores sejam encadeados, transformando os dados em várias etapas.

Tipos Comuns de Operadores
Existem muitos operadores no RxJS, mas eles podem ser categorizados em grupos principais:

Operadores de Criação: Criam Observables a partir de outras estruturas, como eventos ou arrays.

of(...): Cria um Observable a partir de uma lista de valores.
from(...): Cria um Observable a partir de um array ou de um objeto semelhante a um array.
interval(...): Cria um Observable que emite números sequenciais em intervalos especificados.

Operadores de Transformação: Modificam ou transformam os valores emitidos.

map(...): Aplica uma função a cada valor emitido.
flatMap/mergeMap(...): Mapeia cada valor a um Observable, então achata todos os Observables resultantes em um único Observable.

Operadores de Filtragem: Selecione valores com base em algum critério.

filter(...): Emite apenas valores que atendem a um critério específico.
first(...): Emite apenas o primeiro valor.
last(...): Emite apenas o último valor.

Operadores de Combinação: Combine múltiplos Observables em um.

merge(...): Combina múltiplos Observables, emitindo itens de cada um como eles chegam.
concat(...): Combina múltiplos Observables, emitindo os valores de cada um sequencialmente.
combineLatest(...): Combina os últimos valores de múltiplos Observables.

Operadores de Erro: Trate ou manipule erros que possam ocorrer durante a execução do Observable.

catchError(...): Captura erros e permite que você os manipule ou substitua por um novo Observable.

Operadores de Agregação: Combine os valores emitidos para produzir um único valor.

reduce(...): Aplica uma função a cada valor emitido e retorna um único valor final.
count(...): Conta o número de valores emitidos.

Operadores de Finalização: Execute ações quando um Observable for concluído.
**
**finalize(...)
: Executa uma ação quando o Observable é completo, seja por emissão de todos os valores ou por um erro.

Exemplo: Filtrando e Transformando Dados

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

const numbers = from([1, 2, 3, 4, 5, 6]);
const squaredEvens = numbers.pipe(
    filter(n => n % 2 === 0),
    map(n => n * n)
);

squaredEvens.subscribe(value => console.log(value));
Enter fullscreen mode Exit fullscreen mode

Este código criará um Observable a partir de um array de números. Ele então filtra para apenas números pares e mapeia esses números para seus quadrados. O resultado final será a impressão: 4, 16, 36.

Conclusão
Os operadores do RxJS são ferramentas poderosas que nos permitem manipular e transformar Observables de maneira declarativa. Aprender a usá-los efetivamente pode melhorar significativamente a qualidade e a legibilidade de seu código ao lidar com programação reativa em JavaScript. Encorajamos a explorar a documentação oficial e experimentar diferentes operadores para se familiarizar ainda mais com suas capacidades!

Top comments (0)