Notes about reactive programming — RxJS6*

Ndamulelo Nemakhavhani

Mar 27, 2019·2 min read

• This is a copy of the notes I took for myself, when I started learning about RxJs, I hope someone finds them useful.

Types of observables

1. ‘Unicast’ observables
2. Subject(multi-cast observable)
3. Behavior subject
4. Replay subject

etc. <Only the most common types listed>

• To start using reactive programming, install the rxjs library as follows:

$ npm install rxjs

Alternatively, include the rxjs scripts in your index.html

<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"></script>

• It is also worth noting that in Angular 6.* the library is installed by default.

What is an observable?

• Simply put, an observable represents a stream of data that can be invoked or used asynchronously.
• The data is then consumed by subscribing (observing) to the observable. This operation returns a Subscription.
• An observable can emit values even before observers subscribe to it .i.e. It is a Hot observale. Cold observables only emit values when ‘someone’’ starts observing their values.
• Behavior and Replay subjects are used to re-emit values to observers in case they are ‘late’ to start subscribing.

Working with observables — Code snippets

• Below are some of the common use cases of observables:

1. Create and subscribe to observable

import { Observable } from 'rxjs'
import { of } from 'rxjs/operators'.....
const futureVal$ = of([1,2,3]);   // creates an observable from list// configure observer object
let observer = {
     next : ( item ) => console.log(val)
     error : (err) => console.error(err)
     complete : () => console.log('done, bye!')
}// Next, subscribe to futureVal$ Observable// Return instance of Subscription
const subscription_1 = futureVal$.subscribe(observer)

• The code above, will print: 1,2,3 sequentially on the console
• More examples can be found here.

2. Pre-processing observable using operators

• It is also possible to manipulate the data returned by observables using rxjs operators.

.................const subscription_1 = futureVal$            . map(item => item * 10)  // multiply each val by 10            .filter( item => item >= 20) // return only values >= 20
           .subscribe(observer)// Result: 20,30.....................

3. Working with multi-cast observables

• The following example from leanrxjs.io shows one way to use multi-casting to allow multiple observers on an obsevable:

`// RxJS v6+
import { Subject, interval } from 'rxjs';
import { take, tap, multicast, mapTo } from 'rxjs/operators';//emit every 2 seconds, take 5
const source = interval(2000).pipe(take(5));const example = source.pipe(
  //since we are multicasting below, side effects will be executed once
  tap(() => console.log('Side Effect #1')),
  mapTo('Result!')
);//subscribe subject to source upon connect()
const multi = example.pipe(multicast(() => new Subject()));
/*
  subscribers will share source
  output:
  "Side Effect #1"
  "Result!"
  "Result!"
  ...
*/
const subscriberOne = multi.subscribe(val => console.log(val));
const subscriberTwo = multi.subscribe(val => console.log(val));
//subscribe subject to source
multi.connect();

• Read more about observables HERE.
• Remember: Practice makes perfect!