fbpx

RxJS Observables: Zip vs CombineLatest

4 minutos para ler

RxJS é uma poderosa biblioteca para programação reativa, que utiliza o conceito de Observables, oferecendo inúmeras ferramentas para facilitar o desenvolvimento de código com eventos assíncronos ou baseados em callbacks. É uma biblioteca complexa, que disponibiliza ao desenvolvedor vários conjuntos de operadores para as mais diversas soluções que envolvem programação reativa.

Dentre esses conjuntos de operadores, alguns muitos utilizados são os operadores de combinação, que combinam múltiplas fontes de Observables para formar um único Observable. Os casos de uso variam, desde a detecção de múltiplos eventos de entrada do usuário até tratamento de respostas de múltiplos HTTP requests.

Zip

O operator Zip retorna um observável que aplica uma combinação dos itens emitidos, em sequência, por dois ou mais Observables, com resultado os itens emitidos no Observable retornado. Ele aplica essa combinação estritamente em sequência, ou seja, o primeiro item emitido neste novo Observable retornado será a combinação aplicada ao primeiro item emitido pelo Observable #1 e o primeiro item emitido pelo Observable #2, o segundo item emitido será o resultado da combinação aplicado ao segundo item emitido pelo Observable #1 e o segundo item emitido pelo Observable #2, e assim continuará emitindo até o último conjunto de itens emitidos (ou mais no caso em que tenham mais Observables fonte).

Você pode interagir com as bolinhas nesse link para te ajudar a entender esse conceito (tente clicar e arrastar as bolinhas das duas fontes de Observables e verificar o Observable retornado)

Code time!

Vamos ver como o operador Zip funciona na prática!

  • A combinação emitida será um vetor com todas as emissões de origem, ordenadas da mesma maneira em que os Observables são passados para os parâmetros da função Zip
  • O novo Observable irá emitir a mesma quantidade de itens emitidos pelo source Observable que tiver a menor quantidade de emissões, ou seja, como o zip espera um “pacote” combinando estritamente todas as fontes de Observables, se uma fonte emitiu um número a mais de vezes do que as outras, o Zip não irá emiti-lo até que todas as outras fontes tenham emitido o mesmo número de itens (veja a bolinha “5” no link)

Você também pode passar uma função opcional de sua escolha para o Zip, que recebe as fontes Observables como entrada e produz um único item emitido pelo Observable resultante. Vamos modificar o código acima provendo uma função para modificar os itens no Observable retornado.

Veja que estamos retornando agora uma string nos items do Observable retornado pelo Zip, aqui você pode inserir qualquer lógica de acordo com suas necessidades, e quando necessário.

CombineLatest

O operador CombineLatest se comporta de forma parecida ao Zip, mas enquanto Zip emite apenas quando cada fonte de Observable já emitiu um item previamente, CombineLatest emite um item sempre quando qualquer um dos Observables emite um item (desde que cada uma das fontes de Observables tenha emitido pelo menos um item, ou seja, o primeiro item da stream).

Quando qualquer uma das fontes emitir um item, CombineLatest combina os itens mais recentes de cada uma das fontes de Observables e emite o valor combinado de todas essas fontes.

Nesse link você pode verificar esse conceito clicando e arrastando as bolinhas 🙂

Abaixo um exemplo seguindo a mesma idéia do código anterior, mas ao invés de Zip, agora usamos combineLastest.

  • Assim como o Zip, a combinação emitida também será um vetor ordenado pela ordem dos Observáveis que são passados para os parâmetros da função.
  • Também, como o Zip, CombineLatest também aceita uma função opcional caso seja necessário fazer qualquer tratamento dos itens recebidos pelos Observables fonte e emitir um item no Observable retornado

Abaixo uma animação onde você pode comparar esses dois operadoradores em paralelo 🙂

Você pode usá-los conforme sua necessidade para resolver sempre que houver problemas que cruzem o seu caminho como desenvolvedor.

Sua imaginação é o limite e o RxJS fornece ferramentas para isso. Mas lembre-se: com grande poderes, vêm grandes responsabilidades 😉

Sobre o autor

Gabriel Cencic, formado em Física Computacional na USP São Carlos, trabalha atualmente como Engenheiro Front-End na Wavy Global. Entusiasta em jogos, fã de Adventure Time, robôs e dank memes.

Suas redes para contato são: LinkedIn e Medium



Você também pode gostar

Deixe uma resposta

-