Tipos de Subjects no RxJS

Gizelly Silva
3 min readJan 30, 2023

--

O RxJS é uma biblioteca JavaScript para programação reativa que permite trabalhar com fluxos de dados de forma assíncrona e encadeável. Um dos principais conceitos da programação reativa é o Subject, que é um tipo especial de Observable que permite que um ou mais valores sejam emitidos para um ou mais Observers.

Existem vários tipos de Subjects no RxJS, cada um com características e utilidades específicas. Neste artigo, vamos ver os principais tipos de Subjects e exemplos de como usá-los.

Subject

O Subject é o tipo mais básico de Subject e representa um Observable e um Observer ao mesmo tempo. Isso significa que, além de ser capaz de emitir valores para os seus Observers, ele também pode ser usado como um Observer para se inscrever em outros Observables.

Exemplo:

const subject = new Subject();

// Emitir um valor para os Observers
subject.next(1);

// Inscrever-se em um Observable
subject.subscribe(value => console.log(value));

BehaviourSubject

O BehaviourSubject é um tipo de Subject que armazena o último valor emitido e o envia para qualquer Observer que se inscrever nele. Isso é útil quando precisamos armazenar o estado do Subject e enviá-lo para novos Observers que se inscreverem nele.

Exemplo:

const subject = new BehaviourSubject(0); // Inicializando o BehaviourSubject com o valor 0

// Emitir um novo valor
subject.next(1);

// Inscrever-se no Subject
subject.subscribe(value => console.log(value)); // Imprime o valor 1

ReplaySubject

O ReplaySubject é um tipo de Subject que armazena todos os valores emitidos e os envia para qualquer Observer que se inscrever nele. Isso é útil quando queremos que todos os Observers recebam todos os valores emitidos pelo Subject, independentemente de quando eles se inscreverem.

Exemplo:

const subject = new ReplaySubject();

// Emitir alguns valores
subject.next(1);
subject.next(2);
subject.next(3);

// Inscrever-se no Subject
subject.subscribe(value => console.log(value)); // Imprime os valores 1, 2 e 3

AsyncSubject

O AsyncSubject é um tipo de Subject que só emite o último valor emitido quando o Subject é completado. Isso é útil quando queremos que todos os Observers recebam o último valor emitido pelo Subject assim que ele for completado.

Exemplo:

const subject = new AsyncSubject();

// Emitir alguns valores
subject.next(1);
subject.next(2);

// Inscrever-se no Subject
subject.subscribe(value => console.log(value)); // Não imprime nenhum valor

// Emitir o último valor e completar o Subject
subject.next(3);
subject.complete();

// Inscrever-se no Subject
subject.subscribe(value => console.log(value)); // Imprime o valor 3

MulticastObservable

O MulticastObservable é um tipo de Observable que permite que múltiplos Observers se inscrevam nele e recebam os mesmos valores emitidos. Isso é conseguido usando um Subject como intermediário entre o Observable e os Observers.

Exemplo:

// Criar um Observable
const sourceObservable = of(1, 2, 3);

// Criar um Subject
const subject = new Subject();

// Criar um MulticastObservable usando o Subject como intermediário
const multicastedObservable = sourceObservable.pipe(multicast(subject));

// Inscrever-se no MulticastObservable
multicastedObservable.subscribe(value => console.log(value));
multicastedObservable.subscribe(value => console.log(value));

// Iniciar a emissão de valores
multicastedObservable.connect();

Espero que esses exemplos ajudem a entender os diferentes tipos de Subjects do RxJS e como usá-los em aplicações reativas. Existem outros tipos de Subjects, como o PublishSubject, que não foram mencionados aqui, mas o objetivo foi apresentar os tipos mais comuns e úteis.

Fim 😗🖖🏻

Com isso, encerro por aqui e espero que esse artigo tenha ajudado a compreender melhor os Subjects e como usá-los em suas aplicações.

— Você pode me seguir no LinkedIn e no Github também. 💖

--

--

Gizelly Silva

Desenvolvedora Frontend com mais de 7 anos de experiência, apaixonada por criar interfaces web intuitivas e cativantes que encantam os usuários.