RxJS অপারেটরগুলি এবং ফ্ল্যাটেনিং অপারেটরগুলি কী কী?

Question

Accepted Answer

**RxJS অপারেটরগুলি** Observable স্ট্রিমগুলিকে রূপান্তরিত করে, ফিল্টার করে এবং একত্রিত করে। সবচেয়ে গুরুত্বপূর্ণ — এবং সবচেয়ে বিভ্রান্তিকর — হল চারটি **ফ্ল্যাটেনিং অপারেটর** যা Observables-of-Observables পরিচালনা করে (উদাহরণস্বরূপ একটি 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 কোডে সঠিক async পরিচালনার জন্য অপরিহার্য।