RxJS प्लेग्राउंड

Reactive Programming क्या है?

Reactive programming एक प्रोग्रामिंग पैरेडाइम है जो डेटा स्ट्रीम्स और परिवर्तन प्रसार पर केंद्रित है। कोड को चरण‑दर‑चरण डेटा फ़ेच और प्रोसेस करने के बजाय, आप यह वर्णन करते हैं कि डेटा समय के साथ कैसे प्रवाहित और परिवर्तित होना चाहिए। जब मान बदलते हैं, तो अपडेट स्वचालित रूप से आपके एप्लिकेशन में प्रसारित होते हैं। इसे एक स्प्रेडशीट की तरह समझें: जब आप सेल A1 को अपडेट करते हैं, तो सभी सेल्स जो A1 को रेफ़र करते हैं, स्वचालित रूप से पुनः गणना करते हैं। यह दृष्टिकोण असिंक्रोनस इवेंट्स जैसे उपयोगकर्ता इंटरैक्शन, HTTP प्रतिक्रियाएँ, WebSocket संदेश, और टाइमर को संभालने में उत्कृष्ट है।

RxJS कैसे काम करता है?

RxJS (Reactive Extensions for JavaScript) reactive programming को Observables के माध्यम से लागू करता है—ऐसे ऑब्जेक्ट जो समय के साथ मान उत्पन्न करते हैं। मुख्य अवधारणाएँ हैं:

1. Observable: एक डेटा स्रोत जो मान उत्पन्न करता है (जैसे क्लिक इवेंट्स या API प्रतिक्रियाओं की स्ट्रीम)
2. Observer: एक कंज्यूमर जो उत्पन्न मानों पर कॉलबैक्स (next, error, complete) के माध्यम से प्रतिक्रिया देता है
3. Subscription: Observable और Observer के बीच का कनेक्शन
4. Operators: फ़ंक्शन जो डेटा स्ट्रीम्स को ट्रांसफ़ॉर्म, फ़िल्टर, संयोजित या मैनिपुलेट करते हैं
5. Subjects: विशेष Observable जो डेटा स्रोत और कंज्यूमर दोनों के रूप में कार्य करते हैं, जिससे मल्टीकास्टिंग संभव होती है

आप pipe() मेथड के साथ ऑपरेटर्स को चेन करके डेटा पाइपलाइन बनाते हैं, जिससे कच्ची स्ट्रीम्स को आपके एप्लिकेशन की आवश्यक डेटा संरचना में बदलते हैं।

टूल विवरण

RxJS Playground एक इंटरैक्टिव ब्राउज़र‑आधारित सैंडबॉक्स है जहाँ आप RxJS reactive programming अवधारणाओं के साथ प्रयोग कर सकते हैं। एडिटर में सीधे RxJS कोड लिखें और चलाएँ, RxJS लाइब्रेरी और सभी ऑपरेटर्स तक पूर्ण पहुँच के साथ। प्लेग्राउंड आपके कोड को टाइप करते ही (डिबाउंसिंग के साथ) स्वचालित रूप से चलाता है और टर्मिनल‑स्टाइल पैनल में कंसोल आउटपुट दिखाता है। यह RxJS अवधारणाओं को सीखने, डेटा ट्रांसफ़ॉर्मेशन प्रोटोटाइप करने, Observable पाइपलाइन को डिबग करने, और ऑपरेटर संयोजनों का परीक्षण करने के लिए आदर्श है, बिना किसी डेवलपमेंट एनवायरनमेंट सेट‑अप के।

विशेषताएँ

• Full RxJS Library Access: सभी क्रिएशन फ़ंक्शन (of, from, interval, fromEvent, आदि) और ऑपरेटर्स उपलब्ध
• Real-time Execution: कोड टाइप करते ही 500 ms डिबाउंस के साथ स्वचालित रूप से चलता है
• Terminal Output: कंसोल लॉग, एरर और वार्निंग्स स्टाइल्ड टर्मिनल में प्रदर्शित
• Syntax Highlighting: JavaScript कोड एडिटर में उचित सिंटैक्स हाइलाइटिंग
• Return Value Display: अंतिम एक्सप्रेशन वैल्यूज़ स्वचालित रूप से एरो नोटेशन के साथ लॉग होती हैं
• Error Handling: सिंटैक्स और रन‑टाइम समस्याओं के लिए स्पष्ट एरर मैसेज
• Operators Module: rxjs/operators तक सीधे पहुँच, पाइप‑बेस्ड ट्रांसफ़ॉर्मेशन के लिए

उदाहरण

Basic Observable Creation:

const { of, from, interval } = rxjs;

// Emit individual values
of(1, 2, 3).subscribe((x) => console.log(x));

// Convert array to Observable
from([10, 20, 30]).subscribe((x) => console.log(x));

Using Operators:

const { of } = rxjs;
const { map, filter, take } = operators;

of(1, 2, 3, 4, 5)
  .pipe(
    filter((x) => x % 2 === 0),
    map((x) => x * 10),
  )
  .subscribe((x) => console.log(x));
// Output: 20, 40

Combining Streams:

const { of, merge, concat } = rxjs;

const stream1 = of("A", "B");
const stream2 = of("X", "Y");

merge(stream1, stream2).subscribe((x) => console.log("merge:", x));
concat(stream1, stream2).subscribe((x) => console.log("concat:", x));

Subjects for Multicasting:

const { Subject, BehaviorSubject } = rxjs;

const subject = new Subject();
subject.subscribe((v) => console.log("Observer 1:", v));
subject.subscribe((v) => console.log("Observer 2:", v));
subject.next(1);
subject.next(2);

Transformation Pipeline:

const { from } = rxjs;
const { map, reduce, toArray } = operators;

from([1, 2, 3, 4, 5])
  .pipe(
    map((x) => x * 2),
    toArray(),
  )
  .subscribe((arr) => console.log("Doubled:", arr));

उपलब्ध मॉड्यूल

rxjs (मुख्य मॉड्यूल):

• Creation: of, from, interval, timer, range, generate, defer, iif
• Combination: merge, concat, combineLatest, forkJoin, zip, race
• Subjects: Subject, BehaviorSubject, ReplaySubject, AsyncSubject
• Utilities: firstValueFrom, lastValueFrom, isObservable

operators (pipeable operators):

• Transformation: map, pluck, scan, reduce, buffer, switchMap, mergeMap, concatMap
• Filtering: filter, take, takeUntil, skip, debounceTime, throttleTime, distinctUntilChanged
• Combination: withLatestFrom, combineLatestWith, mergeWith, startWith
• Error Handling: catchError, retry, retryWhen
• Utility: tap, delay, timeout, toArray, share, shareReplay

उपयोग के मामले

• Learning RxJS: हैंड‑ऑन प्रयोग के माध्यम से Observable अवधारणाओं को समझें
• Prototyping Data Flows: कार्यान्वयन से पहले रिएक्टिव डेटा पाइपलाइन डिजाइन और परीक्षण करें
• Debugging Operators: सरल उदाहरणों के साथ ऑपरेटर व्यवहार को अलग‑अलग करके सत्यापित करें
• Interview Preparation: रिएक्टिव प्रोग्रामिंग पैटर्न और सामान्य समस्याओं का अभ्यास करें
• Teaching Demonstrations: लाइव, इंटरैक्टिव उदाहरणों के साथ रिएक्टिव अवधारणाओं को प्रदर्शित करें