Unlock Reactive JavaScript: A Beginner’s Guide to RxJS Fundamentals

RXJS Overview

RxJS stands for Reactive Extensions for JavaScript, derived from Reactive Extensions. It is a library that combines observable streams with the observer and iterator patterns for asynchronous programming in JavaScript.

Prerequisite Knowledge

Reactive Programming

Reactive Programming is an event‑based model that focuses on data streams and change propagation. It allows expressions such as a = b + c to automatically update when b or c change, unlike imperative programming where the result is fixed after calculation.

In reactive programming you can create data streams from any source—click, hover, variables, caches, etc.—and treat them as streams that can be filtered, transformed, and combined.

Stream

A stream is a time‑ordered collection of ongoing events. Operations on a stream return a new immutable stream.

Observer Pattern

The observer pattern separates observers from the subject; when the subject’s state changes it notifies all registered observers. This pattern underlies event‑handling systems and is used by frameworks such as Vue for data‑view binding.

Iterator Pattern

The iterator pattern provides a uniform way to sequentially access elements of a collection without exposing its internal structure. In JavaScript, arrays, objects, Map, Set, and NodeList are common collections, and ES6 introduced a built‑in iterator protocol.

Core Concepts

Observable

An Observable represents a collection of future values or events that can be subscribed to by multiple independent observers. Example:

const Rx = require('rxjs/Rx');
const newObservable = Rx.Observable.create(observer => {
  observer.next('message1');
});

The function passed to Observable.create is called the producer and receives an observer whose next method emits values.

Observer

An Observer is an object containing callback functions ( next, error, complete) that react to values emitted by an Observable. Example:

const observer = {
  next: function(value) { console.log(value); },
  error: function(error) { console.log(error); },
  complete: function() { console.log('complete'); }
};

Subscription

A Subscription represents the execution of an Observable. Calling unsubscribe() on the subscription stops the Observable and releases resources.

const myObservable = Rx.Observable.create(observer => {
  observer.next('foo');
  setTimeout(() => observer.next('bar'), 1000);
});
const subscription = myObservable.subscribe(x => console.log(x));

subscription.unsubscribe();

Subject

A Subject acts as both an Observable and an Observer, allowing multicasting to multiple observers. Unlike a plain Observable, which is unicast (each subscription gets its own execution), a Subject can broadcast the same data to all subscribed observers.

References

RxJS—Give you a silky smooth programming experience

RxJS Chinese Documentation