RxJS ಬಳಸಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ ರಿಯಾಕ್ಟಿವ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಅನ್ವೇಷಿಸಿ. ರೆಸ್ಪಾನ್ಸಿವ್ ಮತ್ತು ಸ್ಕೇಲೆಬಲ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಅಬ್ಸರ್ವಬಲ್ ಸ್ಟ್ರೀಮ್‌ಗಳು, ಪ್ಯಾಟರ್ನ್‌ಗಳು ಮತ್ತು ಪ್ರಾಯೋಗಿಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಕಲಿಯಿರಿ.
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ರಿಯಾಕ್ಟಿವ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್: RxJS ಪ್ಯಾಟರ್ನ್‌ಗಳು ಮತ್ತು ಅಬ್ಸರ್ವಬಲ್ ಸ್ಟ್ರೀಮ್‌ಗಳು
ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿಯ ನಿರಂತರವಾಗಿ ವಿಕಸಿಸುತ್ತಿರುವ ಕ್ಷೇತ್ರದಲ್ಲಿ, ರೆಸ್ಪಾನ್ಸಿವ್, ಸ್ಕೇಲೆಬಲ್, ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವುದು ಅತ್ಯಂತ ಮುಖ್ಯವಾಗಿದೆ. ರಿಯಾಕ್ಟಿವ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್ (RP) ಅಸಿಂಕ್ರೋನಸ್ ಡೇಟಾ ಸ್ಟ್ರೀಮ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಮತ್ತು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನಾದ್ಯಂತ ಬದಲಾವಣೆಗಳನ್ನು ಪ್ರಸಾರ ಮಾಡಲು ಒಂದು ಶಕ್ತಿಯುತ ಮಾದರಿಯನ್ನು ಒದಗಿಸುತ್ತದೆ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ RP ಯನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಜನಪ್ರಿಯ ಲೈಬ್ರರಿಗಳಲ್ಲಿ, RxJS (Reactive Extensions for JavaScript) ಒಂದು ದೃಢವಾದ ಮತ್ತು ಬಹುಮುಖ ಸಾಧನವಾಗಿ ನಿಲ್ಲುತ್ತದೆ.
ರಿಯಾಕ್ಟಿವ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಎಂದರೇನು?
ಮೂಲಭೂತವಾಗಿ, ರಿಯಾಕ್ಟಿವ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಎಂದರೆ ಅಸಿಂಕ್ರೋನಸ್ ಡೇಟಾ ಸ್ಟ್ರೀಮ್‌ಗಳನ್ನು ಮತ್ತು ಬದಲಾವಣೆಯ ಪ್ರಸಾರವನ್ನು ನಿಭಾಯಿಸುವುದು. ಒಂದು ಸ್ಪ್ರೆಡ್‌ಶೀಟ್ ಅನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ, ಅದರಲ್ಲಿ ಒಂದು ಸೆಲ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಿದಾಗ ಸಂಬಂಧಿತ ಫಾರ್ಮುಲಾಗಳು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಮರುಲೆಕ್ಕಾಚಾರಗೊಳ್ಳುತ್ತವೆ. ಅದೇ RP ಯ ಸಾರಾಂಶ – ಡೇಟಾ ಬದಲಾವಣೆಗಳಿಗೆ ಘೋಷಣಾತ್ಮಕ ಮತ್ತು ಪರಿಣಾಮಕಾರಿ ರೀತಿಯಲ್ಲಿ ಪ್ರತಿಕ್ರಿಯಿಸುವುದು.
ಸಾಂಪ್ರದಾಯಿಕ ಇಂಪರೆಟಿವ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಸಾಮಾನ್ಯವಾಗಿ ಸ್ಥಿತಿಯನ್ನು ನಿರ್ವಹಿಸುವುದು ಮತ್ತು ಘಟನೆಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯೆಯಾಗಿ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಅಪ್‌ಡೇಟ್ ಮಾಡುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ. ಇದು ಸಂಕೀರ್ಣ ಮತ್ತು ದೋಷಪೂರಿತ ಕೋಡ್‌ಗೆ ಕಾರಣವಾಗಬಹುದು, ವಿಶೇಷವಾಗಿ ನೆಟ್‌ವರ್ಕ್ ವಿನಂತಿಗಳು ಅಥವಾ ಬಳಕೆದಾರರ ಸಂವಹನಗಳಂತಹ ಅಸಿಂಕ್ರೋನಸ್ ಕಾರ್ಯಾಚರಣೆಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ. RP ಎಲ್ಲವನ್ನೂ ಡೇಟಾದ ಸ್ಟ್ರೀಮ್ ಎಂದು ಪರಿಗಣಿಸುವ ಮೂಲಕ ಮತ್ತು ಈ ಸ್ಟ್ರೀಮ್‌ಗಳನ್ನು ಪರಿವರ್ತಿಸಲು, ಫಿಲ್ಟರ್ ಮಾಡಲು ಮತ್ತು ಸಂಯೋಜಿಸಲು ಆಪರೇಟರ್‌ಗಳನ್ನು ಒದಗಿಸುವ ಮೂಲಕ ಇದನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ.
RxJS ಪರಿಚಯ: ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ಗಾಗಿ ರಿಯಾಕ್ಟಿವ್ ವಿಸ್ತರಣೆಗಳು
RxJS ಎಂಬುದು ಅಬ್ಸರ್ವಬಲ್ ಸೀಕ್ವೆನ್ಸ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಅಸಿಂಕ್ರೋನಸ್ ಮತ್ತು ಈವೆಂಟ್-ಆಧಾರಿತ ಪ್ರೋಗ್ರಾಂಗಳನ್ನು ಸಂಯೋಜಿಸಲು ಇರುವ ಒಂದು ಲೈಬ್ರರಿಯಾಗಿದೆ. ಇದು ಡೇಟಾ ಸ್ಟ್ರೀಮ್‌ಗಳನ್ನು ಸುಲಭವಾಗಿ ನಿರ್ವಹಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುವ ಶಕ್ತಿಯುತ ಆಪರೇಟರ್‌ಗಳ ಗುಂಪನ್ನು ಒದಗಿಸುತ್ತದೆ. RxJS, ಈವೆಂಟ್‌ಗಳು ಅಥವಾ ಡೇಟಾದ ಅನುಕ್ರಮಗಳನ್ನು ಸಮರ್ಥವಾಗಿ ನಿರ್ವಹಿಸಲು ಅಬ್ಸರ್ವರ್ ಪ್ಯಾಟರ್ನ್, ಇಟರೇಟರ್ ಪ್ಯಾಟರ್ನ್ ಮತ್ತು ಫಂಕ್ಷನಲ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಪರಿಕಲ್ಪನೆಗಳ ಮೇಲೆ ನಿರ್ಮಿತವಾಗಿದೆ.
RxJS ನಲ್ಲಿ ಪ್ರಮುಖ ಪರಿಕಲ್ಪನೆಗಳು:
- Observables: ಒಂದು ಅಥವಾ ಹೆಚ್ಚು ಅಬ್ಸರ್ವರ್‌ಗಳಿಂದ ಗಮನಿಸಬಹುದಾದ ಡೇಟಾ ಸ್ಟ್ರೀಮ್ ಅನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತವೆ. ಅವುಗಳು ಲೇಜಿ ಆಗಿರುತ್ತವೆ ಮತ್ತು ಸಬ್‌ಸ್ಕ್ರೈಬ್ ಮಾಡಿದಾಗ ಮಾತ್ರ ಮೌಲ್ಯಗಳನ್ನು ಹೊರಸೂಸಲು ಪ್ರಾರಂಭಿಸುತ್ತವೆ.
- Observers: ಅಬ್ಸರ್ವಬಲ್‌ಗಳಿಂದ ಹೊರಸೂಸಲ್ಪಟ್ಟ ಡೇಟಾವನ್ನು ಬಳಸಿಕೊಳ್ಳುತ್ತವೆ. ಅವುಗಳಿಗೆ ಮೂರು ವಿಧಾನಗಳಿವೆ:
next()ಮೌಲ್ಯಗಳನ್ನು ಸ್ವೀಕರಿಸಲು,error()ದೋಷಗಳನ್ನು ನಿರ್ವಹಿಸಲು, ಮತ್ತುcomplete()ಸ್ಟ್ರೀಮ್‌ನ ಅಂತ್ಯವನ್ನು ಸೂಚಿಸಲು. - Operators: ಅಬ್ಸರ್ವಬಲ್‌ಗಳನ್ನು ಪರಿವರ್ತಿಸುವ, ಫಿಲ್ಟರ್ ಮಾಡುವ, ಸಂಯೋಜಿಸುವ ಅಥವಾ ನಿರ್ವಹಿಸುವ ಫಂಕ್ಷನ್‌ಗಳು. RxJS ವಿವಿಧ ಉದ್ದೇಶಗಳಿಗಾಗಿ ವ್ಯಾಪಕವಾದ ಆಪರೇಟರ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.
- Subjects: ಅಬ್ಸರ್ವಬಲ್‌ಗಳು ಮತ್ತು ಅಬ್ಸರ್ವರ್‌ಗಳೆರಡಾಗಿಯೂ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ, ಇದು ನಿಮಗೆ ಬಹು ಚಂದಾದಾರರಿಗೆ ಡೇಟಾವನ್ನು ಮಲ್ಟಿಕಾಸ್ಟ್ ಮಾಡಲು ಮತ್ತು ಸ್ಟ್ರೀಮ್‌ಗೆ ಡೇಟಾವನ್ನು ಪುಶ್ ಮಾಡಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
- Schedulers: ಅಬ್ಸರ್ವಬಲ್‌ಗಳ ಕನ್‌ಕರೆನ್ಸಿಯನ್ನು ನಿಯಂತ್ರಿಸುತ್ತವೆ, ಇದು ನಿಮಗೆ ಕೋಡ್ ಅನ್ನು ಸಿಂಕ್ರೋನಸ್ ಆಗಿ ಅಥವಾ ಅಸಿಂಕ್ರೋನಸ್ ಆಗಿ, ವಿವಿಧ ಥ್ರೆಡ್‌ಗಳಲ್ಲಿ, ಅಥವಾ ನಿರ್ದಿಷ್ಟ ವಿಳಂಬಗಳೊಂದಿಗೆ ಕಾರ್ಯಗತಗೊಳಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
ಅಬ್ಸರ್ವಬಲ್ ಸ್ಟ್ರೀಮ್‌ಗಳ ವಿವರ
ಅಬ್ಸರ್ವಬಲ್‌ಗಳು RxJS ನ ಅಡಿಪಾಯ. ಅವು ಕಾಲಾನಂತರದಲ್ಲಿ ಗಮನಿಸಬಹುದಾದ ಡೇಟಾ ಸ್ಟ್ರೀಮ್ ಅನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತವೆ. ಒಂದು ಅಬ್ಸರ್ವಬಲ್ ತನ್ನ ಚಂದಾದಾರರಿಗೆ ಮೌಲ್ಯಗಳನ್ನು ಹೊರಸೂಸುತ್ತದೆ, ಅವರು ನಂತರ ಆ ಮೌಲ್ಯಗಳನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಬಹುದು ಅಥವಾ ಪ್ರತಿಕ್ರಿಯಿಸಬಹುದು. ಇದನ್ನು ಒಂದು ಪೈಪ್‌ಲೈನ್‌ನಂತೆ ಯೋಚಿಸಿ, ಅಲ್ಲಿ ಡೇಟಾ ಮೂಲದಿಂದ ಒಂದು ಅಥವಾ ಹೆಚ್ಚು ಗ್ರಾಹಕರಿಗೆ ಹರಿಯುತ್ತದೆ.
ಅಬ್ಸರ್ವಬಲ್‌ಗಳನ್ನು ರಚಿಸುವುದು:
RxJS ಅಬ್ಸರ್ವಬಲ್‌ಗಳನ್ನು ರಚಿಸಲು ಹಲವಾರು ಮಾರ್ಗಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ:
Observable.create(): ಒಂದು ಕೆಳಮಟ್ಟದ ವಿಧಾನವಾಗಿದ್ದು, ಇದು ಅಬ್ಸರ್ವಬಲ್‌ನ ನಡವಳಿಕೆಯ ಮೇಲೆ ನಿಮಗೆ ಸಂಪೂರ್ಣ ನಿಯಂತ್ರಣವನ್ನು ನೀಡುತ್ತದೆ.from(): ಒಂದು ಅರೇ, ಪ್ರಾಮಿಸ್, ಇಟರೇಬಲ್, ಅಥವಾ ಅಬ್ಸರ್ವಬಲ್-ರೀತಿಯ ವಸ್ತುವನ್ನು ಅಬ್ಸರ್ವಬಲ್ ಆಗಿ ಪರಿವರ್ತಿಸುತ್ತದೆ.of(): ಮೌಲ್ಯಗಳ ಅನುಕ್ರಮವನ್ನು ಹೊರಸೂಸುವ ಅಬ್ಸರ್ವಬಲ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ.interval(): ನಿರ್ದಿಷ್ಟ ಮಧ್ಯಂತರದಲ್ಲಿ ಸಂಖ್ಯೆಗಳ ಅನುಕ್ರಮವನ್ನು ಹೊರಸೂಸುವ ಅಬ್ಸರ್ವಬಲ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ.timer(): ನಿರ್ದಿಷ್ಟ ವಿಳಂಬದ ನಂತರ ಒಂದೇ ಮೌಲ್ಯವನ್ನು ಹೊರಸೂಸುವ ಅಬ್ಸರ್ವಬಲ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ, ಅಥವಾ ವಿಳಂಬದ ನಂತರ ಸ್ಥಿರ ಮಧ್ಯಂತರದಲ್ಲಿ ಸಂಖ್ಯೆಗಳ ಅನುಕ್ರಮವನ್ನು ಹೊರಸೂಸುತ್ತದೆ.fromEvent(): ಒಂದು DOM ಎಲಿಮೆಂಟ್ ಅಥವಾ ಇತರ ಈವೆಂಟ್ ಮೂಲದಿಂದ ಈವೆಂಟ್‌ಗಳನ್ನು ಹೊರಸೂಸುವ ಅಬ್ಸರ್ವಬಲ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ.
ಉದಾಹರಣೆ: ಅರೇಯಿಂದ ಅಬ್ಸರ್ವಬಲ್ ರಚಿಸುವುದು
```javascript import { from } from 'rxjs'; const myArray = [1, 2, 3, 4, 5]; const myObservable = from(myArray); myObservable.subscribe( value => console.log('Received:', value), error => console.error('Error:', error), () => console.log('Completed') ); // Output: // Received: 1 // Received: 2 // Received: 3 // Received: 4 // Received: 5 // Completed ```
ಉದಾಹರಣೆ: ಈವೆಂಟ್‌ನಿಂದ ಅಬ್ಸರ್ವಬಲ್ ರಚಿಸುವುದು
```javascript import { fromEvent } from 'rxjs'; const button = document.getElementById('myButton'); const clickObservable = fromEvent(button, 'click'); clickObservable.subscribe( event => console.log('Button clicked!', event) ); ```
ಅಬ್ಸರ್ವಬಲ್‌ಗಳಿಗೆ ಚಂದಾದಾರರಾಗುವುದು:
ಒಂದು ಅಬ್ಸರ್ವಬಲ್‌ನಿಂದ ಮೌಲ್ಯಗಳನ್ನು ಸ್ವೀಕರಿಸಲು ಪ್ರಾರಂಭಿಸಲು, ನೀವು subscribe() ವಿಧಾನವನ್ನು ಬಳಸಿ ಅದಕ್ಕೆ ಚಂದಾದಾರರಾಗಬೇಕು. subscribe() ವಿಧಾನವು ಮೂರು ಆರ್ಗ್ಯುಮೆಂಟ್‌ಗಳನ್ನು ಸ್ವೀಕರಿಸಬಹುದು:
next: ಅಬ್ಸರ್ವಬಲ್‌ನಿಂದ ಹೊರಸೂಸಲ್ಪಟ್ಟ ಪ್ರತಿ ಮೌಲ್ಯಕ್ಕೂ ಕರೆಯಲ್ಪಡುವ ಫಂಕ್ಷನ್.error: ಅಬ್ಸರ್ವಬಲ್ ದೋಷವನ್ನು ಹೊರಸೂಸಿದರೆ ಕರೆಯಲ್ಪಡುವ ಫಂಕ್ಷನ್.complete: ಅಬ್ಸರ್ವಬಲ್ ಪೂರ್ಣಗೊಂಡಾಗ (ಸ್ಟ್ರೀಮ್‌ನ ಅಂತ್ಯವನ್ನು ಸೂಚಿಸಿದಾಗ) ಕರೆಯಲ್ಪಡುವ ಫಂಕ್ಷನ್.
subscribe() ವಿಧಾನವು ಒಂದು ಸಬ್‌ಸ್ಕ್ರಿಪ್ಶನ್ ವಸ್ತುವನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ, ಇದು ಅಬ್ಸರ್ವಬಲ್ ಮತ್ತು ಅಬ್ಸರ್ವರ್ ನಡುವಿನ ಸಂಪರ್ಕವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಹೆಚ್ಚಿನ ಮೌಲ್ಯಗಳು ಹೊರಸೂಸುವುದನ್ನು ತಡೆಯಲು ಅಬ್ಸರ್ವಬಲ್‌ನಿಂದ ಅನ್‌ಸಬ್‌ಸ್ಕ್ರೈಬ್ ಮಾಡಲು ನೀವು ಸಬ್‌ಸ್ಕ್ರಿಪ್ಶನ್ ವಸ್ತುವನ್ನು ಬಳಸಬಹುದು.
ಅಬ್ಸರ್ವಬಲ್‌ಗಳಿಂದ ಅನ್‌ಸಬ್‌ಸ್ಕ್ರೈಬ್ ಮಾಡುವುದು:
ಮೆಮೊರಿ ಲೀಕ್‌ಗಳನ್ನು ತಡೆಯಲು ಅನ್‌ಸಬ್‌ಸ್ಕ್ರೈಬ್ ಮಾಡುವುದು ನಿರ್ಣಾಯಕವಾಗಿದೆ, ವಿಶೇಷವಾಗಿ ದೀರ್ಘಕಾಲೀನ ಅಬ್ಸರ್ವಬಲ್‌ಗಳು ಅಥವಾ ಆಗಾಗ್ಗೆ ಮೌಲ್ಯಗಳನ್ನು ಹೊರಸೂಸುವ ಅಬ್ಸರ್ವಬಲ್‌ಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ. ಸಬ್‌ಸ್ಕ್ರಿಪ್ಶನ್ ವಸ್ತುವಿನ ಮೇಲೆ unsubscribe() ವಿಧಾನವನ್ನು ಕರೆಯುವ ಮೂಲಕ ನೀವು ಅಬ್ಸರ್ವಬಲ್‌ನಿಂದ ಅನ್‌ಸಬ್‌ಸ್ಕ್ರೈಬ್ ಮಾಡಬಹುದು.
```javascript import { interval } from 'rxjs'; const myInterval = interval(1000); const subscription = myInterval.subscribe( value => console.log('Interval:', value) ); // After 5 seconds, unsubscribe setTimeout(() => { subscription.unsubscribe(); console.log('Unsubscribed!'); }, 5000); // Output (approximately): // Interval: 0 // Interval: 1 // Interval: 2 // Interval: 3 // Interval: 4 // Unsubscribed! ```
RxJS ಆಪರೇಟರ್‌ಗಳು: ಡೇಟಾ ಸ್ಟ್ರೀಮ್‌ಗಳನ್ನು ಪರಿವರ್ತಿಸುವುದು ಮತ್ತು ಫಿಲ್ಟರ್ ಮಾಡುವುದು
RxJS ಆಪರೇಟರ್‌ಗಳು ಲೈಬ್ರರಿಯ ಹೃದಯಭಾಗವಾಗಿವೆ. ಅವು ನಿಮಗೆ ಅಬ್ಸರ್ವಬಲ್‌ಗಳನ್ನು ಘೋಷಣಾತ್ಮಕ ಮತ್ತು ಸಂಯೋಜಿತ ರೀತಿಯಲ್ಲಿ ಪರಿವರ್ತಿಸಲು, ಫಿಲ್ಟರ್ ಮಾಡಲು, ಸಂಯೋಜಿಸಲು ಮತ್ತು ನಿರ್ವಹಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತವೆ. ಹಲವಾರು ಆಪರೇಟರ್‌ಗಳು ಲಭ್ಯವಿವೆ, ಪ್ರತಿಯೊಂದೂ ಒಂದು ನಿರ್ದಿಷ್ಟ ಉದ್ದೇಶವನ್ನು ಪೂರೈಸುತ್ತದೆ. ಇಲ್ಲಿ ಕೆಲವು ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸುವ ಆಪರೇಟರ್‌ಗಳಿವೆ:
ರೂಪಾಂತರ ಆಪರೇಟರ್‌ಗಳು (Transformation Operators):
map(): ಅಬ್ಸರ್ವಬಲ್‌ನಿಂದ ಹೊರಸೂಸಲ್ಪಟ್ಟ ಪ್ರತಿ ಮೌಲ್ಯಕ್ಕೂ ಒಂದು ಫಂಕ್ಷನ್ ಅನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ ಮತ್ತು ಫಲಿತಾಂಶವನ್ನು ಹೊರಸೂಸುತ್ತದೆ. ಇದು ಅರೇಗಳಲ್ಲಿನmap()ವಿಧಾನದಂತೆಯೇ ಇರುತ್ತದೆ.pluck(): ಅಬ್ಸರ್ವಬಲ್‌ನಿಂದ ಹೊರಸೂಸಲ್ಪಟ್ಟ ಪ್ರತಿ ಮೌಲ್ಯದಿಂದ ನಿರ್ದಿಷ್ಟ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಹೊರತೆಗೆಯುತ್ತದೆ.scan(): ಮೂಲ ಅಬ್ಸರ್ವಬಲ್ ಮೇಲೆ ಅಕ್ಯುಮ್ಯುಲೇಟರ್ ಫಂಕ್ಷನ್ ಅನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ ಮತ್ತು ಪ್ರತಿ ಮಧ್ಯಂತರ ಫಲಿತಾಂಶವನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ.buffer(): ಮೂಲ ಅಬ್ಸರ್ವಬಲ್‌ನಿಂದ ಮೌಲ್ಯಗಳನ್ನು ಅರೇಯಲ್ಲಿ ಸಂಗ್ರಹಿಸುತ್ತದೆ ಮತ್ತು ನಿರ್ದಿಷ್ಟ ಷರತ್ತು ಪೂರೈಸಿದಾಗ ಅರೇಯನ್ನು ಹೊರಸೂಸುತ್ತದೆ.window():buffer()ನಂತೆಯೇ ಇರುತ್ತದೆ, ಆದರೆ ಅರೇಯನ್ನು ಹೊರಸೂಸುವ ಬದಲು, ಇದು ಮೌಲ್ಯಗಳ ವಿಂಡೋವನ್ನು ಪ್ರತಿನಿಧಿಸುವ ಅಬ್ಸರ್ವಬಲ್ ಅನ್ನು ಹೊರಸೂಸುತ್ತದೆ.
ಉದಾಹರಣೆ: map() ಆಪರೇಟರ್ ಬಳಸುವುದು
```javascript import { from } from 'rxjs'; import { map } from 'rxjs/operators'; const numbers = from([1, 2, 3, 4, 5]); const squaredNumbers = numbers.pipe( map(x => x * x) ); squaredNumbers.subscribe(value => console.log('Squared:', value)); // Output: // Squared: 1 // Squared: 4 // Squared: 9 // Squared: 16 // Squared: 25 ```
ಫಿಲ್ಟರಿಂಗ್ ಆಪರೇಟರ್‌ಗಳು (Filtering Operators):
filter(): ನಿರ್ದಿಷ್ಟ ಷರತ್ತನ್ನು ಪೂರೈಸುವ ಮೌಲ್ಯಗಳನ್ನು ಮಾತ್ರ ಹೊರಸೂಸುತ್ತದೆ.debounceTime(): ಯಾವುದೇ ಹೊಸ ಮೌಲ್ಯಗಳು ಹೊರಸೂಸದೆ ನಿರ್ದಿಷ್ಟ ಸಮಯ ಕಳೆದ ನಂತರ ಮೌಲ್ಯಗಳ ಹೊರಸೂಸುವಿಕೆಯನ್ನು ವಿಳಂಬಗೊಳಿಸುತ್ತದೆ. ಬಳಕೆದಾರರ ಇನ್‌ಪುಟ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ಮತ್ತು ಅತಿಯಾದ ವಿನಂತಿಗಳನ್ನು ತಡೆಯಲು ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ.distinctUntilChanged(): ಹಿಂದಿನ ಮೌಲ್ಯಕ್ಕಿಂತ ಭಿನ್ನವಾಗಿರುವ ಮೌಲ್ಯಗಳನ್ನು ಮಾತ್ರ ಹೊರಸೂಸುತ್ತದೆ.take(): ಅಬ್ಸರ್ವಬಲ್‌ನಿಂದ ಮೊದಲ N ಮೌಲ್ಯಗಳನ್ನು ಮಾತ್ರ ಹೊರಸೂಸುತ್ತದೆ.skip(): ಅಬ್ಸರ್ವಬಲ್‌ನಿಂದ ಮೊದಲ N ಮೌಲ್ಯಗಳನ್ನು ಬಿಟ್ಟು ಉಳಿದ ಮೌಲ್ಯಗಳನ್ನು ಹೊರಸೂಸುತ್ತದೆ.
ಉದಾಹರಣೆ: filter() ಆಪರೇಟರ್ ಬಳಸುವುದು
```javascript import { from } from 'rxjs'; import { filter } from 'rxjs/operators'; const numbers = from([1, 2, 3, 4, 5, 6]); const evenNumbers = numbers.pipe( filter(x => x % 2 === 0) ); evenNumbers.subscribe(value => console.log('Even:', value)); // Output: // Even: 2 // Even: 4 // Even: 6 ```
ಸಂಯೋಜನೆ ಆಪರೇಟರ್‌ಗಳು (Combination Operators):
merge(): ಬಹು ಅಬ್ಸರ್ವಬಲ್‌ಗಳನ್ನು ಒಂದೇ ಅಬ್ಸರ್ವಬಲ್‌ಗೆ ವಿಲೀನಗೊಳಿಸುತ್ತದೆ.concat(): ಬಹು ಅಬ್ಸರ್ವಬಲ್‌ಗಳನ್ನು ಒಟ್ಟುಗೂಡಿಸುತ್ತದೆ, ಪ್ರತಿ ಅಬ್ಸರ್ವಬಲ್‌ನಿಂದ ಮೌಲ್ಯಗಳನ್ನು ಅನುಕ್ರಮವಾಗಿ ಹೊರಸೂಸುತ್ತದೆ.combineLatest(): ಬಹು ಅಬ್ಸರ್ವಬಲ್‌ಗಳಿಂದ ಇತ್ತೀಚಿನ ಮೌಲ್ಯಗಳನ್ನು ಸಂಯೋಜಿಸುತ್ತದೆ ಮತ್ತು ಯಾವುದೇ ಮೂಲ ಅಬ್ಸರ್ವಬಲ್‌ಗಳು ಮೌಲ್ಯವನ್ನು ಹೊರಸೂಸಿದಾಗ ಹೊಸ ಮೌಲ್ಯವನ್ನು ಹೊರಸೂಸುತ್ತದೆ.zip(): ಬಹು ಅಬ್ಸರ್ವಬಲ್‌ಗಳಿಂದ ಮೌಲ್ಯಗಳನ್ನು ಅವುಗಳ ಸೂಚ್ಯಂಕದ ಆಧಾರದ ಮೇಲೆ ಸಂಯೋಜಿಸುತ್ತದೆ ಮತ್ತು ಪ್ರತಿ ಸಂಯೋಜನೆಗೆ ಹೊಸ ಮೌಲ್ಯವನ್ನು ಹೊರಸೂಸುತ್ತದೆ.withLatestFrom(): ಮೂಲ ಅಬ್ಸರ್ವಬಲ್‌ನ ಪ್ರಸ್ತುತ ಮೌಲ್ಯದೊಂದಿಗೆ ಮತ್ತೊಂದು ಅಬ್ಸರ್ವಬಲ್‌ನ ಇತ್ತೀಚಿನ ಮೌಲ್ಯವನ್ನು ಸಂಯೋಜಿಸುತ್ತದೆ.
ಉದಾಹರಣೆ: combineLatest() ಆಪರೇಟರ್ ಬಳಸುವುದು
```javascript import { interval, combineLatest } from 'rxjs'; import { map } from 'rxjs/operators'; const interval1 = interval(1000); const interval2 = interval(2000); const combinedIntervals = combineLatest( interval1, interval2, (x, y) => `Interval 1: ${x}, Interval 2: ${y}` ); combinedIntervals.subscribe(value => console.log(value)); // Output (approximately): // Interval 1: 0, Interval 2: 0 // Interval 1: 1, Interval 2: 0 // Interval 1: 1, Interval 2: 1 // Interval 1: 2, Interval 2: 1 // Interval 1: 2, Interval 2: 2 // ... ```
ಸಾಮಾನ್ಯ RxJS ಪ್ಯಾಟರ್ನ್‌ಗಳು
RxJS ಸಾಮಾನ್ಯ ಅಸಿಂಕ್ರೋನಸ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಕಾರ್ಯಗಳನ್ನು ಸರಳಗೊಳಿಸುವ ಹಲವಾರು ಶಕ್ತಿಯುತ ಪ್ಯಾಟರ್ನ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ:
ಡಿಬೌನ್ಸಿಂಗ್ (Debouncing):
debounceTime() ಆಪರೇಟರ್, ಯಾವುದೇ ಹೊಸ ಮೌಲ್ಯಗಳು ಹೊರಸೂಸದೆ ನಿರ್ದಿಷ್ಟ ಸಮಯ ಕಳೆದ ನಂತರ ಮೌಲ್ಯಗಳ ಹೊರಸೂಸುವಿಕೆಯನ್ನು ವಿಳಂಬಗೊಳಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ. ಇದು ಬಳಕೆದಾರರ ಇನ್‌ಪುಟ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು, ಉದಾಹರಣೆಗೆ ಸರ್ಚ್ ಕ್ವೆರಿಗಳು ಅಥವಾ ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಗಳು, ಅಲ್ಲಿ ನೀವು ಸರ್ವರ್‌ಗೆ ಅತಿಯಾದ ವಿನಂತಿಗಳನ್ನು ತಡೆಯಲು ಬಯಸುತ್ತೀರಿ, ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ.
ಉದಾಹರಣೆ: ಸರ್ಚ್ ಇನ್‌ಪುಟ್ ಅನ್ನು ಡಿಬೌನ್ಸ್ ಮಾಡುವುದು
```javascript import { fromEvent } from 'rxjs'; import { map, debounceTime, distinctUntilChanged } from 'rxjs/operators'; const searchInput = document.getElementById('searchInput'); const searchObservable = fromEvent(searchInput, 'keyup').pipe( map((event: any) => event.target.value), debounceTime(300), // Wait 300ms after each key press distinctUntilChanged() // Only emit if the value has changed ); searchObservable.subscribe(searchTerm => { console.log('Searching for:', searchTerm); // Make an API request to search for the term }); ```
ಥ್ರಾಟ್ಲಿಂಗ್ (Throttling):
throttleTime() ಆಪರೇಟರ್ ಅಬ್ಸರ್ವಬಲ್‌ನಿಂದ ಹೊರಸೂಸುವ ಮೌಲ್ಯಗಳ ದರವನ್ನು ಮಿತಿಗೊಳಿಸುತ್ತದೆ. ಇದು ನಿರ್ದಿಷ್ಟ ಸಮಯದ ವಿಂಡೋದಲ್ಲಿ ಹೊರಸೂಸಿದ ಮೊದಲ ಮೌಲ್ಯವನ್ನು ಹೊರಸೂಸುತ್ತದೆ ಮತ್ತು ವಿಂಡೋ ಮುಚ್ಚುವವರೆಗೆ ನಂತರದ ಮೌಲ್ಯಗಳನ್ನು ನಿರ್ಲಕ್ಷಿಸುತ್ತದೆ. ಸ್ಕ್ರಾಲ್ ಈವೆಂಟ್‌ಗಳು ಅಥವಾ ರಿಸೈಜ್ ಈವೆಂಟ್‌ಗಳಂತಹ ಈವೆಂಟ್‌ಗಳ ಆವರ್ತನವನ್ನು ಮಿತಿಗೊಳಿಸಲು ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ.
ಸ್ವಿಚಿಂಗ್ (Switching):
switchMap() ಆಪರೇಟರ್, ಮೂಲ ಅಬ್ಸರ್ವಬಲ್‌ನಿಂದ ಹೊಸ ಮೌಲ್ಯ ಹೊರಸೂಸಿದಾಗಲೆಲ್ಲಾ ಹೊಸ ಅಬ್ಸರ್ವಬಲ್‌ಗೆ ಬದಲಾಯಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ. ಹೊಸ ವಿನಂತಿಯನ್ನು ಪ್ರಾರಂಭಿಸಿದಾಗ ಬಾಕಿ ಇರುವ ವಿನಂತಿಗಳನ್ನು ರದ್ದುಗೊಳಿಸಲು ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ. ಉದಾಹರಣೆಗೆ, ಬಳಕೆದಾರರು ಸರ್ಚ್ ಇನ್‌ಪುಟ್‌ನಲ್ಲಿ ಹೊಸ ಅಕ್ಷರವನ್ನು ಟೈಪ್ ಮಾಡಿದಾಗ ಹಿಂದಿನ ಸರ್ಚ್ ವಿನಂತಿಯನ್ನು ರದ್ದುಗೊಳಿಸಲು ನೀವು switchMap() ಅನ್ನು ಬಳಸಬಹುದು.
ಉದಾಹರಣೆ: ಟೈಪ್‌ಹೆಡ್ ಸರ್ಚ್‌ಗಾಗಿ switchMap() ಬಳಸುವುದು
```javascript import { fromEvent, of } from 'rxjs'; import { map, debounceTime, distinctUntilChanged, switchMap, catchError } from 'rxjs/operators'; const searchInput = document.getElementById('searchInput'); const searchObservable = fromEvent(searchInput, 'keyup').pipe( map((event: any) => event.target.value), debounceTime(300), distinctUntilChanged(), switchMap(searchTerm => { // Make an API request to search for the term return searchAPI(searchTerm).pipe( catchError(error => { console.error('Error searching:', error); return of([]); // Return an empty array on error }) ); }) ); searchObservable.subscribe(results => { console.log('Search results:', results); // Update the UI with the search results }); function searchAPI(searchTerm: string) { // Simulate an API request return of([`Result for ${searchTerm} 1`, `Result for ${searchTerm} 2`]); } ```
RxJS ನ ಪ್ರಾಯೋಗಿಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು
RxJS ಒಂದು ಬಹುಮುಖ ಲೈಬ್ರರಿಯಾಗಿದ್ದು, ಇದನ್ನು ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಬಳಸಬಹುದು. ಇಲ್ಲಿ ಕೆಲವು ಸಾಮಾನ್ಯ ಬಳಕೆಯ ಪ್ರಕರಣಗಳಿವೆ:
- ಬಳಕೆದಾರರ ಇನ್‌ಪುಟ್ ನಿರ್ವಹಣೆ: ಕೀ ಪ್ರೆಸ್‌ಗಳು, ಮೌಸ್ ಕ್ಲಿಕ್‌ಗಳು ಮತ್ತು ಫಾರ್ಮ್ ಸಲ್ಲಿಕೆಗಳಂತಹ ಬಳಕೆದಾರರ ಇನ್‌ಪುಟ್ ಈವೆಂಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಲು RxJS ಅನ್ನು ಬಳಸಬಹುದು.
debounceTime()ಮತ್ತುthrottleTime()ನಂತಹ ಆಪರೇಟರ್‌ಗಳನ್ನು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಉತ್ತಮಗೊಳಿಸಲು ಮತ್ತು ಅತಿಯಾದ ವಿನಂತಿಗಳನ್ನು ತಡೆಯಲು ಬಳಸಬಹುದು. - ಅಸಿಂಕ್ರೋನಸ್ ಕಾರ್ಯಾಚರಣೆಗಳ ನಿರ್ವಹಣೆ: ನೆಟ್‌ವರ್ಕ್ ವಿನಂತಿಗಳು ಮತ್ತು ಟೈಮರ್‌ಗಳಂತಹ ಅಸಿಂಕ್ರೋನಸ್ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ನಿರ್ವಹಿಸಲು RxJS ಒಂದು ಶಕ್ತಿಯುತ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ.
switchMap()ಮತ್ತುmergeMap()ನಂತಹ ಆಪರೇಟರ್‌ಗಳನ್ನು ಏಕಕಾಲೀನ ವಿನಂತಿಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಮತ್ತು ಬಾಕಿ ಇರುವ ವಿನಂತಿಗಳನ್ನು ರದ್ದುಗೊಳಿಸಲು ಬಳಸಬಹುದು. - ನೈಜ-ಸಮಯದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವುದು: ಚಾಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಮತ್ತು ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ಗಳಂತಹ ನೈಜ-ಸಮಯದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು RxJS ಸೂಕ್ತವಾಗಿದೆ. ವೆಬ್‌ಸಾಕೆಟ್‌ಗಳು ಅಥವಾ ಸರ್ವರ್-ಸೆಂಟ್ ಈವೆಂಟ್‌ಗಳಿಂದ (SSE) ಡೇಟಾ ಸ್ಟ್ರೀಮ್‌ಗಳನ್ನು ಪ್ರತಿನಿಧಿಸಲು ಅಬ್ಸರ್ವಬಲ್‌ಗಳನ್ನು ಬಳಸಬಹುದು.
- ಸ್ಥಿತಿ ನಿರ್ವಹಣೆ (State Management): ಆಂಗ್ಯುಲರ್, ರಿಯಾಕ್ಟ್ ಮತ್ತು ವೂ.ಜೆಎಸ್ ನಂತಹ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳಲ್ಲಿ RxJS ಅನ್ನು ಸ್ಥಿತಿ ನಿರ್ವಹಣಾ ಪರಿಹಾರವಾಗಿ ಬಳಸಬಹುದು. ಅಪ್ಲಿಕೇಶನ್ ಸ್ಥಿತಿಯನ್ನು ಪ್ರತಿನಿಧಿಸಲು ಅಬ್ಸರ್ವಬಲ್‌ಗಳನ್ನು ಬಳಸಬಹುದು, ಮತ್ತು ಬಳಕೆದಾರರ ಕ್ರಿಯೆಗಳು ಅಥವಾ ಈವೆಂಟ್‌ಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯೆಯಾಗಿ ಸ್ಥಿತಿಯನ್ನು ಪರಿವರ್ತಿಸಲು ಮತ್ತು ನವೀಕರಿಸಲು ಆಪರೇಟರ್‌ಗಳನ್ನು ಬಳಸಬಹುದು.
ಜನಪ್ರಿಯ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳೊಂದಿಗೆ RxJS
ಆಂಗ್ಯುಲರ್ (Angular):
ಆಂಗ್ಯುಲರ್ ಅಸಿಂಕ್ರೋನಸ್ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಮತ್ತು ಡೇಟಾ ಸ್ಟ್ರೀಮ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಲು RxJS ಮೇಲೆ ಹೆಚ್ಚು ಅವಲಂಬಿತವಾಗಿದೆ. ಆಂಗ್ಯುಲರ್‌ನಲ್ಲಿನ HttpClient ಸೇವೆಯು ಅಬ್ಸರ್ವಬಲ್‌ಗಳನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ, ಮತ್ತು API ವಿನಂತಿಗಳಿಂದ ಹಿಂತಿರುಗಿದ ಡೇಟಾವನ್ನು ಪರಿವರ್ತಿಸಲು ಮತ್ತು ಫಿಲ್ಟರ್ ಮಾಡಲು RxJS ಆಪರೇಟರ್‌ಗಳನ್ನು ವ್ಯಾಪಕವಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ. ಆಂಗ್ಯುಲರ್‌ನ ಚೇಂಜ್ ಡಿಟೆಕ್ಷನ್ ಯಾಂತ್ರಿಕತೆಯು ಡೇಟಾ ಬದಲಾವಣೆಗಳಿಗೆ ಪ್ರತಿಕ್ರಿಯೆಯಾಗಿ UI ಅನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ನವೀಕರಿಸಲು RxJS ಅನ್ನು ಬಳಸಿಕೊಳ್ಳುತ್ತದೆ.
ಉದಾಹರಣೆ: ಆಂಗ್ಯುಲರ್‌ನ HttpClient ನೊಂದಿಗೆ RxJS ಬಳಸುವುದು
```typescript
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class DataService {
private apiUrl = 'https://api.example.com/data';
constructor(private http: HttpClient) { }
getData(): Observable
ರಿಯಾಕ್ಟ್ (React):
ರಿಯಾಕ್ಟ್ RxJS ಗೆ ಅಂತರ್ನಿರ್ಮಿತ ಬೆಂಬಲವನ್ನು ಹೊಂದಿಲ್ಲವಾದರೂ, rxjs-hooks ಅಥವಾ use-rx ನಂತಹ ಲೈಬ್ರರಿಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಅದನ್ನು ಸುಲಭವಾಗಿ ಸಂಯೋಜಿಸಬಹುದು. ಈ ಲೈಬ್ರರಿಗಳು ಕಸ್ಟಮ್ ಹುಕ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ, ಅದು ನಿಮಗೆ ಅಬ್ಸರ್ವಬಲ್‌ಗಳಿಗೆ ಚಂದಾದಾರರಾಗಲು ಮತ್ತು ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳೊಳಗೆ ಚಂದಾದಾರಿಕೆಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ರಿಯಾಕ್ಟ್‌ನಲ್ಲಿ ಅಸಿಂಕ್ರೋನಸ್ ಡೇಟಾ ಫೆಚಿಂಗ್, ಕಾಂಪೊನೆಂಟ್ ಸ್ಥಿತಿಯನ್ನು ನಿರ್ವಹಿಸುವುದು ಮತ್ತು ರಿಯಾಕ್ಟಿವ್ UI ಗಳನ್ನು ನಿರ್ಮಿಸಲು RxJS ಅನ್ನು ಬಳಸಬಹುದು.
ಉದಾಹರಣೆ: ರಿಯಾಕ್ಟ್ ಹುಕ್ಸ್‌ನೊಂದಿಗೆ RxJS ಬಳಸುವುದು
```javascript import React, { useState, useEffect } from 'react'; import { Subject } from 'rxjs'; import { scan } from 'rxjs/operators'; function Counter() { const [count, setCount] = useState(0); const increment$ = new Subject(); useEffect(() => { const subscription = increment$.pipe( scan(acc => acc + 1, 0) ).subscribe(setCount); return () => subscription.unsubscribe(); }, []); return (
Count: {count}
ವೂ.ಜೆಎಸ್ (Vue.js):
ವೂ.ಜೆಎಸ್ ಸಹ ಸ್ಥಳೀಯ RxJS ಏಕೀಕರಣವನ್ನು ಹೊಂದಿಲ್ಲ, ಆದರೆ ಇದನ್ನು vue-rx ನಂತಹ ಲೈಬ್ರರಿಗಳೊಂದಿಗೆ ಅಥವಾ ವೂ ಕಾಂಪೊನೆಂಟ್‌ಗಳೊಳಗೆ ಚಂದಾದಾರಿಕೆಗಳನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ನಿರ್ವಹಿಸುವ ಮೂಲಕ ಬಳಸಬಹುದು. ರಿಯಾಕ್ಟ್‌ನಲ್ಲಿರುವಂತೆಯೇ, ಅಸಿಂಕ್ರೋನಸ್ ಡೇಟಾ ಫೆಚಿಂಗ್ ಮತ್ತು ಕಾಂಪೊನೆಂಟ್ ಸ್ಥಿತಿಯನ್ನು ನಿರ್ವಹಿಸುವಂತಹ ಉದ್ದೇಶಗಳಿಗಾಗಿ ವೂ.ಜೆಎಸ್‌ನಲ್ಲಿ RxJS ಅನ್ನು ಬಳಸಬಹುದು.
RxJS ಬಳಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು
- ಅಬ್ಸರ್ವಬಲ್‌ಗಳಿಂದ ಅನ್‌ಸಬ್‌ಸ್ಕ್ರೈಬ್ ಮಾಡಿ: ಮೆಮೊರಿ ಲೀಕ್‌ಗಳನ್ನು ತಡೆಯಲು ಇನ್ನು ಮುಂದೆ ಅಗತ್ಯವಿಲ್ಲದಿದ್ದಾಗ ಯಾವಾಗಲೂ ಅಬ್ಸರ್ವಬಲ್‌ಗಳಿಂದ ಅನ್‌ಸಬ್‌ಸ್ಕ್ರೈಬ್ ಮಾಡಿ. ಅನ್‌ಸಬ್‌ಸ್ಕ್ರೈಬ್ ಮಾಡಲು
subscribe()ವಿಧಾನದಿಂದ ಹಿಂತಿರುಗಿದ ಸಬ್‌ಸ್ಕ್ರಿಪ್ಶನ್ ವಸ್ತುವನ್ನು ಬಳಸಿ. pipe()ವಿಧಾನವನ್ನು ಬಳಸಿ: ಓದಬಲ್ಲ ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲ ರೀತಿಯಲ್ಲಿ ಆಪರೇಟರ್‌ಗಳನ್ನು ಒಟ್ಟಿಗೆ ಜೋಡಿಸಲುpipe()ವಿಧಾನವನ್ನು ಬಳಸಿ.- ದೋಷಗಳನ್ನು ನಾಜೂಕಿನಿಂದ ನಿರ್ವಹಿಸಿ: ದೋಷಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಮತ್ತು ಅವು ಅಬ್ಸರ್ವಬಲ್ ಚೈನ್‌ನಲ್ಲಿ ಮೇಲಕ್ಕೆ ಹರಡುವುದನ್ನು ತಡೆಯಲು
catchError()ಆಪರೇಟರ್ ಅನ್ನು ಬಳಸಿ. - ಸರಿಯಾದ ಆಪರೇಟರ್‌ಗಳನ್ನು ಆರಿಸಿ: ನಿಮ್ಮ ನಿರ್ದಿಷ್ಟ ಬಳಕೆಯ ಪ್ರಕರಣಕ್ಕೆ ಸೂಕ್ತವಾದ ಆಪರೇಟರ್‌ಗಳನ್ನು ಆಯ್ಕೆಮಾಡಿ. RxJS ವ್ಯಾಪಕವಾದ ಆಪರೇಟರ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ, ಆದ್ದರಿಂದ ಅವುಗಳ ಉದ್ದೇಶ ಮತ್ತು ನಡವಳಿಕೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಮುಖ್ಯ.
- ಅಬ್ಸರ್ವಬಲ್‌ಗಳನ್ನು ಸರಳವಾಗಿಡಿ: ಅತಿಯಾದ ಸಂಕೀರ್ಣ ಅಬ್ಸರ್ವಬಲ್‌ಗಳನ್ನು ರಚಿಸುವುದನ್ನು ತಪ್ಪಿಸಿ. ಸಂಕೀರ್ಣ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ಚಿಕ್ಕ, ಹೆಚ್ಚು ನಿರ್ವಹಿಸಬಲ್ಲ ಅಬ್ಸರ್ವಬಲ್‌ಗಳಾಗಿ ವಿಭಜಿಸಿ.
ಸುಧಾರಿತ RxJS ಪರಿಕಲ್ಪನೆಗಳು
ಸಬ್ಜೆಕ್ಟ್ಸ್ (Subjects):
ಸಬ್ಜೆಕ್ಟ್ಸ್ ಅಬ್ಸರ್ವಬಲ್‌ಗಳು ಮತ್ತು ಅಬ್ಸರ್ವರ್‌ಗಳೆರಡಾಗಿಯೂ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ. ಅವು ನಿಮಗೆ ಬಹು ಚಂದಾದಾರರಿಗೆ ಡೇಟಾವನ್ನು ಮಲ್ಟಿಕಾಸ್ಟ್ ಮಾಡಲು ಮತ್ತು ಸ್ಟ್ರೀಮ್‌ಗೆ ಡೇಟಾವನ್ನು ಪುಶ್ ಮಾಡಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತವೆ. ವಿವಿಧ ರೀತಿಯ ಸಬ್ಜೆಕ್ಟ್‌ಗಳಿವೆ, ಅವುಗಳೆಂದರೆ:
- Subject: ಎಲ್ಲಾ ಚಂದಾದಾರರಿಗೆ ಮೌಲ್ಯಗಳನ್ನು ಮಲ್ಟಿಕಾಸ್ಟ್ ಮಾಡುವ ಮೂಲ ಸಬ್ಜೆಕ್ಟ್.
- BehaviorSubject: ಆರಂಭಿಕ ಮೌಲ್ಯದ ಅಗತ್ಯವಿದೆ ಮತ್ತು ಹೊಸ ಚಂದಾದಾರರಿಗೆ ಪ್ರಸ್ತುತ ಮೌಲ್ಯವನ್ನು ಹೊರಸೂಸುತ್ತದೆ.
- ReplaySubject: ನಿರ್ದಿಷ್ಟ ಸಂಖ್ಯೆಯ ಮೌಲ್ಯಗಳನ್ನು ಬಫರ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ಅವುಗಳನ್ನು ಹೊಸ ಚಂದಾದಾರರಿಗೆ ಮರುಪ್ರಸಾರ ಮಾಡುತ್ತದೆ.
- AsyncSubject: ಅಬ್ಸರ್ವಬಲ್ ಪೂರ್ಣಗೊಂಡಾಗ ಕೊನೆಯ ಮೌಲ್ಯವನ್ನು ಮಾತ್ರ ಹೊರಸೂಸುತ್ತದೆ.
ಶೆಡ್ಯೂಲರ್‌ಗಳು (Schedulers):
ಶೆಡ್ಯೂಲರ್‌ಗಳು ಅಬ್ಸರ್ವಬಲ್‌ಗಳ ಕನ್‌ಕರೆನ್ಸಿಯನ್ನು ನಿಯಂತ್ರಿಸುತ್ತವೆ. ಅವು ನಿಮಗೆ ಕೋಡ್ ಅನ್ನು ಸಿಂಕ್ರೋನಸ್ ಆಗಿ ಅಥವಾ ಅಸಿಂಕ್ರೋನಸ್ ಆಗಿ, ವಿವಿಧ ಥ್ರೆಡ್‌ಗಳಲ್ಲಿ, ಅಥವಾ ನಿರ್ದಿಷ್ಟ ವಿಳಂಬಗಳೊಂದಿಗೆ ಕಾರ್ಯಗತಗೊಳಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತವೆ. RxJS ಹಲವಾರು ಅಂತರ್ನಿರ್ಮಿತ ಶೆಡ್ಯೂಲರ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ, ಅವುಗಳೆಂದರೆ:
queueScheduler: ಪ್ರಸ್ತುತ ಎಕ್ಸಿಕ್ಯೂಶನ್ ಸಂದರ್ಭದ ನಂತರ, ಪ್ರಸ್ತುತ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಥ್ರೆಡ್‌ನಲ್ಲಿ ಕಾರ್ಯಗತಗೊಳಿಸಲು ಕಾರ್ಯಗಳನ್ನು ನಿಗದಿಪಡಿಸುತ್ತದೆ.asapScheduler: ಪ್ರಸ್ತುತ ಎಕ್ಸಿಕ್ಯೂಶನ್ ಸಂದರ್ಭದ ನಂತರ, ಸಾಧ್ಯವಾದಷ್ಟು ಬೇಗ, ಪ್ರಸ್ತುತ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಥ್ರೆಡ್‌ನಲ್ಲಿ ಕಾರ್ಯಗತಗೊಳಿಸಲು ಕಾರ್ಯಗಳನ್ನು ನಿಗದಿಪಡಿಸುತ್ತದೆ.asyncScheduler:setTimeoutಅಥವಾsetIntervalಬಳಸಿ ಅಸಿಂಕ್ರೋನಸ್ ಆಗಿ ಕಾರ್ಯಗತಗೊಳಿಸಲು ಕಾರ್ಯಗಳನ್ನು ನಿಗದಿಪಡಿಸುತ್ತದೆ.animationFrameScheduler: ಮುಂದಿನ ಆನಿಮೇಷನ್ ಫ್ರೇಮ್‌ನಲ್ಲಿ ಕಾರ್ಯಗತಗೊಳಿಸಲು ಕಾರ್ಯಗಳನ್ನು ನಿಗದಿಪಡಿಸುತ್ತದೆ.
ತೀರ್ಮಾನ
RxJS ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ ರಿಯಾಕ್ಟಿವ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಒಂದು ಶಕ್ತಿಯುತ ಲೈಬ್ರರಿಯಾಗಿದೆ. ಅಬ್ಸರ್ವಬಲ್‌ಗಳು, ಆಪರೇಟರ್‌ಗಳು ಮತ್ತು ಸಾಮಾನ್ಯ ಪ್ಯಾಟರ್ನ್‌ಗಳನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಹೆಚ್ಚು ರೆಸ್ಪಾನ್ಸಿವ್, ಸ್ಕೇಲೆಬಲ್ ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು. ನೀವು ಆಂಗ್ಯುಲರ್, ರಿಯಾಕ್ಟ್, ವೂ.ಜೆಎಸ್, ಅಥವಾ ವೆನಿಲ್ಲಾ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುತ್ತಿರಲಿ, RxJS ಅಸಿಂಕ್ರೋನಸ್ ಡೇಟಾ ಸ್ಟ್ರೀಮ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುವ ಮತ್ತು ಸಂಕೀರ್ಣ UI ಗಳನ್ನು ನಿರ್ಮಿಸುವ ನಿಮ್ಮ ಸಾಮರ್ಥ್ಯವನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸುತ್ತದೆ.
RxJS ನೊಂದಿಗೆ ರಿಯಾಕ್ಟಿವ್ ಪ್ರೋಗ್ರಾಮಿಂಗ್‌ನ ಶಕ್ತಿಯನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ ಮತ್ತು ನಿಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗಾಗಿ ಹೊಸ ಸಾಧ್ಯತೆಗಳನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಿ!