Showing posts with label RxJS. Show all posts
Showing posts with label RxJS. Show all posts

Tuesday, 19 October 2021

RXJS, finalize is same as finally can only be used whe observable complete or subject completes

 Observable automatically completes after emission for example of(1), observer=> observer.next(1) hence for observable, usally piple(fianlize()) can always be used. Note finalize is always called in the end when observable completes.



For subject, it does not complete after next, subject.next(1), subject.next(2), it can keep emitting, for subject to complete use

var complete  = subject.piple(take(1))



https://stackoverflow.com/questions/49735826/rxjs5-finalize-operator-not-called


For some observable, it may not always be completed after emission such as this.route.queryParams,


Need to call  this.route.queryParams.pipe(take(1)),



https://stackoverflow.com/questions/49735826/rxjs5-finalize-operator-not-called

Friday, 15 January 2021

Observarble subscription and pipe

import { Subscription } from 'rxjs';

import { tap, map, catchError, finalize } from 'rxjs/operators';


 Observable

// Do something with return data

.pipe(

// Always execute no matter wut

finalize( ()=> {

  this.loader = false;

})

// Do something with return data but do not mutate it. Can do console.log

pipe( (returnData) = > {


})

// MergeMap mutate the data, for example change it to an observable

mergeMap( (returnData) => {


})

)

// Handle data by next(data)

. subscribe ( (returnData) => {


})

.catch ( (error) => {


})

Thursday, 29 October 2020

RXJS observable vs subject, Observable is unicast vs subject is mutli cast

 In stream programming there are two main interfaces: Observable and Observer.

Observable is for the consumer, it can be transformed and subscribed:

observable.map(x => ...).filter(x => ...).subscribe(x => ...)

Observer is the interface which is used to feed an observable source:

observer.next(newItem)

We can create new Observable with an Observer:

var observable = Observable.create(observer => { 
    observer.next('first'); 
    observer.next('second'); 
    ... 
});
observable.map(x => ...).filter(x => ...).subscribe(x => ...)

Or, we can use a Subject which implements both the Observable and the Observer interfaces:

var source = new Subject();
source.map(x => ...).filter(x => ...).subscribe(x => ...)
source.next('first')
source.next('second')
-------------------------------------------------------------------------------------------------------------

 Observable are unicast(observer emits on each subscription) where as subjects are multi cast, different subscription receives same value, and subscription has to come first)

-------------------------------------------------------------------------------------------------------------

Observables are unicast by design and Subjects are multicast by design.

if you look at the below example - each subscription recieves the diffrent values as observables developed as unicast by design.

import {Observable} from 'rxjs';

let obs = Observable.create(observer=>{
   observer.next(Math.random());
})

obs.subscribe(res=>{
  console.log('subscription a :', res); //subscription a :0.2859800202682865
});

obs.subscribe(res=>{
  console.log('subscription b :', res); //subscription b :0.694302021731573
});

this could be weird if you are expecting the same values on both the subscription.

we can overcome this issue using Subjects. Subjects is similar to event-emitter and it does not invoke for each subscription. consider the below example.

import {Subject} from 'rxjs';

let obs = new Subject();

obs.subscribe(res=>{
  console.log('subscription a :', res); // subscription a : 0.91767565496093
});

obs.subscribe(res=>{
  console.log('subscription b :', res);// subscription b : 0.91767565496093
});

obs.next(Math.random());


https://stackoverflow.com/questions/47537934/what-is-the-difference-between-a-observable-and-a-subject-in-rxjs