RxJS Simplified (don't lose your marbles)
Tags: javascript, beginners, webdev, tutorial
Published: 2021-03-24 10:44:04

# What is RXJS
RXJS is a Javascript library for reactive programming. It provides a reactive way of working with your data through the use of Observables. In this post I'm going to explain this by using an analogy using marbles ( and I'll try not to lose them in the process ;) )

## Observables
Observables are the basis of RXJS, they are observable and this makes the code reactive, you react to changes in data. Well here goes the analogy:
An Observable is like a marbles machine it emits all marbles (data) it has, in order and one by one until it's empty.

```typescript
// from generates an Observable from an array
import { from } from "rxjs"

// create a machine with 4 marbles
const marbles = ['red', 'green', 'red', 'blue'];

// observe the machine
from(marbles).subscribe(
  (marble) => console.log(marble)
) 

// outputs:
// red - green - red - blue
```

## Subjects
In the example the Observable (marble machine) is created and subscribed (observed). The downside is that if the machine is empty there is no way to refill it and is only usefull for one observer. This is where RXJS Subjects come in. Subjects are a special type of Observable, they can share the emitted data over multiple observers and make it possible to emit data to all observers. In our analogy: The marble machine has a marble loader and all the marbles that come out will be cloned and given to all observers.

```typescript
import { Subject } from "rxjs"

//create an advanced marble machine
const marbleMachine = new Subject(); 

// Pete observes the machine
marbleMachine.subscribe(
  (marble) => console.log('Observer:Pete', marble)
)

// add a red marble
marbleMachine.next('red')

// Output:
// Observer:Pete, red 

// Anna observes the machine
marbleMachine.subscribe(
  (marble) => console.log('Observer:Anna', marble)
)

// add a green marble
marbleMachine.next('green')

// Output:
// Observer:Pete, green 
// Observer:Anna, green 
```

## Pipes/Operators
What if you want to count the number of red marbles the machine emits. Of course you could collect all marbles and count the red ones but it can be done better. What RXJS allows you to do is create a pipe from the Observable to an operator. In marbles language: you can connect pipes tot the machine to redirect all marbles to small machines (operators) that can do stuff. So if Pete wants to do something with the red marbles and Anna with the green ones you'll get the next example

```typescript
import { Subject } from "rxjs"
import { filter } from "rxjs/operators"

//create an advanced marble machine
const marbleMachine = new Subject(); 

// Pete adds a pipe to the machine to a small marble machine that
// only emits the red marbles and then observes that machine
marbleMachine.pipe(
  filter((marble) => marble === 'red')
).subscribe(
  (marble) => console.log('Observer:Pete', marble)
)

// Anna adds a pipe to the machine to a small marble machine that 
// only emits the green and red marbles and then observes that machine
marbleMachine.pipe(
  filter((marble) => marble === 'green' || marble === 'red')
).subscribe(
  (marble) => console.log('Observer:Anna', marble)
)

// feed the machine a yellow marble
marbleMachine.next('yellow');

// feed the machine a green marble
marbleMachine.next('green');

// output:
// Observer:Anna, green

// feed the machine a red marble
marbleMachine.next('red');

// output:
// Observer:Pete, red
// Observer:Anna, red
```

The operators generate a new Observable so you could pipe them to another operator etc. etc. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6gnfaxxyco7738ttnocs.jpg)


# What to do next
Play with it! Look at the operators available for RXJS and try to combine them an create useful Observables! Or go play with marbles, that's always fun ;)

# Why use RXJS
RXJS is a great way to get a grip on the data flow in your Javascript application. Personally I use it pretty much for every Javascript project, mostly in combination with Angular which itself also uses RXJS.

# I want more!
I'm planning on doing a follow-up, if this post is popular enough, using the marbles analogy for more advanced RXJS examples.