Rxjs से ऑब्जर्वेबल आयात करने का सबसे अच्छा तरीका

Question 1

मेरे कोणीय 2 ऐप में मेरे पास एक सेवा है Observableजो rxjsपुस्तकालय से कक्षा का उपयोग करती है ।

import { Observable } from 'rxjs';

फिलहाल मैं सिर्फ Observableइसलिए इस्तेमाल कर रहा हूं ताकि toPromise()फंक्शन का इस्तेमाल कर सकूं।

मैं एक और StackOverflow प्रश्न में पढ़ता हूं कि इस तरह से आयात करना और आयात करना भी पुस्तकालय rxjs/Rxसे अनावश्यक सामान की एक पूरी बहुत आयात rxjsकरेगा जो पेज लोड समय और / या कोड आधार को बढ़ाएगा।

मेरा सवाल यह है कि आयात करने का सबसे अच्छा तरीका क्या है, Observableइसलिए मैं toPromise()फ़ंक्शन का उपयोग कर सकता हूं और बिना सब कुछ आयात कर सकता हूं ?

Question 2

Rxjs v 6. *

यह आरएक्सजे के नए संस्करण के साथ सरल हो गया।

1) संचालक

import {map} from 'rxjs/operators';

२) अन्य

import {Observable,of, from } from 'rxjs';

चाइनिंग के बजाय हमें पाइप करने की आवश्यकता है। उदाहरण के लिए

पुराना सिंटैक्स:

source.map().switchMap().subscribe()

नया सिंटैक्स:

source.pipe(map(), switchMap()).subscribe()

नोट: कुछ ऑपरेटरों का नाम आरक्षित शब्दों के साथ टकराव के कारण नाम परिवर्तन है! इसमें शामिल है:

do-> tap,

catch -> catchError

switch -> switchAll

finally -> finalize

Rxjs v 5. *

मैं खुद को मदद करने के लिए आंशिक रूप से यह उत्तर लिख रहा हूं क्योंकि मैं हर बार डॉक्स की जांच करता रहता हूं कि मुझे एक ऑपरेटर को आयात करने की आवश्यकता है। मुझे बताएं कि क्या कुछ बेहतर तरीके से किया जा सकता है।

1) `import { Rx } from 'rxjs/Rx'`;

इससे पूरा पुस्तकालय आयात होता है। फिर आपको प्रत्येक ऑपरेटर को लोड करने के बारे में चिंता करने की आवश्यकता नहीं है। लेकिन आपको आरएक्स को जोड़ना होगा। मुझे उम्मीद है कि ट्री-शेकिंग केवल आवश्यक फ़ंक्शंस को ऑप्टिमाइज़ और पिक करेगा (सत्यापित करने की आवश्यकता है) जैसा कि टिप्पणियों में बताया गया है, ट्री- ~~शेकिंग~~ मदद नहीं कर सकता है। तो यह अनुकूलित तरीका नहीं है।

public cache = new Rx.BehaviorSubject('');

या आप अलग-अलग ऑपरेटरों को आयात कर सकते हैं ।

यह आपके एप्लिकेशन को केवल उन फ़ाइलों का उपयोग करने का अनुकूलन करेगा :

2) `import { _ } from 'rxjs/___';`

यह सिंटैक्स आमतौर पर मुख्य वस्तु जैसे Rxस्वयं या Observableआदि के लिए उपयोग किया जाता है ।

वे कीवर्ड जिन्हें इस सिंटैक्स के साथ आयात किया जा सकता है

 Observable, Observer, BehaviorSubject, Subject, ReplaySubject

3) `import 'rxjs/add/observable/__________';`

5 कोणीय के लिए अद्यतन

Angular 5 के साथ, जो rxjs 5.5.2+ का उपयोग करता है

import { empty } from 'rxjs/observable/empty';
import { concat} from 'rxjs/observable/concat';

ये आमतौर पर सीधे अवलोकन के साथ होते हैं। उदाहरण के लिए

Observable.from()
Observable.of()

ऐसे अन्य कीवर्ड जिन्हें इस सिंटैक्स का उपयोग करके आयात किया जा सकता है:

concat, defer, empty, forkJoin, from, fromPromise, if, interval, merge, of, 
range, throw, timer, using, zip

4) `import 'rxjs/add/operator/_________';`

5 कोणीय के लिए अद्यतन

Angular 5 के साथ, जो rxjs 5.5.2+ का उपयोग करता है

import { filter } from 'rxjs/operators/filter';
import { map } from 'rxjs/operators/map';

ये आमतौर पर ऑब्जर्वेबल बनाए जाने के बाद स्ट्रीम में आते हैं। जैसा flatMapइस कोड स्निपेट में:

Observable.of([1,2,3,4])
          .flatMap(arr => Observable.from(arr));

इस सिंटैक्स का उपयोग करने वाले अन्य ऐसे कीवर्ड:

audit, buffer, catch, combineAll, combineLatest, concat, count, debounce, delay, 
distinct, do, every, expand, filter, finally, find , first, groupBy,
ignoreElements, isEmpty, last, let, map, max, merge, mergeMap, min, pluck, 
publish, race, reduce, repeat, scan, skip, startWith, switch, switchMap, take, 
takeUntil, throttle, timeout, toArray, toPromise, withLatestFrom, zip

FlatMap : flatMapउपनाम है mergeMapताकि हम mergeMapका उपयोग करने के लिए आयात करने की आवश्यकता है flatMap।

/addआयात के लिए ध्यान दें :

हमें केवल पूरे प्रोजेक्ट में एक बार आयात करना होगा। तो यह एक ही जगह पर करने की सलाह दी। यदि वे कई फ़ाइलों में शामिल हैं, और उनमें से एक को हटा दिया गया है, तो बिल्ड गलत कारणों से विफल हो जाएगा।

Question 3

आरएक्सजेएस 6 के लिए अपडेट (अप्रैल 2018)

अब सीधे आयात करना पूरी तरह से ठीक है rxjs। (जैसा कि कोणीय 6+ में देखा जा सकता है)। से आयात करना rxjs/operatorsभी ठीक है और दुनिया भर में ऑपरेटरों को आयात करना अब संभव नहीं है (रिफैक्टरिंग rxjs 6और नए दृष्टिकोण के लिए प्रमुख कारणों में से एक pipe)। इस पेड़ के लिए धन्यवाद अब भी इस्तेमाल किया जा सकता है।

Rxjs रेपो से नमूना कोड:

import { Observable, Subject, ReplaySubject, from, of, range } from 'rxjs';
import { map, filter, switchMap } from 'rxjs/operators';

range(1, 200)
  .pipe(filter(x => x % 2 === 1), map(x => x + x))
  .subscribe(x => console.log(x));

Rxjs के लिए पश्चगामी संगतता <6?

rxjs टीम ने npm पर एक अनुकूलता पैकेज जारी किया जो बहुत ज्यादा स्थापित और प्ले है। इस सबके साथ आपकाrxjs 5.x कोड बिना किसी समस्या के चलना चाहिए। यह विशेष रूप से अब उपयोगी है जब अधिकांश निर्भरताएं (अर्थात कोणीय के लिए मॉड्यूल) अभी तक अपडेट नहीं की गई हैं।

Question 4

एक चीज जो मैंने सीखी है वह है कठिन तरीका लगातार

मिश्रण के लिए बाहर देखो:

 import { BehaviorSubject } from "rxjs";

साथ में

 import { BehaviorSubject } from "rxjs/BehaviorSubject";

यह संभवत: ठीक उसी तरह से काम करेगा जब आप किसी अन्य कक्षा में वस्तु को पास करने की कोशिश करेंगे (जहां आपने इसे दूसरी तरह से किया था) और फिर यह विफल हो सकता है

 (myBehaviorSubject instanceof Observable)

यह विफल हो जाता है क्योंकि प्रोटोटाइप श्रृंखला अलग होगी और यह झूठी होगी।

मैं यह समझने का नाटक नहीं कर सकता कि क्या हो रहा है, लेकिन कभी-कभी मैं इसमें भाग लेता हूं और लंबे प्रारूप में बदलने की आवश्यकता होती है।

Rxjs से ऑब्जर्वेबल आयात करने का सबसे अच्छा तरीका

Rxjs v 6. *

1) संचालक

२) अन्य

Rxjs v 5. *

1) import { Rx } from 'rxjs/Rx';

2) import { _______ } from 'rxjs/_________';

3) import 'rxjs/add/observable/__________';

4) import 'rxjs/add/operator/_________';

1) `import { Rx } from 'rxjs/Rx'`;

2) `import { _ } from 'rxjs/___';`

3) `import 'rxjs/add/observable/__________';`

4) `import 'rxjs/add/operator/_________';`