¿Cuál es la diferencia entre BehaviorSubject y Observable?

Estoy investigando los patrones de diseño de RxJS y no entiendo la diferencia entre BehaviorSubject y Observable.

Según tengo entendido, BehaviorSubject puede contener un valor que puede cambiar. Se puede suscribir y los suscriptores pueden recibir valores actualizados. Ambos parecen tener exactamente el mismo propósito.

1. ¿Cuándo se debe usar Observable vs BehaviorSubject y viceversa?
2. ¿Cuáles son los beneficios de usar BehaviorSubject en lugar de Observable y viceversa?

BehaviorSubject es una variante de Subjectun tipo de Observable al que uno puede “suscribirse” como cualquier otro Observable.

Características de BehaviorSubject

• Necesita un valor inicial ya que siempre debe devolver un valor al momento de la suscripción, incluso si no ha recibido el método next()
• Tras la suscripción, devuelve el último valor del Asunto. Un Observable normal solo se activa cuando recibe el método onNext()
• En cualquier momento, uno puede recuperar el último valor del Sujeto en un no Observable usando el método getValue()

Características del tema

• El sujeto es un “observador” además de ser un Observable; por lo tanto, también se pueden enviar valores a un Sujeto mientras se está suscrito a él
• Uno puede obtener un valor de BehaviorSubject usando el método asObservable()

Ejemplo 1 usando BehaviorSubject

// BehaviorSubject.
// 'A' is an initial value. If there is a Subscription 
// after it, it would immediately get the value 'A'.

beSubject = new BehaviorSubject('a'); 

beSubject.next('b');

beSubject.subscribe(value => {
  console.log('Subscription received the value ', value);

  // Subscription received B. It would not happen
  // for an Observable or Subject by default.
});

beSubject.next('c');
// Subscription received C.

beSubject.next('d');
// Subscription received D.

Ejemplo 2 usando Asunto

// Subject.

subject = new Subject(); 

subject.next('b');

subject.subscribe(value => {
  console.log('Subscription received the value ', value);

  // Subscription won't receive anything at this point.
});

subject.next('c');
// Subscription received C.

subject.next('d');
// Subscription received D.

Se puede crear un Observable a partir de ambos Subject y BehaviorSubject; Por ejemplo, subjectName.asObservable().

La única diferencia es que no se pueden enviar valores a un Observable usando el método next().

En Angular, se recomienda usar BehaviorSubject para transferir datos como un servicio a menudo se inicializa antes que un componente.

BehaviorSubject garantiza que el componente que consume el Servicio reciba los últimos datos actualizados, incluso si no hay nuevas actualizaciones, debido a la suscripción del componente al Servicio.

Observable: resultado diferente para cada observador

Una diferencia muy muy importante. Dado que Observable es solo una función, no tiene ningún estado, por lo que para cada nuevo Observer, 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 provoca importantes errores e ineficiencias.

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

Ex:

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

// --- 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>

Producción :

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

Observa cómo usando Observable.create creó una salida diferente para cada observador, pero BehaviorSubject dio la misma salida 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 Ambos son observables, lo que significa que un observador puede rastrearlos. Ambos tienen algunas características únicas. Hay 3 tipos de Sujetos, cada uno de los cuales también tiene características únicas.

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

Observables

Están fríos: El código se ejecuta cuando tienen al menos un único observador.

Crea una copia de los datos: Observable crea una copia de los 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 un observador.

Comparte datos: Los mismos datos se comparten entre todos los observadores.

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

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

ReplaySubject

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

Comparte datos: Los mismos datos se comparten entre todos los observadores.

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

Reproducir el flujo de mensajes: No importa cuándo te suscribas al asunto de la repetición, recibirás todos los mensajes transmitidos.

En Subject y ReplaySubject, no puede establecer el valor inicial en observable. Así que aquí viene Sujeto conductual…

BehaviorSubject

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

Comparte datos: Los mismos datos se comparten entre todos los observadores.

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

Reproducir el flujo de mensajes: No importa cuándo te suscribas al asunto de la repetición, recibirás todos los mensajes transmitidos.

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

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

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

La clase Sujeto hereda tanto Observable como Observer, en el sentido de que es tanto un observador como un observable. Puede usar un tema para suscribir a todos los observadores y luego suscribir el tema a una fuente de datos de back-end

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 lanzas BehaviorSubject a Observable a través de asObservable, hereda el comportamiento de devolver el último valor en la suscripción.

Es la parte complicada, 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 suscripción.

Mira aquí http://jsbin.com/ziquxapubo/edit?html,js,consola

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 sólo mientras que un sujeto le permite tanto publicar como suscribirse.

Así que un sujeto le permite a su servicios para ser utilizado como editor y suscriptor.

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

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

npm install -g @angular/cli

ng new angular2-subject

cd angular2-subject

ng serve

Reemplazar el contenido de app.component.html con:

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

<app-home>
</app-home>

Ejecute el comando ng g c components/home para generar el componente de inicio. Reemplazar el contenido de home.component.html con:

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

#message es la variable local aquí. Agregar una propiedad message: string;
hacia app.component.ts‘clase S.

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

Importar Subject en 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 en home.component.ts y pasar una instancia de él al constructor. haz esto por app.component.ts también. Use esta instancia de servicio para pasar el valor de #message a 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);
  }
}

Adentro app.component.tssuscríbase y cancele la suscripción (para evitar pérdidas de memoria) al 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 todo.

Ahora, cualquier valor ingresado dentro #message de home.component.html se imprimirá a {{message}} adentro app.component.html

Pensar en observables como una tubería con agua que fluye, a veces el agua fluye ya veces no. En algunos casos, es posible que necesite una tubería que siempre tenga agua, puede hacerlo creando una tubería especial que siempre contenga agua sin importar cuán pequeña sea, llamemos a esta tubería especial ComportamientoAsuntosi usted es 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 debería 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");

A continuación, puede utilizar “valor” para probar los cambios a lo largo del tiempo.

firstNameChanges.value;

Esto es útil cuando combina Observables más tarde, al observar el tipo de su transmisión como BehaviorSubject, puede asegurarse de que el transmita al menos incendios o señale solo una vez al menos.