Although RxJS has its roots as an Observable, its operators are the most useful. Operators are basic code units that allow complex asynchronous code to be easily combined in a declarative manner.

What is an operator?

Operators are methods of type Observable, such as.map(…). And the filter (…). And the merge (…). , and so on. When operators are called, they do not change existing Observable instances. Instead, they return a new Observable whose Subscription logic is based on the first Observable.

Operators are functions that create a new Observable based on the current Observable. This is a side effect free operation: the front Observable remains the same.

The operator is essentially a pure function that takes an Observable as input and generates a new Observable as output. Subscribing to the output Observable also subscribes to the input Observable. In the following example, we create a custom operator function that multiplys each value received from the input Observable by 10:

function multiplyByTen(input) {
  var output = Rx.Observable.create(function subscribe(observer) {
    input.subscribe({
      next: (v) = > observer.next(10 * v),
      error: (err) = > observer.error(err),
      complete: () = > observer.complete()
    });
  });
  return output;
}

var input = Rx.Observable.from([1.2.3.4]);
var output = multiplyByTen(input);
output.subscribe(x= > console.log(x));
Copy the code

Output: 10, 20, 30, 40

Note that subscribing to output causes the Input Observable to be subscribed. We call this the operator subscription chain.

Instance operators vs. static operators

What is an instance operator? – When referring to operators, we usually refer to the instance operator, which is a method on an Observable instance. For example, if multiplyByTen above were the officially provided instance operator, it would look something like this:

Rx.Observable.prototype.multiplyByTen = function multiplyByTen() {
  var input = this;
  return Rx.Observable.create(function subscribe(observer) {
    input.subscribe({
      next: (v) = > observer.next(10 * v),
      error: (err) = > observer.error(err),
      complete: () = > observer.complete()
    });
  });
}
Copy the code

Instance operators are functions that use the this keyword to refer to the input Observable.

Note that the Input Observable is no longer a function parameter; it is now this object. Here’s how we use such an instance operator:

var observable = Rx.Observable.from([1, 2, 3, 4]).multiplyByTen();

observable.subscribe(x => console.log(x)); What are static operators? – In addition to instance operators, there are static operators that attach directly to the Observable class. The static operator does not use the this keyword internally, but relies entirely on its arguments.

Static operators are pure functions attached to the Observalbe class, usually used to create Observalbe from scratch.

The most common type of static operator is the so-called create operator. Instead of converting an input Observable into an output Observable, they take only non-Observable parameters, such as numbers, and create a new Observable.

A typical example of a static operator is the interval function. It takes a number (non-Observable) as an argument and produces an Observable as output:

Var Observable = rx.observable. Interval (1000 /* milliseconds */);

Another example of the create operator is create, which has been used extensively in previous examples. Click here for a list of all static operators.

However, some static operators may differ from simple creation. Some combinatorial operators may be static, such as merge, combineLatest, concat, and so on. These make sense as static operators because they take multiple Observables as input, not just one, for example:

var observable1 = Rx.Observable.interval(1000);
var observable2 = Rx.Observable.interval(400);
var merged = Rx.Observable.merge(observable1, observable2);
Copy the code

Operator reference manual