ReactiveX

For sequences of data, it combines the advantages of iterators with the flexibility of event-based asynchronous programming. It also works as a simple promise, eliminating the pyramid of doom that results from multiple layers of callbacks.

ReactiveX is a combination of ideas from the observer and the iterator patterns and from functional programming.[2]

An observer subscribes to an observable sequence. The sequence then sends the items to the observer one at a time, usually by calling the provided callback function. The observer handles each one before processing the next one. If many events come in asynchronously, they must be stored in a queue or dropped. In ReactiveX, an observer will never be called with an item out of order or (in a multi-threaded context) called before the callback has returned for the previous item. Asynchronous calls remain asynchronous and may be handled by returning an observable.

It is similar to the iterators pattern in that if a fatal error occurs, it notifies the observer separately (by calling a second function). When all the items have been sent, it completes (and notifies the observer by calling a third function). The Reactive Extensions API also borrows many of its operators from iterator operators in other programming languages.

Reactive Extensions is different from functional reactive programming as the Introduction to Reactive Extensions explains:

It is sometimes called "functional reactive programming" but this is a misnomer. ReactiveX may be functional, and it may be reactive, but "functional reactive programming" is a different animal. One main point of difference is that functional reactive programming operates on values that change continuously over time, while ReactiveX operates on discrete values that are emitted over time. (See Conal Elliott's work for more-precise information on functional reactive programming.)[2]

An operator is a function that takes one observable (the source) as its first argument and returns another observable (the destination, or outer observable). Then for every item that the source observable emits, it will apply a function to that item, and then emit it on the destination Observable. It can even emit another Observable on the destination observable. This is called an inner observable.

An operator that emits inner observables can be followed by another operator that in some way combines the items emitted by all the inner observables and emits the item on its outer observable. Examples include:

• switchAll – subscribes to each new inner observable as soon as it is emitted and unsubscribes from the previous one.
• mergeAll – subscribes to all inner observables as they are emitted and outputs their values in whatever order it receives them.
• concatAll – subscribes to each inner observable in order and waits for it to complete before subscribing to the next observable.

Operators can be chained together to create complex data flows that filter events based on certain criteria. Multiple operators can be applied to the same observable.

Some of the operators that can be used in Reactive Extensions may be familiar to programmers who use functional programming language, such as map, reduce, group, and zip.[3] There are many other operators available in Reactive Extensions, though the operators available in a particular implementation for a programming language may vary.

Here is an example of using the map and reduce operators. We create an observable from a list of numbers. The map operator will then multiply each number by two and return an observable. The reduce operator will then sum up all the numbers provided to it (the value of 0 is the starting point). Calling subscribe will register an observer that will observe the values from the observable produced by the chain of operators. With the subscribe method, we are able to pass in an error-handling function, called whenever an error is emitted in the observable, and a completion function when the observable has finished emitting items.

import { of, Observable, map, reduce } from 'rxjs';

const source: Observable<number> = of(1, 2, 3, 4, 5);
source
  .pipe(
    map((value) => value * 2),
    reduce((sum, value) => sum + value, 0)
  )
  .subscribe({
    next: (value) => {
      console.log(value);
    },
    error: (error) => {
      console.error(error);
    },
    complete: () => {
      console.log('done');
    },
  });

The above example uses the RxJS implementation of Reactive Extensions for the JavaScript programming language.