RxJS యొక్క ముఖ్య ఆపరేటర్‌లు మరియు ఫ్లాట్టెనింగ్ ఆపరేటర్‌లు ఏవి?

Question

Accepted Answer

**RxJS ఆపరేటర్‌లు** Observable స్ట్రీమ్‌లను రూపాంతరం చేస్తాయి, ఫిల్టర్ చేస్తాయి మరియు సంయోగం చేస్తాయి. అత్యంత ముఖ్యమైన — మరియు చాలా తరచుగా గందర్భకమైన — నాలుగు **ఫ్లాట్టెనింగ్ ఆపరేటర్‌లు** Observable-ల-Observable-ల (ఉదా. మరొక స్ట్రీమ్ యొక్క ప్రతి ప్రసరణ ద్వారా ప్రేరితమైన HTTP కాల్) నిర్వహించాయి.

## సాధారణ రూపాంతర/ఫిల్టర్ ఆపరేటర్‌లు

```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
);
```

## నాలుగు ఫ్లాట్టెనింగ్ ఆపరేటర్‌లు (గమ్మత్తైన భాగం)

ఆ వనరు నుండి ప్రతి విలువ **మరొక** Observable (HTTP అభ్యర్థన వంటి) ను ప్రేరేపించవలసి ఉన్నప్పుడు, మీరు అంతర్గత Observable ను "ఫ్లాట్టెన్" చేయాలి. నాలుగు **ఎలా అతిక్రమణను నిర్వహించాయి** అనే విషయంలో భిన్నంగా ఉన్నాయి:

```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
```

## ఒక జ్ఞాపకము

```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
```

## ఇది ఎందుకు ముఖ్యమైనది

ఫ్లాట్టెనింగ్ ఆపరేటర్‌లు చాలా ముఖ్యమైన — మరియు చాలా తరచుగా దుర్వినియోగం చేయబడిన — Angular లో RxJS సాధనాలలో ఉన్నాయి.

చేసిన ఎంపిక నిజమైన బగ్‌లను కలిగిస్తుంది: శోధనకు `mergeMap` ఉపయోగించడం పాతకాలపు ఫలితాలను చూపుతుంది (రద్దు లేదు); సీక్వెన్షియల్ సేవ్‌ల కోసం `switchMap` ఉపయోగించడం వాటిని విమానంలో రద్దు చేస్తుంది.

`switchMap` రద్దు చేస్తుంది (శోధనకు ఆదర్శవంతమైనది), `concatMap` ఆర్డర్‌లు, `mergeMap` parallelizes, మరియు `exhaustMap` నకిలులను నిరోధిస్తుంది అని తెలుసుకోవడం ఏదైనా RxJS-భారీ Angular కోడ్‌లో సరైన async నిర్వహణకు తప్పనిసరిగా ఉంటుంది.