Introduction to Reactive Programming with Rxjs

Introduction :

Hello guys, this is another blog for my “2020 blogging series challenge”, the topic this time is “Introduction to Reactive programming” I will present The Reactive programming concept , after we will discover the Rxjs library and some operators .

What is Reactive Programming

“Reactive Programming is a declarative programming paradigm concerned with data streams and the propagation of change.”

ReactiveX :

So to discover more the RX programming, you can visit ReactiveX,An API for asynchronous programming with observable streams

  • JavaScript: RxJS
  • Go: RxGo

Reactive Programming with Rxjs :

For our blog, we will practice RX with Rxjs one of the hottest libraries in web development today

What is Rxjs:

  • RxJS is a library used to create asynchronous programs using observable sequences.
  • RxJS is one of the key libraries each modern JavaScript developer should have in his kit
  • It is a functional and powerful tool integrated into a wide range of frameworks
  • RxJS makes it easy for JavaScript developers to write asynchronous code using composable Observables instead of callbacks and Promises.

Why use RxJS?

  • Large and responsive community: One of the largest benefits of this library is its diversified and large community. Thanks to having such a responsive community, RxJS grows even stronger and more popular. Participants of the community help each other to handle the problems and questions on StackOverflow and Gitter.
  • Error-handling strategies become complicated when you begin nesting try/catch blocks within each callback. RxJS provides an error-handling approach from a functional perspective.
  • RxJS provides an ideal and easy mechanism to cancel events cleanly after some predetermined amount of time. Implementing your cancellation mechanism can be very challenging and error-prone even with the help of third-party libraries.
  • Flexible to Use
  • RxJS can easily be used with other Javascript libraries and frameworks such as Angular, ReactJS, Vue.js, Nodejs, etc. It is supported by JavaScript and also with TypeScript.
  • Provides good optimization and memory leaks protection

Rxjs Installation :

Now you can install rxjs using the below command :

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

Rxjs Operators :

There are a lot of operators provided by Rxjs that covered many features and needs in our applications:

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 :

For Conclusion, I just tried to share my experience trying to learn rxjs and practice its cool operators and the use cases of them, and tips for you guys if you want to learn something practice it and try to implement it in production in your project that you are working for, don’t fear

--

--

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