RxJS ਦੇ ਮੁੱਖ operators ਅਤੇ flattening operators ਕਿਹੜੇ ਹਨ?

Question

Accepted Answer

**RxJS operators** Observable streams ਨੂੰ ਤਬਦੀਲ, ਫਿਲਟਰ, ਅਤੇ ਜੋੜਦੇ ਹਨ। ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ — ਅਤੇ ਸਭ ਤੋਂ ਉਲਝਣ ਵਾਲੇ — ਚਾਰ **flattening operators** ਹਨ ਜੋ Observables-of-Observables ਨੂੰ ਸੰਭਾਲਦੇ ਹਨ (ਉਦਾਹਰਨ ਲਈ ਇੱਕ ਹੋਰ stream ਦੇ ਹਰੇਕ emission ਦੁਆਰਾ ਚਲਾਏ ਜਾਣ ਵਾਲੀ HTTP call)।

## ਆਮ transformation/filter operators

```ts
import { map, filter, tap, debounceTime, distinctUntilChanged, catchError } from "rxjs/operators";

source$.pipe(
  map(x => x * 2),                 // transform each value
  filter(x => x > 10),             // keep values passing a test
  tap(x => console.log(x)),        // side effect, doesn't change the stream
  debounceTime(300),               // wait for a pause before emitting (search inputs)
  distinctUntilChanged(),          // ignore consecutive duplicates
);
```

## ਚਾਰ flattening operators (ਮੁਸ਼ਕਲ ਹਿੱਸਾ)

ਜਦੋਂ source ਤੋਂ ਹਰੇਕ value ਨੂੰ **ਇੱਕ ਹੋਰ** Observable ਨੂੰ ਚਲਾਉਣ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ (ਜਿਵੇਂ HTTP request), ਤੁਹਾਨੂੰ inner Observable ਨੂੰ "flatten" ਕਰਨਾ ਪੈਂਦਾ ਹੈ। ਇਹ ਚਾਰਾਂ **overlap ਨੂੰ ਕਿਵੇਂ ਸੰਭਾਲਦੇ ਹਨ** ਵਿੱਚ ਅੰਤਰ ਹੈ:

```text
switchMap   → cancels the previous inner Observable when a new value arrives
mergeMap    → runs all inner Observables concurrently (no cancellation)
concatMap   → queues them, runs one at a time in order
exhaustMap  → ignores new values while an inner Observable is still running
```

## ਹਰੇਕ ਦੀ ਵਰਤੋਂ ਕਦੋਂ ਕਰੀਏ

```ts
// switchMap — type-ahead search: cancel the stale request when the user types again
this.searchInput.valueChanges.pipe(
  debounceTime(300),
  switchMap(query => this.api.search(query)) // only the LATEST query's result matters
).subscribe(results => this.results = results);

// mergeMap — fire independent requests in parallel (order doesn't matter)
from(ids).pipe(mergeMap(id => this.api.get(id)));

// concatMap — operations that MUST run in order (e.g. sequential saves)
actions$.pipe(concatMap(action => this.api.save(action)));

// exhaustMap — ignore repeated clicks while a login is in flight
this.loginClick$.pipe(exhaustMap(() => this.auth.login())); // ignore spam clicks
```

## ਇੱਕ mnemonic

```text
switchMap  = "switch to the new one" (cancel old) → search
mergeMap   = "merge all" (parallel)              → independent requests
concatMap  = "concatenate" (sequential)          → ordered operations
exhaustMap = "exhaust current first" (ignore new) → prevent double-submit
```

## ਇਹ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ

Flattening operators RxJS ਦੇ ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ — ਅਤੇ ਸਭ ਤੋਂ ਆਮ ਤੌਰ 'ਤੇ ਗਲਤ ਵਰਤੇ ਜਾਣ ਵਾਲੇ — ਟੂਲਸ ਹਨ।

jਗਲਤ ਚੁਣਾਅ ਕਰਨਾ ਅਸਲ bugs ਦਾ ਕਾਰਨ ਬਣਦਾ ਹੈ: search ਲਈ `mergeMap` ਦੀ ਵਰਤੋਂ ਪੁਰਾਣੇ ਨਤੀਜੇ ਦਿਖਾਉਂਦੀ ਹੈ (ਕੋਈ cancellation ਨਹੀਂ); sequential saves ਲਈ `switchMap` ਦੀ ਵਰਤੋਂ ਉਹਨਾਂ ਨੂੰ mid-flight ਵਿੱਚ cancel ਕਰ ਦਿੰਦੀ ਹੈ।

is ਗੱਲ ਨੂੰ ਜਾਣਨਾ ਕਿ `switchMap` cancel ਕਰਦਾ ਹੈ (search ਲਈ ਆਦਰਸ਼), `concatMap` ਅਨੁਕ੍ਰਮ ਵਿੱਚ ਕਰਦਾ ਹੈ, `mergeMap` ਸਮਾਂਤਰ ਕਰਦਾ ਹੈ, ਅਤੇ `exhaustMap` duplicates ਨੂੰ ਬਲਾਕ ਕਰਦਾ ਹੈ, ਇਸ ਦਾ ਅਰਥ ਹੈ RxJS-heavy Angular code ਵਿੱਚ ਸਹੀ async handling ਲਈ ضروری ہے۔