RxJS & Observables
RxJS Operators
map, filter, debounceTime
💡 RxJS operators ek water treatment plant ki pipeline jaisi hai — raw water (raw data) multiple stages se guzarता hai (filter, purify, add minerals), har stage EK transformation karता hai, aakhir mein clean, ready-to-use water (final data) milता hai.
Operators Observable streams ko TRANSFORM karte hain — .pipe() method se CHAIN karte ho. map (transform values), filter (select values), debounceTime (rapid emissions ko "slow down" karo — search-as-you-type ke liye), distinctUntilChanged (duplicate consecutive values skip karo).
import { map, filter, debounceTime, distinctUntilChanged } from 'rxjs/operators';
searchInput$.pipe(
debounceTime(300), // 300ms wait karo rapid typing ke beech
distinctUntilChanged(), // SAME query dubara mat bhejo
filter(query => query.length > 2), // sirf 3+ characters
map(query => query.toLowerCase()) // lowercase mein convert
).subscribe(query => {
performSearch(query);
});🔧
RxJS operators ek water treatment plant ki pipeline jaisi hai — raw water (raw data) multiple stages se guzarता hai (filter, purify, add minerals), har stage EK transformation karता hai, aakhir mein clean, ready-to-use water (final data) milता hai.
1 / 2
⚡ Quick Recap
- .pipe(operator1, operator2, ...) = operators ko chain karo
- map/filter = data transform/select karo (array methods jaise hi)
- debounceTime/distinctUntilChanged = search-as-you-type ka classic combo
On this page (2 subtopics)
switchMap PICHLA inner Observable CANCEL kar deta hai jab NAYA outer value aaye — search-as-you-type ke liye PERFECT: agar user "hel" type karके phir "hello" type kare, "hel" ka pending API call automatically CANCEL ho jaata hai.
import { switchMap, debounceTime } from 'rxjs/operators';
searchInput$.pipe(
debounceTime(300),
switchMap(query => this.searchService.search(query))
// Naya query aane par, PURANA search API call CANCEL ho jaata hai
).subscribe(results => {
this.searchResults = results;
});Tip: switchMap search/autocomplete ke liye SABSE common operator hai — "race condition" (jaha PURANA, SLOW response, NAYE FAST response ke BAAD aakar UI ko galat data se overwrite kar de) ko automatically prevent karta hai.
combineLatest MULTIPLE Observables ki LATEST values ko COMBINE karta hai (jab bhi KOI bhi update ho). forkJoin sabke COMPLETE hone ka wait karta hai, phir EK BAAR final values deta hai (jaise Promise.all()).
import { combineLatest, forkJoin } from 'rxjs';
// combineLatest — jab bhi koi bhi source update ho:
combineLatest([user$, settings$]).subscribe(([user, settings]) => {
console.log(user, settings);
});
// forkJoin — sabke COMPLETE hone ka wait (jaise Promise.all):
forkJoin([this.http.get('/api/users'), this.http.get('/api/posts')])
.subscribe(([users, posts]) => {
console.log(users, posts);
});Tip: forkJoin HTTP requests ke liye common hai (jo naturally COMPLETE hote hain), combineLatest ONGOING streams ke liye (jaise form value changes) — dono ek saath multiple values chahiye hote waqt use hote hain, lekin different use-cases ke liye.