The Complete Guide to RxJS
The Complete Guide to RxJS: A to Z
Complete RxJS Guide: From A to Z
RxJS (Reactive Extensions for JavaScript) is a powerful library that allows working with asynchronous streams in a functional programming style. It is primarily used to control and transform data streams through Observables.
RxJS is widely used in Angular but is also useful in Vanilla JS, React, or any JavaScript application when dealing with asynchronous data (e.g., WebSocket, HTTP requests, UI events).
A. Observable — Data Stream
Observable – The foundation of RxJS. It is an object that represents an asynchronous data stream. You can "subscribe" to this stream and receive the changing data.
import { Observable } from 'rxjs';
const observable = new Observable(subscriber => {
subscriber.next('Hello');
subscriber.next('RxJS');
subscriber.complete();
});
observable.subscribe({
next(value) { console.log(value); },
complete() { console.log('Done'); }
});
next()– sends datacomplete()– completes the stream
B. Observer — The Subscriber
Observer – an object with next, error, and complete methods. You pass it to subscribe() to receive values from an Observable.
const observer = { next: x => console.log('Got value:', x), error: err => console.error('Error:', err), complete: () => console.log('Completed') };
observable.subscribe(observer);
C. Operators — Operators
The most powerful elements in RxJS are **operators**. These are functions that take an Observable and return a new one. Examples: map, filter, mergeMap, switchMap, debounceTime, take, and more.
import { of } from 'rxjs'; import { map, filter } from 'rxjs/operators';
of(1, 2, 3, 4, 5)
.pipe(
filter(x => x % 2 === 0),
map(x => x * 10)
)
.subscribe(console.log);
Result: 20, 40
D. Subject — Observable + Observer
Subject is both an Observable and an Observer. You can call next() on it, and it will pass the value to all subscribers.
import { Subject } from 'rxjs';
const subject = new Subject();
subject.subscribe(x => console.log('First:', x));
subject.subscribe(x => console.log('Second:', x));
subject.next('Hello Subjects!');
Both subscribers will receive the same value:
E. BehaviorSubject — Stores the last value
import { BehaviorSubject } from 'rxjs';
const behavior = new BehaviorSubject('Initial');
behavior.subscribe(val => console.log('A:', val));
behavior.next('Next Value');
behavior.subscribe(val => console.log('B:', val));
The second subscriber will also receive the latest value:
F. ReplaySubject — Keeps previous values
import { ReplaySubject } from 'rxjs';
const replay = new ReplaySubject(2); // stores the last 2 values
replay.next(1);
replay.next(2);
replay.next(3);
replay.subscribe(val => console.log('Subscriber got:', val));
Will receive: 2 and 3
G. switchMap, mergeMap, concatMap
Used for nested Observables (e.g., HTTP requests):
- switchMap – cancels the previous stream and starts a new one
- mergeMap – merges all streams
- concatMap – executes streams sequentially
import { fromEvent, switchMap, interval } from 'rxjs';
fromEvent(document, 'click')
.pipe(
switchMap(() => interval(1000))
)
.subscribe(console.log);
Only the stream started after the last click will emit values:
H. debounceTime and throttleTime
Used to regulate input typing or rapid events.
import { fromEvent } from 'rxjs'; import { debounceTime, map } from 'rxjs/operators';
fromEvent(inputElement, 'input')
.pipe(
debounceTime(300),
map(e => e.target.value)
)
.subscribe(console.log);
Waits 300ms before processing the last input:
I. Error Handling — catchError
import { of, throwError } from 'rxjs'; import { catchError } from 'rxjs/operators';
throwError(() => new Error('Oops'))
.pipe(
catchError(err => {
console.error('Caught:', err.message);
return of('Fallback value');
})
)
.subscribe(console.log);
J. Finalize — When the Observable completes
import { of } from 'rxjs'; import { finalize } from 'rxjs/operators';
of(1, 2, 3)
.pipe(finalize(() => console.log('Finished')))
.subscribe(console.log);
K. Custom Operator
You can write your own operator using the `pipe` and `lift` methods or simply a higher-order function that returns an Observable.
- 0
- 5