Rxjs Intro

 

Rxjs (reactive extension for javascript)

It is defined as a library for composing asynchronous and event-based programs by using observable sequences. It provides one core type, the Observable, satellite types (Observer, Schedulers, Subjects) and operators inspired by Array#extras (map, filter, reduce, every, etc.) to allow handling asynchronous events as collections.

Reactive programming 
https://en.wikipedia.org/wiki/Reactive_programming  (Wiki reference)

 

Features of rxjs :

1)Observable : An observable is basically a function. It creates the observer. The observer attaches itself with the source (Mouse click)

2)Observer : It is an object with next(), error() and complete() methods, that will get called when there is interaction to the with the observable i.e. the source interacts for an example button click, Http request, etc.

3)Subscription : When the observable is created, to execute the observable we need to subscribe to it. It can also be used to cancel the execution.

4)Subject

A subject is an observable that can multicast i.e. talk to many observers. Consider a button with an event listener, the function attached to the event using add-listener is called every time the user clicks on the button similar functionality goes for subject too.

When to use observable  ?
When we have a lot of async task to perform then we can use observable

Advantages of rxjs 

We can perform a lot of async tasks with rxjs. It works with reactive programming. It can be used with other js library and frameworks (Angular , react , vueJs nodeJs)

 

Disadvantages of observable

1)To debug the code with observable is slight difficult

2)We need to wrap whole code inside the observable function

It has a large number of operators. 

1)Rxjs is an external library that is used for reactive programming

http://reactivex.io/

2)We can use it in non angular projects also.

 

official website

https://rxjs.dev/guide/installation

 

Observables get introduced in rxjs. Observable work on the data stream. 

Observable observes the emitted data. To get those data we need to subscribe through it.  So once we subscribe the observable we got the data instantly

In observables the data gets emitted . So we can handle it by using the filter also

Filter , Of , From ,  toArray ,  Take

 

What is observable and subscribe 

To use observables we need to subscribe to it. Once we create the observable , it does not work until we subscribe through it. 

Marble Diagram

Marble diagram of all the operators found in rxjs

https://rxmarbles.com/ (merge ,map example)

 

Basic Examples

a)Example 1 :

import {of} from ‘rxjs’;

console.log(“Hello rxjs !”);

 

b)Example 2:

import { of, from, Observable } from “rxjs”;

import { mapTo, take, tap, map, max } from “rxjs/operators”;

import { Subject } from “rxjs”;

console.log(“Hello rxjs !”);

var MyObservable = new Observable(function (observer) {

 setTimeout(() => {

   observer.next(700);

 }, 2000);

 

 setTimeout(() => {

   observer.next(100);

 }, 4000);

});

MyObservable.subscribe(x => console.log(x));

 

c)Example 3 :

Complete

import { Observable } from “rxjs”;

var obj = new Observable(function (observer) {

 observer.next(“Cricket”);

 observer.next(“Tennis”);

 observer.next(“football”);

 observer.complete();

});

obj.subscribe(

 (evt) => {

   console.log(“The data is “, evt);

 },

 (err) => {

   console.log(“The error is “, err);

 },

 () => {

   console.log(“The completed!”);

 }

);

 

Operators are an important part of RxJS. 

An operator is a pure function that takes in observables as input and the output is also an observable.

 

To work with operators we need a pipe() method.

import { of } from ‘rxjs’;

import { map, reduce, filter } from ‘rxjs/operators’;

 

let test1 = of(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);

let case1 = test1.pipe(

  filter(x => x % 2 === 0),

  reduce((acc, one) => acc + one, 0)

);

case1.subscribe(x => console.log(x));

 

Site Footer