DEV Community

Levy Henrique Alves Nunes
Levy Henrique Alves Nunes

Posted on

Observáveis e Inscritores: Entendendo a Magia do RxJS

A programação reativa tem ganhado notoriedade no mundo do desenvolvimento JavaScript e, no centro dessa revolução, encontramos os Observáveis do RxJS. Mas, o que são Observáveis? E o que significa se inscrever neles? Vamos decifrar esses conceitos juntos!

1. O que é um Observável?

Observável é uma representação de uma fonte de valores ou eventos que são emitidos ao longo do tempo. Pense neles como funções que podem retornar múltiplos valores ao longo do tempo, em vez de apenas um único valor, como as funções tradicionais.

import { Observable } from 'rxjs';

const meuObservavel = new Observable(inscritor => {
  inscritor.next('Primeiro valor!');
  inscritor.next('Segundo valor!');
  inscritor.complete();
});
Enter fullscreen mode Exit fullscreen mode

Neste exemplo, nosso Observável emitirá dois valores e, em seguida, indicará que completou a emissão.

2. O que é um Inscritor?

Quando falamos de Observáveis, o termo inscritor (ou subscriber, em inglês) é frequentemente mencionado. Ele é a ligação entre o Observável e os observadores. O inscritor é responsável por enviar notificações para o observador.

No exemplo acima, a função passada ao criar o Observável recebe um inscritor como argumento. Você pode pensar no inscritor como um canal de comunicação entre a fonte de dados (Observável) e o consumidor (Observador).

3. Subscrevendo-se a um Observável

Para receber os valores emitidos por um Observável, é necessário se inscrever nele. Isso é feito usando o método .subscribe().

meuObservavel.subscribe(valor => {
  console.log(valor);
});
Enter fullscreen mode Exit fullscreen mode

Quando você se inscreve em um Observável, na verdade, está fornecendo um observador para ele. Este observador é um conjunto de callbacks para receber os valores emitidos, erros e notificação de conclusão.

4. Cancelando a Subscrição

Uma das características poderosas dos Observáveis é a capacidade de cancelar a subscrição. Isso permite que você encerre a recepção de valores e libere recursos conforme necessário.

const subscrição = meuObservavel.subscribe(valor => {
  console.log(valor);
});

// Depois de algum tempo...
subscrição.unsubscribe();
Enter fullscreen mode Exit fullscreen mode

5. Conclusão

Observáveis são uma abordagem poderosa e flexível para lidar com sequências assíncronas de valores ou eventos. Combinado com a capacidade de se inscrever e cancelar a subscrição, o RxJS oferece uma plataforma rica para desenvolver código reativo eficiente e elegante.

Seja você um novato em programação reativa ou alguém que deseja aprofundar seu conhecimento, compreender Observáveis e Inscritores é fundamental para dominar o RxJS e a programação reativa em JavaScript.


Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay