Wanted to share some thoughts and understanding on Observable & rxjs in a series of posts.

This posts talks about creating custom observable using rxjs library.

To get some background on Reactive programming, below is the quick link

ReactiveX

Quick link for wiki page

So Let’s start with Observables using rxjs.

Observables seem complicated in first glance and not so easy going..

I would say that it is most interesting concept..

I’m sure you might have come across a wall/outlet , where in the stream of water rushing out of it in a very uncontrolled way, yes !

Can you see the source (stream of water) coming out of that hole ?

Just few points about that

  1. The flow of water stream is function of time.
  2. With time the stream of flow may change.
  3. It may be controlled with the help of some mechanism like one below (tap)

To access the controlled water stream one has to turn the above mechanism or tool in a right direction.

Similarly assume that the data stream is flowing and you want to put some kind of wrapper around that flow so that you can receive the data sequence in a controlled way whenever you want.

The wrapper around the stream of data / data sequence can be thought of as an observable which can invoked in future point of time.

Invoking an observable is called as subscribing to it here.

Observables are the one who emit the event & spit the data out

Observers are the one who subscribe to observable , react to event , capture the data.

Unless and until you turn the tap on you can’t access the controlled water flow.

Similarly until and unless you subscribe to an observable you cannot access the data.

How to create a custom Observable ( invokable wrapper for your stream of data) in rxjs?

Observable.create(callback)”

The observables may emit the following event(s)

next” : Emit & notify about the event along with the next set of data

error” : Emit an error and notify subscriber that error occurred

complete”: Stop the flow of data stream flow

How to subscribe to an Observable ?

We use “subscribe” function to subscribe to an Observable.

Remember unless and until you subscribe to an observable , it does not execute the values, which means Observable(s) are lazy

The subscribe function takes the function as input parameter to react to the events emitted by observable.

The data emitted by the next is handled by the specified callback arrow function and is captured in “d” variable and we are logging the same to console.

Look at the working example in codepen.

You may complete the observable by emitting the “complete” function .

Line #5 we are saying observer.complete() in other words, the subscriber cannot access the data emitted in line #6.

Assume that in the stream of water flow example , we fitted/attached the water tap to access or control the water stream , so you now switched off the water tap , no water can come out , you are closing the stream there itself.

Till now we saw only 1 subscriber to an observable.

What if we have multiple subscribers to an observable ?

What are the real use case scenarios for those ?

Let’s discuss in next post!

Thanks for your patience & time !

Fullstack developer