RXJS Observable 출력 이해 문제

Question

저는 rxjs를 처음 접하고 배우려고 노력하고 있습니다.

내가 통해 읽고 있었다 이 매체 기사 이 RXJS 출력을 이해하려고 노력 :

import {Observable} from 'rxjs-es';
let output = Observable.interval(500)
             .map(i => [1,2,3,4,5,6][i]);

let result = output.map(num1 => num1)
    .filter(num1 => num1 > 4)
    .reduce((num1, num2) => num1 + num2);

result.subscribe(number => console.log(number));

출력 : 27

나는 출력이 어떻게 27으로 밝혀 졌는지, 그리고 그 감소가 어떻게 작동하는지 이해하지 못합니다 (그리고 감속기에 대한 두 가지 인수는 무엇입니까).

누군가가 무슨 일이 일어나고 있는지 가르쳐 줄 수 있습니까? (나는 그것을 codesandbox에서 실행하려고 시도했지만이 코드를 실행할 때 오류가 발생합니다)

Answer 1

이해 Filter와 Reduce운영자

다른 사람들이 의견에서 언급했듯이 참조하는 기사는 구문이 다른 이전 버전의 rxjs를 사용하고 있습니다. 이 예에서는 버전 6에서 시작된 최신 구문을 사용합니다.

rxjs에는 스트림을 통해 방출되는 값을 변환하는 데 사용할 수있는 다양한 연산자가 있습니다. 일반적으로 다음과 같이 가져옵니다.

import { filter, reduce } from 'rxjs';

값의 흐름을 생성하는 데 사용할 수있는 많은 생성기 함수도 있습니다. 밀리 초 interval마다 순차 정수를 방출하는 스트림을 생성하는 이러한 함수 중 하나입니다 n. 다음과 같이 가져옴 :

import { interval } from 'rxjs/operators';

간단한 스트림을 만들어 보겠습니다.

number$ = interval(1000); // emit number every 1 second
// output: 0, 1, 2, 3, 4, 5...

이 흐름에 연산자를 적용하여 배출량을 변환 할 수 있습니다.

의 사용법 filter은 매우 간단합니다. 주어진 진리 테스트를 통과하는 값을 내 보냅니다 (정확히 Array.filter()방법 과 동일 ).

numbersLessThan4$ = numbers$.pipe(
    filter(number => number < 4)
);
// output: 0, 1, 2, 3

reduce연산자는 좀 더 복잡하고 단지처럼 동작 Array.reduce()방법. 함수는 각 방출 값에 적용되며 다음 방출이 평가 될 때 참조 할 수있는 값을 저장할 수 있습니다.

reduce두 개의 매개 변수를 사용합니다. 첫 번째는 현재 방출 ( cur)과 이전 누적 결과 ( acc) 를 수신하고 새로운 누적 값을 반환하는 함수입니다. 두 번째는에 대한 초기 값입니다 acc.

예:

sumOfNumbers$ = numbers$.pipe(
    reduce((acc, cur) => acc + cur, 0)
);

따라서 처음 3 개의 숫자를 방출 reduce할 때 무엇을하는지 살펴 보겠습니다 numbers$.

• 0
  • cur 현재 방출 값을받습니다. 0
  • acc 제공된 기본값으로 시작 0
  • 표현식이 acc + cur반환0
• 1
  • cur 현재 방출 값을받습니다. 1
  • acc 이전에 반환 된 값을받습니다. 0
  • 표현식이 acc + cur반환1
• 2
  • cur 현재 방출 값을받습니다. 2
  • acc 이전에 반환 된 값을받습니다. 1
  • 표현식이 acc + cur반환3

그래서 이것은 멋지다. 간단한 코드 줄에 많은 논리를 넣을 수 있습니다. 한 가지 중요한 점은 reduce관찰 가능한 소스가 완료 될 때까지 방출되지 않는다는 것입니다. 현재 numbers$는 완료되지 않습니다 ( interval()연속 정수를 무기한 방출).

take()특정 수의 값이 방출 된 후 연산자를 사용하여 스트림을 완료 할 수 있습니다 .

예:

numbers$ = interval(1000).pipe(take(5)); // completes after 5 emissions

sumOfNumbers$ = numbers$.pipe(
    // receives 5 values (0, 1, 2, 3, 4) and performs the logic described above.
    reduce((acc, cur) => acc + cur, 0) 
);
// output: 10

여러 연산자를 사용하여 배출량을 변환 할 수 있습니다. 내부에 여러 개를 제공하기 만하면됩니다 pipe().

sumOfNumbersLessThan4$ = numbers$.pipe(
    filter(number => number < 4),
    reduce((acc, cur) => acc + cur, 0) 
);
// output: 6