RXJS - Tutorial with examples

el

 

RXJS

       With

    Examples

 

 

A litle of Context

What is Rxjs ?

RxJS is 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 methods (map, filter, reduce, every, etc) to allow handling asynchronous events as collections.

Think of RxJS as Lodash for events.

ReactiveX combines the Observer pattern with the Iterator pattern and functional programming with collections to fill the need for an ideal way of managing sequences of events.

The essential concepts in RxJS which solve async event management are:

  • Observable: represents the idea of an invokable collection of future values or events.
  • Observer: is a collection of callbacks that knows how to listen to values delivered by the Observable.
  • Subscription: represents the execution of an Observable, is primarily useful for cancelling the execution.
  • Operators: are pure functions that enable a functional programming style of dealing with collections with operations like map, filter, concat, reduce, etc.
  • Subject: is equivalent to an EventEmitter, and the only way of multicasting a value or event to multiple Observers.
  • Schedulers: are centralized dispatchers to control concurrency, allowing us to coordinate when computation happens on e.g. setTimeout or requestAnimationFrame or others.

 

Observables are lazy Push collections of multiple values. 

import { Observable } from 'rxjs';

const observable = new Observable((subscriber) => {
subscriber.next(1);
subscriber.next(2);
subscriber.next(3);
setTimeout(() => {
subscriber.next(4);
subscriber.complete();
}, 1000);
});
 
Observer


What is an Observer? An Observer is a consumer of 
values delivered by an Observable. Observers are simply a set of 
callbacks, one for each type of notification delivered by the 
Observable: next, error, and complete. The following is an example of a typical Observer object:
 
const observer = {
  next: x => console.log('Observer got a next value: ' + x),
  error: err => console.error('Observer got an error: ' + err),
  complete: () => console.log('Observer got a complete notification'),
};
 
 
Operadores  en Rxjs son funciones que nos permiten manipular y transformar flujos de datos observables estos operadores pueden ser:

  • map 
  • filter 
  • reduce
  • merge
  • concat, etc
Utilizando el método pipe nos permite encadenas diferentes funciones, donde al aplicarlos nos retorna un nuevo observable.
 
 
(*)Reference:
https://rxjs.dev/guide/observable 
https://www.javatpoint.com/typescript-operators
















































Comentarios











Publicar un comentario