RxJS अपरेटरहरू र फ्ल्यातनिङ अपरेटरहरू के हुन्?

Question

Accepted Answer

**RxJS अपरेटरहरू** Observable स्ट्रिमहरूलाई रूपान्तरण, फिल्टर, र संयोजन गर्दछन्। सबैभन्दा महत्त्वपूर्ण — र सबैभन्दा भ्रामक — चार **फ्ल्यातनिङ अपरेटरहरू** हुन् जो Observable-of-Observables (जस्तै अर्को स्ट्रिमको प्रत्येक उत्सर्जन द्वारा ट्रिगर गरिएको HTTP कल) लाई सम्भाल्छन्।

## सामान्य transformation/filter अपरेटरहरू

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

## यो किन महत्त्वपूर्ण छ

फ्ल्यातनिङ अपरेटरहरू सबैभन्दा महत्त्वपूर्ण हुन् — र सबैभन्दा सामान्यतः दुरुपयोग गरिएको — RxJS उपकरणहरू Angular मा।

गलत छनोट गर्दा वास्तविक बग हुन्छ: खोज गर्नको लागि `mergeMap` प्रयोग गर्दा पुरानो परिणामहरू देखाइन्छन् (रद्द गरेर रोकिएको छैन); क्रमिक saves को लागि `switchMap` प्रयोग गर्दा तिनीहरूलाई मध्य-फ्लाइटमा रद्द गरिन्छ।

`switchMap` लाई रद्द गर्छ (खोजको लागि आदर्श), `concatMap` अर्डर गर्छ, `mergeMap` समानान्तर गर्छ, र `exhaustMap` डुप्लिकेटहरूलाई ब्लक गर्छ भन्ने कुरा जान्दा कुनै पनि RxJS-भारी Angular कोडमा सही async हलिङको लागि आवश्यक छ।n