BehaviorSubject vs Observable?

Estoy investigando los patrones de Angular RxJs y no entiendo la diferencia entre a BehaviorSubjecty an Observable.

Según tengo entendido, a BehaviorSubjectes un valor que puede cambiar con el tiempo (puede suscribirse y los suscriptores pueden recibir resultados actualizados). Este parece ser exactamente el mismo propósito de un Observable.

¿Cuándo Observableusarías un vs a BehaviorSubject? ¿Existen beneficios al usar un BehaviorSubjectover an Observableo viceversa?

BehaviorSubject es un tipo de asunto, un asunto es un tipo especial de observable para que pueda suscribirse a mensajes como cualquier otro observable. Las características únicas de BehaviorSubject son:

• Necesita un valor inicial, ya que siempre debe devolver un valor en la suscripción, incluso si no ha recibido un next()
• Tras la suscripción, devuelve el último valor del tema. Un observable regular solo se dispara cuando recibe unonnext
• en cualquier momento, puede recuperar el último valor del sujeto en un código no observable utilizando el getValue()método

Las características únicas de un sujeto en comparación con un observable son:

• Es un observador además de ser un observable, por lo que también puede enviar valores a un sujeto además de suscribirse a él.

Además, puede obtener un sujeto observable del comportamiento utilizando el asObservable()método activado BehaviorSubject.

Observable es un genérico, y BehaviorSubjecttécnicamente es un subtipo de Observable porque BehaviorSubject es un observable con cualidades específicas.

Ejemplo con BehaviorSubject :

// Behavior Subject

// a is an initial value. if there is a subscription 
// after this, it would get "a" value immediately
let bSubject = new BehaviorSubject("a"); 

bSubject.next("b");

bSubject.subscribe(value => {
  console.log("Subscription got", value); // Subscription got b, 
                                          // ^ This would not happen 
                                          // for a generic observable 
                                          // or generic subject by default
});

bSubject.next("c"); // Subscription got c
bSubject.next("d"); // Subscription got d

Ejemplo 2 con sujeto regular:

// Regular Subject

let subject = new Subject(); 

subject.next("b");

subject.subscribe(value => {
  console.log("Subscription got", value); // Subscription wont get 
                                          // anything at this point
});

subject.next("c"); // Subscription got c
subject.next("d"); // Subscription got d

Se puede crear un observable desde ambos Subjecty BehaviorSubjectusando subject.asObservable().

La única diferencia es que no puede enviar valores a un next()método observable .

En los servicios angulares, lo usaría BehaviorSubjectpara un servicio de datos, ya que un servicio angular a menudo se inicializa antes de que el componente y el sujeto de comportamiento garanticen que el componente que consume el servicio reciba los últimos datos actualizados incluso si no hay nuevas actualizaciones desde la suscripción del componente a estos datos.

Observable: resultado diferente para cada observador

Una diferencia muy muy importante. Como Observable es solo una función, no tiene ningún estado, por lo que para cada nuevo Observador, ejecuta el código de creación observable una y otra vez. Esto resulta en:

El código se ejecuta para cada observador. Si es una llamada HTTP, se llama para cada observador

Esto causa errores importantes e ineficiencias.

BehaviorSubject (o Subject) almacena detalles del observador, ejecuta el código solo una vez y da el resultado a todos los observadores.

Ex:

JSBin: http://jsbin.com/qowulet/edit?js,console

// --- Observable ---
let randomNumGenerator1 = Rx.Observable.create(observer => {
   observer.next(Math.random());
});

let observer1 = randomNumGenerator1
      .subscribe(num => console.log('observer 1: '+ num));

let observer2 = randomNumGenerator1
      .subscribe(num => console.log('observer 2: '+ num));


// ------ BehaviorSubject/ Subject

let randomNumGenerator2 = new Rx.BehaviorSubject(0);
randomNumGenerator2.next(Math.random());

let observer1Subject = randomNumGenerator2
      .subscribe(num=> console.log('observer subject 1: '+ num));
      
let observer2Subject = randomNumGenerator2
      .subscribe(num=> console.log('observer subject 2: '+ num));

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.3/Rx.min.js"></script>

Salida:

"observer 1: 0.7184075243594013"
"observer 2: 0.41271850211336103"
"observer subject 1: 0.8034263165479893"
"observer subject 2: 0.8034263165479893"

Observe cómo el uso de resultados Observable.createcreados diferentes para cada observador, pero BehaviorSubjectdio el mismo resultado para todos los observadores. Esto es importante.

Otras diferencias resumidas.

┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┳━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃         Observable                  ┃     BehaviorSubject/Subject         ┃      
┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ 
┃ Is just a function, no state        ┃ Has state. Stores data in memory    ┃
┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
┃ Code run for each observer          ┃ Same code run                       ┃
┃                                     ┃ only once for all observers         ┃
┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
┃ Creates only Observable             ┃Can create and also listen Observable┃
┃ ( data producer alone )             ┃ ( data producer and consumer )      ┃
┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━╋━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
┃ Usage: Simple Observable with only  ┃ Usage:                              ┃
┃ one Obeserver.                      ┃ * Store data and modify frequently  ┃
┃                                     ┃ * Multiple observers listen to data ┃
┃                                     ┃ * Proxy between Observable  and     ┃
┃                                     ┃   Observer                          ┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

Observable y sujeto son ambos observables significa que un observador puede rastrearlos. pero ambos tienen algunas características únicas. Además, hay un total de 3 tipos de temas, cada uno de ellos nuevamente tiene características únicas. Tratemos de entender cada uno de ellos.

Puede encontrar el ejemplo práctico aquí en stackblitz . (Debe verificar la consola para ver la salida real)

Observables

Son fríos: el código se ejecuta cuando tienen al menos un solo observador.

Crea una copia de datos: Observable crea una copia de datos para cada observador.

Unidireccional: el observador no puede asignar valor a observable (origen / maestro).

Subject

Están calientes: el código se ejecuta y el valor se transmite incluso si no hay observador.

Datos compartidos: se comparten los mismos datos entre todos los observadores.

bidireccional: el observador puede asignar valor a observable (origen / maestro).

Si está utilizando el sujeto, pierde todos los valores que se transmiten antes de la creación del observador. Así que aquí viene el tema de reproducción

ReplaySubject

Están calientes: el código se ejecuta y el valor se transmite incluso si no hay observador.

Datos compartidos: se comparten los mismos datos entre todos los observadores.

bidireccional: el observador puede asignar valor a observable (origen / maestro). más

Reproduzca el flujo de mensajes: no importa cuándo se suscriba el asunto de reproducción, recibirá todos los mensajes emitidos.

En el asunto y el tema de reproducción no puede establecer el valor inicial en observable. Así que aquí viene el sujeto conductual

BehaviorSubject

Están calientes: el código se ejecuta y el valor se transmite incluso si no hay observador.

Datos compartidos: se comparten los mismos datos entre todos los observadores.

bidireccional: el observador puede asignar valor a observable (origen / maestro). más

Reproduzca el flujo de mensajes: no importa cuándo se suscriba el asunto de reproducción, recibirá todos los mensajes emitidos.

Puede establecer el valor inicial: puede inicializar el observable con el valor predeterminado.

El objeto Observable representa una colección basada en inserción.

Las interfaces Observador y Observable proporcionan un mecanismo generalizado para la notificación basada en notificaciones, también conocido como el patrón de diseño del observador. El objeto Observable representa el objeto que envía notificaciones (el proveedor); el objeto Observador representa la clase que los recibe (el observador).

La clase Asunto hereda tanto Observable como Observador, en el sentido de que es a la vez observador y observable. Puede usar un tema para suscribir a todos los observadores y luego suscribir el tema a una fuente de datos de fondo

var subject = new Rx.Subject();

var subscription = subject.subscribe(
    function (x) { console.log('onNext: ' + x); },
    function (e) { console.log('onError: ' + e.message); },
    function () { console.log('onCompleted'); });

subject.onNext(1);
// => onNext: 1

subject.onNext(2);
// => onNext: 2

subject.onCompleted();
// => onCompleted

subscription.dispose();

Más en https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/subjects.md

Una cosa que no veo en los ejemplos es que cuando lanza BehaviorSubject to Observable a través de asObservable, hereda el comportamiento de devolver el último valor en la suscripción.

Es un poco complicado, ya que a menudo las bibliotecas exponen los campos como observables (es decir, parámetros en ActivatedRoute en Angular2), pero pueden usar Subject o BehaviorSubject detrás de escena. Lo que usan afectaría el comportamiento de la suscripción.

Ver aquí http://jsbin.com/ziquxapubo/edit?html,js,console

let A = new Rx.Subject();
let B = new Rx.BehaviorSubject(0);

A.next(1);
B.next(1);

A.asObservable().subscribe(n => console.log('A', n));
B.asObservable().subscribe(n => console.log('B', n));

A.next(2);
B.next(2);

Un observable le permite suscribirse solo mientras que un sujeto permite publicar y suscribirse.

Por lo tanto, un tema permite que sus servicios se utilicen como editor y como suscriptor.

A partir de ahora, no soy tan bueno, Observableasí que compartiré solo un ejemplo de Subject.

Comprendamos mejor con un ejemplo de CLI angular . Ejecute los siguientes comandos:

npm install -g @angular/cli

ng new angular2-subject

cd angular2-subject

ng serve

Reemplace el contenido de app.component.htmlcon:

<div *ngIf="message">
  {{message}}
</div>

<app-home>
</app-home>

Ejecute el comando ng g c components/homepara generar el componente de inicio. Reemplace el contenido de home.component.htmlcon:

<input type="text" placeholder="Enter message" #message>
<button type="button" (click)="setMessage(message)" >Send message</button>

#messagees la variable local aquí. Agregue una propiedad message: string; a la app.component.tsclase 's.

Ejecute este comando ng g s service/message. Esto generará un servicio en src\app\service\message.service.ts. Proporcionar este servicio a la aplicación. .

Importar Subjecta MessageService. Agrega un tema también. El código final se verá así:

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class MessageService {

  public message = new Subject<string>();

  setMessage(value: string) {
    this.message.next(value); //it is publishing this value to all the subscribers that have already subscribed to this message
  }
}

Ahora, inyecte este servicio home.component.tsy pase una instancia del mismo al constructor. Haz esto por app.component.tstambién. Use esta instancia de servicio para pasar el valor de #messagea la función de servicio setMessage:

import { Component } from '@angular/core';
import { MessageService } from '../../service/message.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {

  constructor(public messageService:MessageService) { }

  setMessage(event) {
    console.log(event.value);
    this.messageService.setMessage(event.value);
  }
}

En el interior app.component.ts, suscríbase y anule la suscripción (para evitar pérdidas de memoria) a Subject:

import { Component, OnDestroy } from '@angular/core';
import { MessageService } from './service/message.service';
import { Subscription } from 'rxjs/Subscription';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {

  message: string;
  subscription: Subscription;

  constructor(public messageService: MessageService) { }

  ngOnInit() {
    this.subscription = this.messageService.message.subscribe(
      (message) => {
        this.message = message;
      }
    );
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

Eso es.

Ahora, cualquier valor ingresado dentro #messagede home.component.htmlse imprimirá {{message}}dentroapp.component.html

app.component.ts

behaviourService.setName("behaviour");

behaviour.service.ts

private name = new BehaviorSubject("");
getName = this.name.asObservable();`

constructor() {}

setName(data) {
    this.name.next(data);
}

custom.component.ts

behaviourService.subscribe(response=>{
    console.log(response);    //output: behaviour
});

BehaviorSubject vs Observable : RxJS tiene observadores y observables, Rxjs ofrece múltiples clases para usar con flujos de datos, y uno de ellos es BehaviorSubject.

Observables : los observables son colecciones diferidas de múltiples valores a lo largo del tiempo.

BehaviorSubject : Un sujeto que requiere un valor inicial y emite su valor actual a los nuevos suscriptores.

 // RxJS v6+
import { BehaviorSubject } from 'rxjs';

const subject = new BehaviorSubject(123);

//two new subscribers will get initial value => output: 123, 123
subject.subscribe(console.log);
subject.subscribe(console.log);

//two subscribers will get new value => output: 456, 456
subject.next(456);

//new subscriber will get latest value (456) => output: 456
subject.subscribe(console.log);

//all three subscribers will get new value => output: 789, 789, 789
subject.next(789);

// output: 123, 123, 456, 456, 456, 789, 789, 789

Piense en los Observables como una tubería con agua corriente, a veces el agua fluye y otras no. En algunos casos, es posible que necesite una tubería que siempre tenga agua, puede hacer esto creando una tubería especial que siempre contenga agua, sin importar cuán pequeña sea, llamemos a esta tubería especial BehaviorSubject , si resulta ser un proveedor de suministro de agua en su comunidad, puede dormir tranquilo por la noche sabiendo que su tubería recién instalada simplemente funciona.

En términos técnicos: puede encontrar casos de uso en los que un Observable siempre debe tener valor, tal vez desee capturar el valor de un texto de entrada a lo largo del tiempo, luego puede crear una instancia de BehaviorSubject para garantizar este tipo de comportamiento, digamos:

const firstNameChanges = new BehaviorSubject("<empty>");

// pass value changes.
firstNameChanges.next("Jon");
firstNameChanges.next("Arya");

Luego puede usar "valor" para muestrear los cambios a lo largo del tiempo.

firstNameChanges.value;

Esto resulta útil cuando combina Observables más adelante, al observar el tipo de su transmisión como BehaviorSubject, puede asegurarse de que la transmisión al menos se dispare o señale al menos una vez .