RxJS

 RxJS: Reactive Extensions for JavaScript

We need RxJS to handle asynchronous data easily 

Asynchronous data: Data from HTTP response, data from a port, user click events, timer etc

Observer and Observable

Observer: RxJS object that emits data stream

Observable: Entity that  is listening to the stream

In order to initiate communication between data and listener in RxJS scope, first they need to be converted to "observer" and "observable"

Observer subscribes to the observable to listen to the data stream

Use of "subscribe:" Used to listen to the data stream

OPERATORS

Operators are small pieces of code that can be applied as pre-processing logic before data comes to the listener

Summary of common operators:

map:  used to manipulate responses from the API

filter: used to filter values based on condition. Same as ES6 filter but this is for Observable

merge:  This operator combines a number of observables streams and concurrently emits all values from every given input strea. The stream completes when all input streams complete and will throw an error if any of the streams throws an error. It will never complete if some of the input streams don’t complete. Use this operator if you’re not concerned with the order of emissions and is simply interested in all values coming out from multiple combined streams as if they were produced by one stream.

concat: only when 1 observable completes, it it will start with the next observable. Use this operator if the order of emissions is important and you want to first see values emitted by streams that you pass first to the operator. For example, you may have an observable sequences that delivers values from a cache and another sequence that delivers values from a remote server. Use concat if you want to combine them and ensure that the value from cache is delivered first.

from: Turns array/promise/iterable into Observable

delay: emits a value with delay

debouncetime: discards emitted values if a certain time didnt pass between the last input 

distinctuntilchanged: Only emits value if it is distinct from the previous one

PROMISE vs OBSERVABLE

Promise

Observable
Are not lazy: executes immediately after creation.

Are lazy: they’re not executed until we subscribe to them using the subscribe() method.

Are not cancellable.

Have subscriptions that are cancellable using the unsubscribe() method, which stops the listener from receiving further values.
Don’t provide any operations.

 Provide the map for forEach, filter, reduce, retry, and retryWhen operators.

REAL-TIME USAGE 

Note: Used angular 12+ for the below examples

Each button here triggers a function that runs its corresponding RxJS operators example


Consider we have the following HTTP calls in our application. Each function returns an observable

Now, let us start writing functions that execute on click of each of these buttons

map: used to manipulate responses from the API



 flatMap – to create new Observable basing on the data emitted by another Observable


forkJoin-will wait for all passed observables to complete and then it will emit an array or an object with last values from corresponding observables. The possible use-case for it is running many parallel networks requests. It accepts an array of Observables and returns higher-order Observable.



tap:  to perform side actions whenever an Observable emits new data


SWITCHMAP

It will cancel any ongoing request whenever there is a new request. The previous call was outdated and we do not want to waste an API call for an outdated request.
Example: when we have a search box that makes API request as the user types into the box.


Notice how the first request was canceled since the user quickly typed even before the previous call was complete.

However in a real time scenario, it is always better to use "debounceTime": Emits a notification from the source Observable only after a particular time span has passed without another source emission.



MERGEMAP
Consider the same example as above but with "mergeMap"



Here calls happen in parallel

CONCATMAP
Consider the same example as above but with "concatMap"

Here, a new call does not happen until the old one was complete

COMBINELATEST
Consider you have two different observables. But you want to get the latest from both whenever there is new data

let obs1 = new BehaviorSubject('initital-obs1');
let obs2 = new BehaviorSubject('initital-obs2');

setTimeout(() => {
  obs2.next('obs-2 after 5 secs');
}, 5000);

setTimeout(() => {
  obs1.next('obs-1 after 2 secs');
}, 2000);

setTimeout(() => {
  obs2.next('obs-2 after 2 secs');
}, 2000);

setTimeout(() => {
  obs2.next('obs-2 again after 2 secs');
}, 2000);

combineLatest([obs1, obs2]).subscribe((res) => console.log(res));


SUBJECT

Subject is the equivalent to an EventEmitter, and the only way of multicasting a value or event to multiple Observers. Subject is both an observable and an observer.
It’s an observable because it implements the subscribe() method, and it’s also an observer because it implements the observer interface — next(), error(), and complete().

BehaviourSubject: 

Same as Subject but a BehaviorSubject holds one value. When it is subscribed it emits the value immediately. A Subject doesn't hold a value

Ex: Consider we have the below angular service. messages$ is public and can be subscribed for latest values by subscribers from any component 
 


Consider we have component, may be called as "HelloComponent" which displays the subscribed message value from the service

We can set the value for this message from any component, any change in the value will update in all components that was subscribed to it and gets this new value

So, In app.component.ts



Stackblitz code reference link: https://stackblitz.com/edit/angular-ivy-cumzob?file=src/app/app.component.ts


For the output: https://angular-ivy-au21hw.stackblitz.io


Stackblitz for switchMap, mergeMap, concatMap: https://stackblitz.com/edit/base-angular-12-app-crzqez










Location: Toronto, Canada

Comments

Post a Comment

Popular posts from this blog

Inside the JavaScript Memory Box: Visualizing Variables, References, and Copies

Image
There is a difference in the way JavaScript refences variables based on whether they are primitive or non-primitive Primitive Types: string, number, bigint, Boolean, symbol, null, undefined Non-Primitive: Arrays, Objects Each variable in JS is stored in a memory “box” Assignments: But when another variable tries to assign this value, JS thinks “wait, is this a primitive or non-primitive? Because if it is primitive, I will create a new box for this new variable with the same content. But if it’s not, I will just create a refence to the existing box” PRIMITIVE: Analogy: Let's say you have a note that says 5. You give a copy of this note to your friend.  Friend now updates this copy to 10. But your copy still says 5 let a = 5; let b = a; b = 10; //a remains unchanged NON-PRIMITIVE: Analogy: Let's say you have a note with address "123 Elm Street". In that house lives a cat named "Tom". You give a copy of this note to your friend. Friend now goes t...
Read more

React & State Management: All Concepts

Section 1: Fundamentals 1. Counter with increment, decrement, reset — useState Remember: prev is needed when the new state depends on the old state. When you're setting a hardcoded value like 0, you just pass 0 directly. Why:  reason prev matters — if multiple state updates happen in the same render cycle, React batches them. Using prev guarantees you're working off the latest state, not a stale snapshot. 2. Toggle show/hide paragraph — useState Remember: onClick={toggle} — pass the function reference, not the call. onClick={() => toggle()} — also fine, arrow function that calls toggle when clicked. onClick={toggle()} — calls toggle immediately during render, setVisible triggers re-render, toggle calls again, infinite loop. Why: JSX evaluates expressions inside {} during render. toggle() is an expression that executes immediately. React doesn't get a chance to attach it as a handler — it just runs it right there, state updates, component re-renders, runs again. ...
Read more

React: Communication between components

Parent to Child: Props Child to Parent Callback Props (advanced props) Controlled Components useImperative hook  Nested Tree: useContext Sibling: Lift State Up PARENT TO CHILD: Props App.jsx Users.jsx <User name ={user} /> function User({ name }) {  return <h1> {name} </h1> } CHILD TO PARENT a) Callback Props (Advanced Props) Parent.jsx Child1.jsx export function Parent() {   function sayHello () {     alert(“hello triggered”)   }   <Child1 onSayHello ={ sayHello } /> } function Child1({ onSayHello }) {   return <button onClick={ onSayhello() }>          Click       </button> } b) Controlled Components Usually used in forms. Controlled components mean the parent owns the state, the child renders inputs, and every ch...
Read more