Introduction to Reactive Programming with Rxjs

Introduction :

What is Reactive Programming

ReactiveX :

Reactive Programming with Rxjs :

What is Rxjs:

Why use RxJS?

Rxjs Installation :

npm install — -save-dev rxjs
import { Observable, Subscriber } from ‘rxjs’;
import { tap, map, filter } from ‘rxjs/operators’;

Rxjs Operators :

const namesObseravble = of('Ahmed', 'Rebai');namesObseravble.pipe(map((name) => `${name} is awesome !`)).subscribe((result) => console.log(`${result}`));
const dataPipeline = arrayDataObservable$.pipe(
tap(val => console.log(‘Value passing through the stream: ‘ + val)),
filter(val => val > 2),
map(val => val * 2)
)
searchBook() {
this.bookId.valueChanges.pipe(
switchMap(id => {
console.log(id);
return this.bookService.getBook(id);
})
).subscribe(res => this.book = res);
}
export class AppComponent {
loadedCharacter: {};
constructor(private http: HttpClient) {}

ngOnInit() {
let character = this.http.get('https://swapi.dev/api/people/1/');
let characterHomeworld = this.http.get('http://swapi.dev/api/planets/1/');

forkJoin([character, characterHomeworld]).subscribe(results => {
// results[0] is our character
// results[1] is our character homeworld
results[0].homeworld = results[1];
this.loadedCharacter = results[0];
});
}
}
const mySubject = new Rx.Subject();

mySubject.next(1);

const subscription1 = mySubject.subscribe(x => {
console.log('From subscription 1:', x);
});

mySubject.next(2);

const subscription2 = mySubject.subscribe(x => {
console.log('From subscription 2:', x);
});

mySubject.next(3);

subscription1.unsubscribe();

mySubject.next(4);
var input = document.querySelector('input');
var observable = Rx.Observable.fromEvent(input, 'input');
observable
.pluck('target', 'value')
.debounceTime(500)
.distinctUntilChanged()
.subscribe({
next: function(value) {
console.log(value);
}
});

Conclusion :

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store