• Javascript的Array提供一個可累加蒐集資料的函示~ reduce，今天我們要介紹的RxJS reduce也是一樣的概念，趕緊來看個例子吧!

stackblitz

• JS Array.reduce() VS RxJS reduce

console.log('=== Case1: JS Array.reduce() ===');
const func = (accum, current) => accum + current;
const result = [1, 2, 3, 4, 5].reduce(func, 0);

console.log(result);

console.log('=== Case2: RxJS reduce() ===');
import { from, reduce } from 'rxjs';
const myReduce$ = from([1, 2, 3, 4, 5])
  .pipe(
    reduce(func, 0) //<-- RxJS reduce
  )
  .subscribe(console.log);

• 上方的例子相信大家很快就能上手，兩個reduce概念上大同小異，使用方法也相當直覺!☕

reduce

• 圖片來源-RxJS官網 - reduce

從reduce的marble diagram來看，累加到最後一個值才會發出訊息，相當的盡責。

interval+reduce來測試看看他的盡責程度

• 我們在[day8]有介紹過inteval，我們使用它固定時間發出一個訊號的特性，來驗證看看reduce是不是很盡責的一直做下去!

stackblitz

import { interval, reduce, take } from 'rxjs';

const accumFunc = (accum, current) => accum + current;
const myReduce$ = interval(1000).pipe(
  reduce(accumFunc, 0)
);

myReduce$.subscribe({
  next: (val) => console.log(val),  //<-- 因為interval沒有一個結束的方式，故reduce會一直呼叫next()
  complete: () => console.log('completed!'), // <-- complete()不會被呼叫
});

• 從結果來看，complete()不會被呼叫，因為 interval沒有一個結束的方式，故reduce會一直呼叫next()。
• 因此，我們用take(3)來限制一下它，代表說 ~ 你取3個值計算就可以下班了

import { interval, reduce, take } from 'rxjs';

const accumFunc = (accum, current) => accum + current;
const myReduce$ = interval(1000).pipe(
  take(3), //<-- 加take(3)來限制interval
  reduce(accumFunc, 0)
);

...

• 觀看結果一下，心理默數大約三秒鐘，確實給出結果，中間的過程reduce都不會主動呼叫next()，很認份，很盡責!

Recap

• reduce與Array.reduce()的用法一致。
• reduce直到最後一個值處理完，才會呼叫complete()。
• 如果搭配interval，會一直做到天荒地老，除非我們用take去限制observable送出的次數。

通過1/3的關卡啦!

• 終於，我們完成了鐵人賽1/3的關卡，前方的路途仍充滿挑戰，咱們保持信心，養成習慣，繼續攻頂!!