मुख्य RxJS ऑपरेटर आणि समतल करणे ऑपरेटर कोणते आहेत?

Question

Accepted Answer

**RxJS ऑपरेटर** Observable प्रवाह रूपांतरित, फिल्टर आणि एकत्रित करतात. सर्वात महत्त्वाचे — आणि सर्वात गोंधळलेले — चार **समतल करणे ऑपरेटर** आहेत जे Observable-of-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` समांतर करतो, आणि `exhaustMap` डुप्लिकेट ब्लॉक करतो हे जाणून घेणे कोणत्याही RxJS-हेव्ही Angular कोडमध्ये योग्य अ‍ॅसिंक हाताळणीसाठी आवश्यक आहे.