Program Club

rxJS의 파이프는 무엇입니까?

proclub 2020. 11. 28. 12:48
반응형

rxJS의 파이프는 무엇입니까?


기본 컨셉이있는 것 같지만 모호한 부분이 있습니다

그래서 일반적으로 이것은 관찰 가능을 사용하는 방법입니다.

observable.subscribe(x => {

})

데이터를 필터링하려면 다음을 사용할 수 있습니다.

import { first, last, map, reduce, find, skipWhile } from 'rxjs/operators';
observable.pipe(
    map(x => {return x}),
    first()
    ).subscribe(x => {

})

나는 또한 이것을 할 수있다 :

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/first';

observable.map(x => {return x}).first().subscribe(x => {

})

그래서 내 질문은 다음과 같습니다.

  1. 차이점은 무엇입니까?
  2. 차이가 없다면 함수 파이프가 존재하는 이유는 무엇입니까?
  3. 이러한 함수에 다른 가져 오기가 필요한 이유는 무엇입니까?

"pipable"(이전의 "lettable") 연산자는 RxJS 5.5 이후 연산자를 사용 하는 현재 권장되는 방법 입니다.

공식 문서 https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md 를 읽는 것이 좋습니다.

가장 큰 차이점은 사용자 지정 연산자를 만드는 것이 더 쉽고, Observable두 개의 다른 당사자가 같은 이름의 연산자를 만들려고 할 때 충돌을 일으킬 수있는 일부 전역 개체를 변경하지 않으면 서 트리 쉐이킹이 더 좋다는 것 입니다.

import각 연산자에 대해 별도의 문을 사용 'rxjs/add/operator/first'하는 것은 더 작은 앱 번들을 만드는 방법이었습니다. 전체 RxJS 라이브러리 대신 필요한 연산자 만 가져 오면 전체 번들 크기를 크게 줄일 수 있습니다. 그러나 컴파일러는 'rxjs/add/operator/first'코드에서 실제로 필요하기 때문에 가져 왔는지 또는 코드를 리팩토링 할 때 제거하는 것을 잊었 는지 알 수 없습니다 . 이는 사용하지 않는 가져 오기가 자동으로 무시되는 pipable 연산자를 사용하는 장점 중 하나입니다.


파이프 방식

이 모든 것이 멋져 보이지만 여전히 매우 장황합니다. RxJS 5.5이제 옵저버 블 덕분에 인스턴스에서 사용할 수있는 파이프 메서드가 있으므로 모든 순수 함수 연산자로 파이프를 호출하여 위의 코드를 정리할 수 있습니다.

그게 무슨 뜻입니까?

즉, Observable 인스턴스에서 이전에 사용한 모든 연산자는에서 순수 함수로 사용할 수 있습니다 rxjs/operators. 이렇게하면 Observable을 확장하는 사용자 지정 관찰 가능 항목을 만든 다음 자신의 사용자 지정 항목을 만들기 위해 리프트를 덮어 써야하는 모든 종류의 프로그래밍 체조에 의존하지 않고도 연산자 구성을 구축하거나 연산자를 재사용 할 수 있습니다.

const { Observable } = require('rxjs/Rx')
const { filter, map, reduce,  } = require('rxjs/operators')
const { pipe } = require('rxjs/Rx')

const filterOutEvens = filter(x => x % 2)
const doubleBy = x => map(value => value * x);
const sum = reduce((acc, next) => acc + next, 0);
const source$ = Observable.range(0, 10)

source$.pipe(
  filterOutEvens, 
  doubleBy(2), 
  sum)
  .subscribe(console.log); // 50

내가 생각 해낸 좋은 요약은 다음과 같습니다.

It decouples the streaming operations (map, filter, reduce...) from the core functionality(subscribing, piping). By piping operations instead of chaining, it doesn't pollute the prototype of Observable making it easier to do tree shaking.

See https://github.com/ReactiveX/rxjs/blob/master/doc/pipeable-operators.md#why

Problems with the patched operators for dot-chaining are:

Any library that imports a patch operator will augment the Observable.prototype for all consumers of that library, creating blind dependencies. If the library removes their usage, they unknowingly break everyone else. With pipeables, you have to import the operators you need into each file you use them in.

Operators patched directly onto the prototype are not "tree-shakeable" by tools like rollup or webpack. Pipeable operators will be as they are just functions pulled in from modules directly.

Unused operators that are being imported in apps cannot be detected reliably by any sort of build tooling or lint rule. That means that you might import scan, but stop using it, and it's still being added to your output bundle. With pipeable operators, if you're not using it, a lint rule can pick it up for you.

Functional composition is awesome. Building your own custom operators becomes much, much easier, and now they work and look just like all other operators from rxjs. You don't need to extend Observable or override lift anymore.

참고URL : https://stackoverflow.com/questions/48668701/what-is-pipe-for-in-rxjs

반응형