Observables(cold and hot), Observers & Subscriptions, RxJS, subject, Subscription

Obserable vs promise

https://morioh.com/p/726c7646cc64 (*************** VVVVI)


Observables, Observers & Subscriptions

Observables:  An observable is a function that produces a stream of values to an observer over time. Example : Youtube,

Observers :

1. When you subscribe to an observable, you are an observer. Ex: Human, You. Be we click on subscriber button on youtube;
2. An observable can have multiple observers

Subscriptions:

1. when we (man) subscribe the obserables then that is call subscriptoion

We can create obserable by "create()" method

import { Observable } from "rxjs/Observable";

var observable = Observable.create((observer:any) => {
    observer.next('Hey guys!')
}) 

Above, you can see that we're defining the subscribe function, and we're 

emitting a single value of 'Hey guys!' by calling observer.next().

Now, how can we subscribe or create a subscription to this observable?  Simple..

var observable = Observable.create((observer:any) => {
    observer.next('Hey guys!')
})

observable.subscribe((x:any) => console.log(x));

Please see the reference.... 

REF:

• https://coursetro.com/posts/code/148/RxJS-Observables-Tutorial---Creating-&-Subscribing-to-Observables 

  https://www.learnrxjs.io/operators/creation/create.html 

You can use these creation operators that create observables in a variety of ways:

• Of
• FromEventPattern
• FromEvent
• FromPromise
• Interval
• Range
• Timer
• Empty
• Throw
• Never

RxJS Operators:

 Operator is used to operate some operation on obserable data;

example: Map(), filter(), first()

for detail description
Ref: https://www.devglan.com/javascript/rxjs-tutorial

Cold and Hot Observable:

 When the data is produced by the Observable itself, we call it a cold Observable. When the data is produced outside the Observable, we call it a hot Observable.

REf:
https://medium.com/@luukgruijs/understanding-hot-vs-cold-observables-62d04cf92e03

 

Subjects:

memory leak possibility nai that way we use subject instead of objerable

1. A Subject is like an Observable. It can be subscribed to, just like you normally would with Observables.  
2. The main reason to use Subjects is to multicast. An Observable by default is unicast.
3. Subjects are like EventEmitters, they maintain a registry of many listeners.  
4. subject use to implement better uses of hot obserable
5. there are some example to understand, please visit below reference link

Ref:

 https://medium.com/@luukgruijs/understanding-rxjs-subjects-339428a1815b

Subscription:

What is a Subscription? A Subscription is an object that represents a disposable resource, usually the execution of an Observable. A Subscription has one important method, unsubscribe, that takes no argument and just disposes the resource held by the subscription.

ref:  https://rxjs-dev.firebaseapp.com/guide/subscription

Angular HttpClient: 

•  Before you can use the HttpClient, you need to import the Angular HttpClientModule. Most apps do so in the root AppModule.
•  

• import { Injectable } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  
  @Injectable()
  export class ConfigService {
    constructor(private http: HttpClient) { }
  } 

  this.http.get/ this.http.post return  Observable

  so to get the data write code somthing like

  this.configService.getConfig()
      .subscribe((data: Config) => this.config = {
          heroesUrl: data['heroesUrl'],
          textfile:  data['textfile']
      }) 

   

• https://angular.io/guide/http

Try to use combineLatest instead of forkJoin :

With combineLatest :

const combined = Observable.combineLatest(
  this.http.get('https://testdb1.firebaseio.com/.json').map((res: Response) => res.json()),
  this.http.get('https://testdb2.firebaseio.com/.json').map((res: Response) => res.json())
)

combined.subscribe(latestValues => {
    const [ data_changes , data_all ] = latestValues;
    console.log( "data_changes" , data_changes);
    console.log( "data_all" , data_all);
});

You can also handle it by forkJoin , but forkJoin will return data when all calls are finished and return result , but in combineLatest When any observable emits a value, emit the latest value from each.

With forkJoin :

const combined = Observable.forkJoin(
  this.http.get('https://testdb1.firebaseio.com/.json').map((res: Response) => res.json()),
  this.http.get('https://testdb2.firebaseio.com/.json').map((res: Response) => res.json())
)

combined.subscribe(latestValues => {
    const [ data_changes , data_all ] = latestValues;
    console.log( "data_changes" , data_changes);
    console.log( "data_all" , data_all);
});

Call both and check the console log , you will get idea.