RxJS Fundamentals— Part 1

A Very Short Introduction to Reactive Programming with RxJS and TypeScript

Photo by Kelly Sikkema on Unsplash
  • An observer function runs blocks of code to respond to changes to the observable’s state. Think of it as an object that monitors a stream.
  • A subscription connects an observer to an observable.

Getting Started

Before you continue, please install Node and VS Code if you haven’t got these already.

  • Navigate to where you keep code projects
  • create a new folder called rxjs-tutorial
npm init
npm i --save-dev rxjs
npm i --save-dev typescript
npm i --save-dev ts-node
touch test.ts
code .
console.log(‘ok’);
npx ts-node test.ts

Creating an Observable

Let’s create an observable, subscribe to that observable, and print the output to the console.

npm i uuid --save-dev
import { Observable } from ‘rxjs’;
import { v4 as uuidv4 } from 'uuid';
class Order {
Id: string;
constructor() {
this.Id = uuidv4();
}
}
const orders = new Observable<Order>(order => {
order.next(new Order());
order.next(new Order());
setTimeout(() => {
order.next(new Order());
}, 1000);
});
orders.subscribe(order => console.log(order.Id));
efb16e3e-2433–4dd1–93e4–51432abca000
050158d0-d1c4–42b7–9d60–1d56d582c56a
a3795947–279e-4adb-8016–2d40c73d0ada
const orders = new Observable<Order>(order => {
order.next(new Order());
order.next(new Order());
setTimeout(() => {
order.next(new Order());
}, 1000);
order.complete();
});

Handling Errors and Completion

Here’s how to recognise when exceptions come from the observable, as well as how to acknowledge when the stream of data has finished.

orders.subscribe({
next(order) {
console.log(order.Id);
},
error (err) {
console.error(`Error: ${err}`);
},
complete() {
console.log(‘All orders processed’);
}
});
const orders = new Observable<Order>(order => {
order.next(new Order());
order.next(new Order());
order.next(new Order());
order.complete();
});
67ee824c-fb15–460f-852e-9752c763cd54
16a49693–4210–480d-b82f-33078825cbdc
9c8ee331–7e2f-450e-b72d-fe794cda2935
All orders processed
const orders = new Observable<Order>(order => {
order.next(new Order());
order.next(new Order());
order.error(‘bad order’);
order.complete();
});
bd1e62e2-fb36-4386-8e21-3b9945dc2432
3feedab8-6986-4e90-bbe5-2218be04e0f3
Error: bad order

Unsubscribing

Tired of waiting around? Here’s how to unsubscribe from an observable.

const ordersSubscription = orders.subscribe({
next(order) {
console.log(order.Id);
}
});
const orders = new Observable<Order>(order => {
order.next(new Order());
order.next(new Order());

setTimeout(() => {
order.next(new Order());
}, 2000);
});
setTimeout(() => {
if (ordersSubscription) {
ordersSubscription.unsubscribe();
}
}, 1000);
432ff5db-8e82–4b82–9f45-c8f3ad28d1b1
1ce05ae5–6f43–4374-a05b-8f29576249af
cce3f1c7–01fb-4407–8e19–293e8cdc3be3
f112413b-8ecf-4a39–9cd5–23b96f0b40c3
c0a6a590-b64e-4c77-a38f-1cadd0a758d5
unsubscribed

George is a software engineer, author, blogger, and tech enthusiast who believes in helping others to make us happier and healthier.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store