RxJS இன் முக்கிய ஆபரேட்டர்கள் மற்றும் சपаsheet ஆபரேட்டர்கள் என்ன?

Question

Accepted Answer

**RxJS ஆபரேட்டர்கள்** Observable ஸ்ட்ரீம்களை மாற்றி, வடிகட்டி, மற்றும் இணைக்கின்றன. மிக முக்கியமான — மற்றும் அதிகம் குழப்பமான — நான்கு **சपаsheet ஆபரேட்டர்கள்** ஆகும் இவை Observable-க்களை Observable-ஆக (எ.கா. மற்ற ஸ்ட்ரீமின் ஒவ்வொரு emiக்கூட்டம் தூண்டிய 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
);
```

## நான்கு சपाsheet ஆபரேட்டர்கள் (தந்திரமான பகுதி)

ஒரு மூலத்திலிருந்து ஒவ்வொரு மதிப்பும் **மற்றொரு** Observable-ஐ தூண்ட வேண்டிய போது (HTTP கோரிக்கை போல), நீங்கள் உள் Observable-ஐ "சპlatை" செய்ய வேண்டும். நான்கும் **எப்படி overlapping-ஐ கையாளுவது** என்பதில் வேறுபடுகிறது:

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

## இது ஏன் முக்கியம்

Sضalasheet ஆபரேட்டர்கள் மிக முக்கியமான — மற்றும் அதிகம் தவறாக பயன்படுத்தப்பட்ட — RxJS கருவிகளில் Angular இல் உள்ளன.

விரோதமான தேர்வு உண்மையான பிழைகளை ஏற்படுத்துகிறது: தேடலுக்கு `mergeMap` பயன்படுத்துவது பூர்வ விளைவுகளை காட்டுகிறது (ரத்தாக்கம் இல்லை); தொடரியல் சேமிப்புக்கு `switchMap` பயன்படுத்துவது அவற்றை பறக்கும் போது நிறுத்துகிறது.

`switchMap` ரத்து செய்கிறது (தேடலுக்கு சிறந்தது), `concatMap` வரிசை, `mergeMap` parallelizes, மற்றும் `exhaustMap` நகல்களை தடுக்கிறது என்பதை அறிந்திருப்பது RxJS-கனமான Angular கட்டத்தில் சரியான async கையாளுதலுக்கு இன்றியமையாதது.