thinkrx

RxJS Playground

RxJS is a library for reactive programming using Observables, to make it easier to compose asynchronous or callback-based code


1
2
3
4
5
6
7
8
9
const { rxObserver } = require('api/v0.3');
const { timer } = require('rxjs');
const { take } = require('rxjs/operators');

timer(0, 5)
  .pipe(
    take(10)
  )
  .subscribe(rxObserver());
0msstartcomplete00 11 22 33 44 55 66 77 88 99

If you're just starting your RxJS journey — we'd advise you to start with these examples first:

  • timer — starts emitting values after given timeout with set interval
  • map — apply a function to each value on the stream
  • filter — filter only values matching predicate function
  • subscribe — basically tells the Observable that we're ready to receive values

If you are a seasoned Observer — do checkout these examples:

  • expand — recursively turns each emission into another stream
  • share — share subscription among multiple observers
  • catch — handle errors gracefully
  • dematerialize — pure magic

Also, be sure to know these differences:

And check out this experimental pipeline |> operator ⚠️

📖 My articles

"Error handling in RxJS" 😱
Learn how to deal with errors and retry failed requests

"Pausable Observables in RxJS" 🌊
Create a push back force in your streams

"Rx+JSX experiment: Recks" 🐶
<div>{ timer(0, 100) }</div> — Observables inside JSX

"RegExp syntax for Observables: Never Been Easier!" 📝
Use regexp-like syntax to query observables. EXPERIMENT

"RxJS debounce vs throttle vs audit vs sample" 🤔
Difference You Should Know

⚙️ API notes

In this playground we added both RxJS 6 and a compatibility rxjs-compat package, that allows you to write code in RxJS 6 or in RxJS 5 style
You can use them via require('rxjs') and require('rxjs/operators') or just require('rxjs/Rx') for rxjs-compat version.

To visualize observables we developed a small API:
Provided api/v0.3 package has a function rxObserver(title?: string): Observer, that creates an Rx Observer to display marbles on the diagram


1
2
3
4
5
6
7
8
9
10
11
const { rxObserver } = require('api/v0.3');

const observer = rxObserver('Thread name');

observer.next(0);

setTimeout(() => observer.next(1), 100);

setTimeout(() => observer.next(2), 200);

setTimeout(() => observer.complete(), 200);
0msThread namestartcomplete00 11 22

🔗 External links

  • rxjs.dev — official website for RxJS 6
  • learnrxjs.io — clear examples, explanations, and resources for rxjs
  • rxviz.com — animated playground for rx observables