rxjs에서 관찰 가능한 항목을 가져오는 가장 좋은 방법

rxjs에서 관찰 가능한 항목을 가져오는 가장 좋은 방법

나의 각진 2 앱에는 다음을 사용하는 서비스가 있습니다.Observable로부터의 클래스rxjs도서관.

import { Observable } from 'rxjs';

지금은 그냥 사용하는 중입니다.Observable제가 사용할 수 있습니다.toPromise()기능.

다른 StackOverflow 질문에서 이런 방식으로 가져오기도 하고 가져오기도 하는 질문을 읽었습니다.rxjs/Rx불필요한 많은 것들을 수입할 것입니다.rxjs페이지 로드 시간 및/또는 코드 기반을 증가시키는 라이브러리입니다.

제 질문은, 수입하는 가장 좋은 방법이 무엇인가 하는 것입니다.Observable그래서 나는 그것을 사용할 수 있습니다.toPromise()다른 모든 것을 가져올 필요 없이 기능합니까?

Rxjs v 6.*

그것은 새로운 버전의 rxjs로 단순해졌습니다.

연산자

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';

전체 라이브러리를 가져옵니다.그러면 각 연산자를 로드할 걱정은 없지만 Rx를 추가해야 합니다.트리 셰이킹이 최적화되고 필요한 기능만 선택하기를 바랍니다(검증 필요). 코멘트에서 언급했듯이 트리 셰이킹은 도움이 되지 않습니다.그래서 이것은 최적화된 방법이 아닙니다.

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

---

또는 개별 연산자를 가져올 수 있습니다.

그러면 해당 파일만 사용하도록 앱을 최적화합니다.

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

이 구문은 일반적으로 다음과 같은 주요 개체에 사용됩니다.Rx그 자체 또는Observable기타.,

이 구문으로 가져올 수 있는 키워드

 Observable, Observer, BehaviorSubject, Subject, ReplaySubject

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

Angular 5에 대한 업데이트

Rxjs 5.5.2+를 사용하는 Angular 5의 경우

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/_________';

Angular 5에 대한 업데이트

Rxjs 5.5.2+를 사용하는 Angular 5의 경우

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에 대한 별칭입니다.mergeMap그래서 우리는 수입해야 합니다.mergeMap사용할flatMap.

---

가져오기에 대한 참고:

우리는 전체 프로젝트에서 한 번만 수입하면 됩니다.그래서 한 곳에서 하는 것이 좋습니다.여러 파일에 포함되어 있는데 그 중 하나가 삭제되면 잘못된 이유로 빌드가 실패합니다.

RxJS 6에 대한 업데이트(2018년 4월)

이는직수수있다니습할입에서 수입하는 하게 좋습니다.rxjs(Angular 6+에서 볼 수 있듯이).에서 가져오기rxjs/operators가 없으며 더 를 글로벌하게 수 (는 주요 중 ).rxjs 6그리고 새로운 접근법을 사용합니다.pipe이 트리 쉐이킹 덕분에 이제도 사용할 수 있습니다.

rxjs repo의 샘플 코드:

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코드는 문제없이 실행되어야 합니다.이 기능은 대부분의 종속성(즉, Angular에 대한 모듈)이 아직 업데이트되지 않은 경우에 특히 유용합니다.

내가 힘들게 배운 한 가지는 일관성이 있다는 것입니다.

혼합 주의:

 import { BehaviorSubject } from "rxjs";

와 함께

 import { BehaviorSubject } from "rxjs/BehaviorSubject";

개체를 다른 클래스로 전달하려고 시도할 때까지는 이 작업이 잘 작동하지만(다른 방법으로 전달한 경우) 실패할 수 있습니다.

 (myBehaviorSubject instanceof Observable)

프로토타입 체인이 다르므로 실패하고 잘못된 것입니다.

정확히 무슨 일이 일어나고 있는지 이해하는 척할 수는 없지만 가끔 이런 상황에 부딪혀서 더 긴 형식으로 바꿔야 할 때가 있습니다.

언급URL : https://stackoverflow.com/questions/42376972/best-way-to-import-observable-from-rxjs