Understanding Observables, Observers, And Subscription in RxJS

Introduction RxJS

Let's start with the fundamentals of RxJS. RxJS is a reactive programming framework that makes use of Observables, making it relatively simple to write asynchronous programs. According to the official documentation, this project is a highly reactive addition to JavaScript with improved speed, modularity, and debuggable decision stacks, while remaining primarily backward compatible, with some breaking changes that reduce the API surface.

Understanding Observables

To observe Observables, you must first comprehend the pull and push context.

A pull system is, at its core, an operation. A function is sometimes initially sketched (a method known as production) so that somewhere along the way (this process is known as consuming) the information or worth inside the function may be found. For functions, the producer (which is the definition) has no idea when the data is going to be consumed, thus the call just pulls the return value or data from the producer.

In a push system, on the other hand, management is in the hands of the producer, and the customer does not know when the information can be provided to it. In JavaScript, for example, promises (producers) push previously resolved value to call-backs (consumers).

Understanding Stream

A stream is just a series of information prices across time. This can range from a simple increment of integers written in six seconds (0,1,2,3,4,5) to coordinates printed over time, and even the information value of inputs in a very kind of chat text that can net sockets or API replies. These are all data values that may be accumulated over time.

Let deep dive into Observables

Streams are important to understand since they are expedited by RxJS evidence. Associate evident is simply a time-dependent operation that returns a stream of values to an observer. This can be done either synchronously or asynchronously. The knowledge values obtained can range from zero to an unlimited number of values.

Understanding of Observers and Subscriptions

Observers and Subscriptions are both necessary for observable to function. The observable is a knowledge supply wrapper, and the observer then performs certain statements if there is a replacement value or a change in the data values. The observer who executes the subscription is linked to the observable. The observer connects to the observable using the subscribe method to run a block of code. An observable instance passes through the four phases of its life cycle with the aid of observers and subscriptions: construct, subscribe, execute, and destroy.

Let's make an Observable now.

To begin, build an angular application and open it in VS Code or another editor.

Once you've created an Angular application, import Observable from RxJS into the.ts file of the component you wish to construct.

import { Component, OnInit } from '@angular/core';
import { Observable } from "rxjs/";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  title = 'Learning RxJS';
  ngOnInit(): void {
     var observable = Observable.create((observer:any) => {
      observer.next('Hello Observable!')
  }
}

We successfully built an Observable in the preceding code block.

Now, let's look at subscribing to an observable. To get the observable to start execution, utilize the subscribe method.

observable.subscribe(function logging(message:any) {
    console.log(message);
})

This subscribe method will output "Hello Observable" to the terminal.

Understand Execution of Observables

Because the Observer is in charge of executing instructions on the Observable, each observer subscriber can supply the Observer with three values.

Next Value

The observer sends a value, which might be a number, string, or object, with each consecutive value. For every given Observable, there will be several sets of approaching notifications.

Error Value

The observer will raise a JavaScript exception with a value of error. If an error occurs in the Observable, no additional data may be sent to the Observable.

Complete Value

The observer does not send any value, therefore the value is complete. This often indicates that the subscription to a certain Observable has been completed.

export class AppComponent implements OnInit {
    title = 'Learning RxJS;
    ngOnInit(): void {
        var observable = Observable.create((observer: any) => {
            observer.next('I am number 1')
            observer.next('I am number 2')
            observer.error('I am number 3')
            observer.complete('I am number 4')
            observer.next('I am number 5')
        })
        observable.subscribe(function logging(message: any) {
            console.log(message);
        })
    }
}

You can see in your console window that either the error value or the Complete value automatically pauses execution, indicating that this is an asynchronous example.

Let’s make it asynchronous,

export class AppComponent implements OnInit {
    title = 'Learning RxJS';
    ngOnInit(): void {
        var observable = Observable.create((observer: any) => {
            observer.next('I am number 1')
            observer.next('I am number 2')
            setInterval(() => {
                observer.next('Random Async log message')
            }, 2000)
            observer.next('I am number 3')
            observer.next('I am number 4')
            setInterval(() => {
                observer.error('This is the end')
            }, 6001)
            observer.next('I am number 5')
        })
        observable.subscribe(function logging(message: any) {
            console.log(message);
        })
    }
}

This was done asynchronously with the aid of the setInterval module.

Destroying an Observable

Destroying an Observable simply means unsubscribing from it and removing it from the DOM. RxJS typically handles unsubscribe for asynchronous functionality, and the observable is destroyed as soon as an error message or full message is destroyed.

return function unsubscribe() {
    clearInterval(observable);
};

This is a primer on observables, observers, and subscription.

Happy Reading.