RXJS é uma biblioteca para criação de programas assíncronos baseados em eventos, usando uma cadeia de Observables em sequência.

Com RXJS podemos trabalhar com uma fonte de dados transformando ela através de um fluxo com um Observable, e tratar esse fluxo com Operators (operadores) que podem fazer algum tipo de tratamento no dado que está sendo consumido como se estivéssemos trabalhando com coleções, algo semelhante a trabalhar com arrays, usando filters, maps ou que quisermos tratar no fluxo de dados.

Observable

É o conceito de coleção de valores ou eventos, ele pode ser reutilizável, trabalha com stream de dados e podemos utilizar os operadores para trabalhar esse stream de dados.

Observable são coleções de múltiplos valores que podem seguir os seguintes protocolos Pull and Push que determina como um Produtor de dados pode comunicar com um Consumidor de dados.

Mas para entender como é a estrutura por trás desse conceitos vamos falar sobre dois protocolos por trás do conceito do Observable, Pull e Push

Pull

Nesse protocolo o Produtor dos dados não tem conhecimento de quando os dados serão entregues para o consumidor.

function getValue() {
    return 10
}

eu obtenho o valor 10 exatamente quando eu executo a função, A função é um produtor de dados, e a variável que chama a função é que está consumindo seu único valor de retorno.

const x = getValue();

Push

Nesse protocolo o Produtor determina quando enviar dados ao Consumidor, sendo assim o consumidor não sabe quando receberá os dados.

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(10);
  }, 300);
});

myPromise
  .then(data => console.log(10))
  // saída => 10

Promise é um tipo de push, ela é um Produtor que entrega um valor depois que todas as instruções ali são resolvidas, mas para obter esse valor é necessário se inscrever e aguarda para obter esse valor, diferente da função é a Promise que determina exatamente quando esse valor é enviado para o callback “resolve”

Tendo isso em mente de como funciona as Funções “pull” e as Promises “Push”, o RXJS apresentar uma nova forma de trabalhar com Push de dados, usando o Observable.

É um engano achar que Observables são funções assincronas, na verdade elas podem ser tanto sincronas quanto assincronas, entregando o mesmo range de dados.

Observable é uma forma de obter infinitos valores partindo de zero a partir do momento que é invocado, sendo que isso pode ser feito de forma síncrona ou assíncrona.

Criando um Observable

Para criar um Observable precisamos de um callback que geralmente é denominado de subscriber, ele vai fazer o push dos dados como um fluxo

import { Observable } from 'rxjs';

const observable = new Observable(function subscribe(subscriber) {
  const id = setInterval(() => {
    subscriber.next(1)
        subscriber.next(2)
        subscriber.next(3)
  }, 1000);
});

E agora para obtermos esse fluxo de dados, precisamos fazer a inscrição no observable.

observable.subscribe(value => console.log(value));
// teremos a seguinte saída
// 1
// 2
// 3

Um ponto importante aqui é que cada subscribe recebe um valor específico para aquela chamada, se fizermos uma duplicação do código acima

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

Teremos as mesmas saídas, mas valores entregues e o Observable são específicos para cada assinante inscrito “subscribe" onde ele adiciona uma configuração independente para cada um, em resumo nesse caso onde usamos o New Observable a ideia base é que ele não compartilhar estado.

Observer

O Observer é um consumidor de valores entregues por um Observable, é um Objeto constituído de 3 callbacks um para cada tipo:

• Next: envia algum tipo de valor primitivo ou objeto que é entregue ao subscribe quando o usuário assina um Observable.
• Error: envia um erro ou uma exceção “exception” parando a execução do Observable nada sendo entregue posteriormente.
• Complete: Não envia nenhum valor, apenas finaliza a execução do Observable informando que não existe nenhum valor a ser mais enviado no fluxo posteriormente.

Para trabalhar com um observer basta seguir essa estrutura de forma completa ou parcial:

// Basta apenas assinar um Observable passando esse objeto como configuração 
// para consumi-lo
observable.subscribe({
  next(dado)   { // obter o dado},
  error(error) { // tratar o erro },
  complete()   { // Notificar que a execução acabou, não retorna nenhum valor  }
});

Seguindo essa estrutura você pode receber um dado, tratar um erro ou informar que uma execução foi finalizada, mas se vc quiser receber apenas o dado, pode executar apenas de forma parcial como já foi tratado em alguns exemplos anteriores:

observable.subscribe(dado => console.log('Entrega o valor passado pelo next ' + dado));

Subscription

O Subscription é uma assinatura de um Observable, ja foi citado em vários momentos do artigo acima, geralmente a execução de um Observable para obtermos seu fluxo de dados, mas ele nos fornece um recurso bastante valioso que é a possibilidade de conseguir cancelar a própria execução.

Cancelando um Observable

É possível cancelar um Observable a qualquer momento, quando um subscribe atende ao seu propósito ou é preciso fazer um cancelamento abrupto podemos fazer isso removendo o subscribe.

import { from } from 'rxjs';

const observable = from(["Huguinho", "Zezinho", "Luizinho"]);
const subscription = observable.subscribe(x => console.log(x));

subscription.unsubscribe();

É preciso criar um subscription para poder efetuar o cancelamento, fazer o cancelamento de um Observable evita o desperdício de memória do dispositivo.

Também podemos cancelar executando algo de uma forma mais custom

É preciso criar um subscription para poder efetuar o cancelamento, fazer o cancelamento de um Observable auxilia evitando o desperdício dos recursos de memória.

Também podemos cancelar executando algo de uma forma mais custom

const observable = new Observable(function subscribe(subscriber) {
  const intervalId = setInterval(() => {
    subscriber.next('Olá');
  }, 1000);

  return function unsubscribe() {
    clearInterval(intervalId);
  };
});

Os Observables do RxJS são muito mais poderoso em conjunto com outros recursos que o RxJS como composição com os Operadores, que veremos em outro artigo.