RxJS tutorial with examples in hindi

 

RxJS (Reactive Extensions for JavaScript) Tutorial in Hindi

RxJS (Reactive Extensions for JavaScript) एक लाइब्रेरी है जो असिंक्रोनस और इवेंट-बेस्ड प्रोग्रामिंग को सरल बनाती है। यह reactive programming के सिद्धांतों का पालन करती है, जहां डेटा को एक स्ट्रीम के रूप में मानते हैं और इन स्ट्रीम्स पर विभिन्न ऑपरेशन्स अप्लाई करते हैं।

---

1. RxJS क्या है?

RxJS एक लाइब्रेरी है जो हमें असिंक्रोनस डेटा के साथ काम करने में मदद करती है, जैसे की:

• HTTP requests
• Event listeners (click, scroll, etc.)
• Timers और Delays
• Promises और Observables

RxJS स्ट्रीम्स (Observables) और ऑपरेशन्स (Operators) पर आधारित है, जिससे हम डेटा को प्रोसेस, ट्रांसफॉर्म और मैनीपुलेट कर सकते हैं।

---

2. Observables क्या होते हैं?

Observable एक डेटा स्ट्रीम है, जो किसी भी तरह के असिंक्रोनस डेटा को संभालने के लिए यूज़ किया जाता है। Observable में डेटा किसी इवेंट या किसी प्रोसेस के पूरा होने पर आता है। एक Observable को सब्सक्राइब किया जाता है, ताकि उसे प्रोसेस किया जा सके।

Observable के तीन मुख्य स्टेट्स होते हैं:

• next(): नया डेटा या वैल्यू
• error(): किसी तरह की एरर
• complete(): स्ट्रीम का अंत

Example 1: Observable की बुनियादी परिभाषा

javascript
import { Observable } from 'rxjs';

// एक साधारण Observable बनाएँ
const observable = new Observable(subscriber => {
  subscriber.next('Hello');
  subscriber.next('RxJS');
  subscriber.complete(); // जब स्ट्रीम खत्म हो जाए
});

// इस observable को subscribe करें
observable.subscribe({
  next(value) { console.log(value); },
  complete() { console.log('Completed!'); }
});

Output:

Hello
RxJS
Completed!

---

3. Operators

RxJS में operators का उपयोग किया जाता है, जो हमें डेटा को ट्रांसफॉर्म, फ़िल्टर या प्रोसेस करने में मदद करते हैं। RxJS में दो मुख्य प्रकार के operators होते हैं:

• Creation Operators: इनसे हम Observable बनाएंगे। जैसे of(), from(), interval(), आदि।
• Transformation Operators: इनसे हम डेटा को बदल सकते हैं। जैसे map(), filter(), mergeMap(), आदि।

---

4. map() Operator

map() ऑपरेटर का उपयोग किसी Observable की वैल्यू को बदलने के लिए किया जाता है।

Example:

javascript
import { of } from 'rxjs';
import { map } from 'rxjs/operators';

const numbers = of(1, 2, 3, 4, 5);

numbers.pipe(
  map(x => x * 2)  // हर संख्या को 2 से गुणा करें
).subscribe(console.log);

Output:

2
4
6
8
10

---

5. filter() Operator

filter() ऑपरेटर का उपयोग हम किसी Observable की वैल्यू को फ़िल्टर करने के लिए करते हैं।

Example:

javascript
import { of } from 'rxjs';
import { filter } from 'rxjs/operators';

const numbers = of(1, 2, 3, 4, 5);

numbers.pipe(
  filter(x => x % 2 === 0)  // केवल सम संख्या को ही पास करें
).subscribe(console.log);

Output:

2
4

---

6. Subject

Subject एक प्रकार का Observable होता है जो मल्टीपल subscribers को एक ही स्ट्रीम पर डेटा भेज सकता है। यह एक multicast Observable है। सामान्य Observables केवल एक ही subscriber को डेटा भेजते हैं, जबकि Subject एक ही डेटा को कई subscribers को भेज सकता है।

Example:

javascript
import { Subject } from 'rxjs';

const subject = new Subject();

// Subscriber 1
subject.subscribe({
  next: (v) => console.log(`Subscriber 1: ${v}`)
});

// Subscriber 2
subject.subscribe({
  next: (v) => console.log(`Subscriber 2: ${v}`)
});

// Sending data
subject.next('Hello from Subject!');

Output:

csharp
Subscriber 1: Hello from Subject!
Subscriber 2: Hello from Subject!

---

7. mergeMap() Operator

mergeMap() एक transformation operator है, जिसका उपयोग एक Observable के प्रत्येक वैल्यू पर दूसरे Observable को subscribe करने के लिए किया जाता है।

Example:

javascript
import { of } from 'rxjs';
import { mergeMap } from 'rxjs/operators';
import { interval } from 'rxjs';

// 'of' से आने वाली वैल्यू पर interval Observable लगाना
of(1, 2, 3).pipe(
  mergeMap(val => interval(1000).pipe(
    map(i => `Value: ${val}, Interval: ${i}`)
  ))
).subscribe(console.log);

Output:

yaml
Value: 1, Interval: 0
Value: 1, Interval: 1
Value: 1, Interval: 2
Value: 1, Interval: 3
Value: 2, Interval: 0
Value: 2, Interval: 1
Value: 2, Interval: 2
...

---

8. combineLatest() Operator

combineLatest() ऑपरेटर का उपयोग कई Observables के परिणामों को एक साथ मिला कर एक नई Observable बनाता है। यह तब काम करता है जब सभी Observables में कम से कम एक नया वैल्यू होता है।

Example:

javascript
import { of, interval } from 'rxjs';
import { combineLatest, map } from 'rxjs/operators';

const obs1 = interval(1000);  // 0, 1, 2, 3, ...
const obs2 = of('A', 'B', 'C');  // 'A', 'B', 'C'

combineLatest([obs1, obs2]).pipe(
  map(([val1, val2]) => `${val1} - ${val2}`)
).subscribe(console.log);

Output:

css
0 - A
1 - A
1 - B
2 - B
2 - C
3 - C
...

---

9. Error Handling in RxJS

RxJS में error handling के लिए catchError() ऑपरेटर का उपयोग किया जाता है। इस ऑपरेटर का उपयोग हमें किसी error को पकड़ने और उसे ठीक करने में मदद करता है।

Example:

javascript
import { of, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

const source = throwError('Something went wrong!');

source.pipe(
  catchError(err => of('Caught an error: ' + err))  // Error के बाद वैल्यू प्रदान करें
).subscribe(console.log);

Output:

go
Caught an error: Something went wrong!

---

निष्कर्ष:

RxJS एक बहुत ही शक्तिशाली टूल है जो असिंक्रोनस डेटा फ्लो को बहुत सरल और कुशल तरीके से मैनेज करने में मदद करता है। इसके साथ काम करने के लिए आपको Observables, Operators, और Subjects को समझने की आवश्यकता होती है। उपरोक्त उदाहरणों के जरिए आपने RxJS के कुछ प्रमुख पहलुओं को सीखा, जो आपके JavaScript प्रोग्रामिंग को और बेहतर बनाएंगे।