Entendendo a Diferença entre Subject e BehaviorSubject no RxJS

Neste artigo você vai aprender a diferença entre Subject e BehaviorSubject, recursos importantes do Angular e RxJS

Fala programador(a), beleza? Bora aprender mais sobre Angular!

Introdução ao RxJS e Seus Observables

RxJS é uma biblioteca para programação reativa usando Observables, para facilitar a composição de código assíncrono ou baseado em callbacks.

É uma peça central em aplicações Angular, mas também pode ser utilizada com outras bibliotecas ou frameworks, como React.

O Que São Subjects?

Um Subject no RxJS é um tipo especial de Observable que permite que valores sejam multicasted para muitos Observers.

Enquanto Observables por padrão são unicast (cada Observer inscrito possui uma execução independente do Observable), Subjects são multicast.

Características Principais dos Subjects:

• São Observables: Subjects são como Observables e podem ser observados.
• São Observers: Possuem métodos next(), error() e complete().
• Multicast: Podem enviar e receber valores para e de múltiplos Observers.

E o BehaviorSubject?

BehaviorSubject é uma variante de Subject que requer um valor inicial e emite seu valor atual para novos inscritos.

É útil quando você precisa garantir que o Observer receba algum valor imediatamente após a inscrição.

Propriedades do BehaviorSubject:

• Valor Inicial: Deve ser fornecido um valor inicial ao criar uma instância de BehaviorSubject.
• Valor Atual: Sempre possui um valor atual. Novos inscritos recebem imediatamente o elemento mais recente da sequência.
• Último Valor: Quando um novo valor é emitido, ele se torna o “atual” para todos os Observers atuais e futuros.

Diferenças Chave entre Subject e BehaviorSubject

1. Valor Inicial: Subject não tem noção de “valor atual”, enquanto BehaviorSubject guarda o último valor emitido e o fornece imediatamente aos novos inscritos.
2. Recepção de Valor: Com Subject, novos inscritos não recebem um valor até que um seja emitido após a inscrição. Com BehaviorSubject, eles recebem o último valor assim que se inscrevem.

Exemplo Prático com React

Suponhamos que estamos desenvolvendo um aplicativo React e queremos compartilhar o estado entre componentes.

Vamos ver como podemos utilizar BehaviorSubject para manter o estado sincronizado.

Uso do BehaviorSubject em um Serviço de Estado

import { BehaviorSubject } from 'rxjs';

// Criamos um BehaviorSubject com um valor inicial de 0
const counterSubject = new BehaviorSubject(0);

export const useCounter = () => {
  // Usamos useState para manter o valor atual do BehaviorSubject no componente
  const [counter, setCounter] = React.useState(counterSubject.value);

  React.useEffect(() => {
    // Nos inscrevemos no BehaviorSubject quando o componente é montado
    const subscription = counterSubject.subscribe(setCounter);

    // Desinscrevemos quando o componente é desmontado
    return () => subscription.unsubscribe();
  }, []);

  // Função para incrementar o contador
  const increment = () => {
    counterSubject.next(counterSubject.value + 1);
  };

  return { counter, increment };
};

Consumindo o Estado em Componentes

import { useCounter } from './counterService';

const CounterComponent = () => {
  const { counter, increment } = useCounter();

  return (
    <div>
      <span>Contador: {counter}</span>
      <button onClick={increment}>Incrementar</button>
    </div>
  );
};

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Chegamos ao fim do artigo sobre a diferença entre Subject e BehaviorSubject!

Subject e BehaviorSubject são duas ferramentas poderosas no RxJS que nos ajudam a gerenciar o estado e a comunicação entre diferentes partes de nossas aplicações.

A escolha entre um e outro dependerá das necessidades específicas do seu projeto.

Enquanto Subject é uma boa escolha para eventos simples de emissão, BehaviorSubject é ideal quando você precisa garantir que um valor esteja disponível para os inscritos assim que eles se inscreverem.

Em aplicações React, o uso de BehaviorSubject para gerenciamento de estado global pode ser uma alternativa ao uso de contextos ou bibliotecas como Redux, especialmente quando combinado com hooks personalizados.

Ao seguir as boas práticas e entender as diferenças e casos de uso para cada tipo de Subject, você pode escrever código mais previsível, testável e fácil de manter.

Está buscando evoluir como Programador? Confira o nossos cursos de programação.