RxJS 7 - Getting Started
Tags: rxjs, javascript, webdev, angular
Published: 2023-03-06 20:15:49

_Here are my detailed notes from the fantastic course created by Jurek Wozniak, called [RxJS 7 and Observables: Introduction](https://www.udemy.com/course/rxjs-and-observables/)._

_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

```tsx
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

```tsx
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

```tsx
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

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

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

```tsx
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)

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

And the modern version the observable object

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

The whole code:

```tsx
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 ](https://dev.to/barisbll/rxjs-7-observables-2kc)

## 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