RxJS 7 - Getting Started

Here are my detailed notes from the fantastic course created by Jurek Wozniak, called RxJS 7 and Observables: Introduction.

In order to understand the concept please consider buying the course yourself, these notes are simply subsidiaries

Note: This is the first article of a series of articles

Getting Started

Quick Start

Observables are like data or event generators with logic stored inside.

The data they generate can have various of sources like array of values, dom events, timers etc.

Anything you want can turned to be an observable

Let’s say we have an observable, now we need to start executing somehow to generate the data.

Coding Example

Observables are having $ sign at the end of their name as the naming practice, this way we can easily identify which variable is actually observable

First let’s see the functions we will use.

external.ts

import { Observable, of } from "rxjs";

export const name$ = of('Alice', 'Ben', 'Charlie');

export function storeDataOnServer(data: string): Observable<string> {
  return new Observable(subscriber => {
    setTimeout(() => {
      subscriber.next(`Saved successfully: ${data}`);
      subscriber.complete();
    }, 5000);
  });
}

export function storeDataOnServerError(data: string): Observable<string> {
  return new Observable(subscriber => {
    setTimeout(() => {
      subscriber.error(new Error('Failure!'));
    }, 5000);
  });
}

We can think observable like a function, when we call it, it emits some values.

index.ts

import { name$, storeDataOnServer, storeDataOnServerError } from './external';

name$.subscribe();

Here it probably emitted some data but because of we don’t have a handler we couldn’t catch it

import { name$, storeDataOnServer, storeDataOnServerError } from './external';

name$.subscribe((value) => console.log(value));

// Mike
// Brandon
// Alice

We can for example write a function that simulates data fetch from a remote server

storeDataOnServer('Some value').subscribe((value) => console.log(value));

We also have a version that acts like we are throwing an error

storeDataOnServerError('Some value').subscribe((value) => console.log(value));

This will fail our javascript since we didn’t handle the error .

For error handling in observables we have 2 versions

First the deprecated version (still a lot of projects written like this)

storeDataOnServerError('Some value').subscribe(
   (value) => console.log(value),
   (err) => console.log('Error when saving:', err.message)
 );

And the modern version the observable object

storeDataOnServerError('Some value').subscribe({
  next: (value) => console.log(value),
  error: (err) => console.log('Error when saving:', err.message),
});

The whole code:

import { name$, storeDataOnServer, storeDataOnServerError } from './external';

// name$.subscribe((value) => console.log(value));

// storeDataOnServer('Some value').subscribe((value) => console.log(value));
// storeDataOnServerError('Some value').subscribe((value) => console.log(value));

// storeDataOnServerError('Some value').subscribe(
//   (value) => console.log(value),
//   (err) => console.log('Error when saving:', err.message)
// );

storeDataOnServerError('Some value').subscribe({
  next: (value) => console.log(value),
  error: (err) => console.log('Error when saving:', err.message),
});

What Next?

This is the first article of a series of articles I write about RxJS. Do not stop here! Continue reading.
See the second article

Let's keep in touch

Hey, thanks a lot if you read it so far.
I want you to keep in touch for more sweet content.
Please subscibe in Dev.to and other channels (🦸‍♂️ especially twitter)

Twitter 🐦 https://twitter.com/barisbll_dev
Linkedin 📎 https://www.linkedin.com/in/barisbll-dev/
Github 👨🏻‍💻 https://github.com/barisbll
Medium 📰 https://medium.com/@barisbll