Overview of ReactiveX (RxJS)

ReactiveX is a polyglot library allowing you to to create asynchronous & event-based programs by using a collective called Observable.

In order for you to have a better grasp of Observables, you should be familiar with the Observer pattern.

The Observer pattern is a design pattern in which an object, called “subject”, keeps track of its observers that are subscribed to it. When the subject updates, it then notifies the observers of any state changes.

What ReactiveX adds on to the Observer pattern is as follows:

  • The Observable will call its observer’s onCompleted() method when the Observable has no more information to emit.
  • The Observable will call its observer’s onError() method which you can use to error handle specific sections of your asynchronous event handling.

Observables

With Observables you can invoke methods on asynchronous events. These methods are similar to operations performed on arrays and objects. What this also means is that terrible nested callbacks (AKA callback hell) are avoided!

How does an Observable keep track of its observers?

In order for an Observable to keep track of its observers is by making the observer subscribe() to the Observable. Once subscribed, you can use methods on the observer to act on the emitted values.

For example (in Angular):

@Component({
selector: 'observable-practice',
template: 'observable-practice.html'
})
export class myApp {
private data: Observable<Array<number>>;
private values: Array<number> = [];
private anyErrors: boolean;
private finished: boolean;
  constructor() {}
  init() {
this.data = new Observable(observer => {
setTimeout(() => {
observer.next(42);
}, 1000);
      setTimeout(() => {
observer.next(43);
}, 2000);
      setTimeout(() => {
observer.complete();
}, 3000);
});
    let subscription = this.data.subscribe(
value => this.values.push(value),
error => this.anyErrors = true,
() => this.finished = true
);
}
}

The next() method on the observer pushes onto the Observable array and updates any observer that is subscribed (in this case it’s subscription). Once you know you will be finished you pass the complete() method to notify all observers that the Observable has finished emitting values. This syntax is almost identical when using Subjects (explained below) as well.

Subjects

Subjects are a little different than Observables. These guys are both an Observable and an observer. This makes them suitable for both output and input. To explain Subjects and Observables in a different way, you can use the terms “hot” and “cold”.

  • Hot Observables — These active Observables emit information regardless of the number of subscribers. The hot Observable’s observer subscribes to the hot Observable itself. When an outside observer subscribes to this hot Observable, it will only receive the information emitted after the subscription.
  • Cold Observables — These passive Observables only emit information when an observer is subscribed to it. The observer will not receive any changes made to the Observable before the observer’s subscription.

TL;DR Observables require a subscription before emitting information to the observer. Subjects do not require a subscriber to emit and will provide the observer with the changes made prior to subscribing, plus any changes thereafter.