• 相信很多人學習Angualr一定對RxJS不陌生，但要輕易的駕馭它，可不是那麼容易。
• 這年頭還有什麼我學不起來的!? 滿懷雄心壯志的開啟RxJS官網，不看則以，一看就被滿滿的文字海嘯給淹沒了，不死心地看了許多的影片想搞懂，不過，就像小琥姊的經典歌曲~沒有那麼簡單...?

一步一步探索RxJS

• 一次偶然的機會，看到同事用RxJS將迴圈內的處理完畢，簡單俐落不說，還易讀易維護，這好東西不學~像話嗎??

• 我懂RxJS的學習並不簡單，所以這一系列的文章，我會以淺顯易懂的方式來闡述我學習RxJS的歷程。✍

• 一開始我們先從簡單的基礎觀念先熟悉，不貪多，每天進步一點就是一種成長；就跟少林寺學功夫一樣，先去挑水爬樓梯，蹲蹲馬步練穩下盤後，掌握降龍十八掌不再是難事。

• 所以~跟著我一起一步一步探索RxJS!
  

想像一下，在一條生產線上...

• 你開了一家香蕉包裝公司，建立一條完整的生產線中，你會有:

• Source: 香蕉堆，陸續送出 ~ 第一串香蕉、第二串香蕉、第三串...第N串
• Process: 製程，包含各種步驟，如:

1. 觀察是否有腐爛?
2. 秤重分類
3. 清洗
4. 包裝
   呈現的結果如下圖所示:
   

每個產品都經過層層把關

• 注意到了嗎？生產線從一香蕉堆，陸續一串一串的把香蕉往生產線送。
• 生產線總共設置了四個關卡，每一個關卡，都有自己的功能，各司其職，確認無誤，再往下一個(next)傳遞。
• 當其中一串香蕉通過這四個關卡，也代表著我們能拿到包裝好的香蕉，準備出貨囉!
• 這樣的層層把關，稱為pipe；也就是像管路依樣依序傳遞下去。

客戶下單訂閱，就可以開始生產囉!

• Subscribe: 客戶要了解產線的生產狀況，當然會進行訂閱(Subscribe)；訂閱了，就要開始生產囉!

來段RxJS程式碼模擬一下

• stackblit

import { filter, from, map } from 'rxjs';

console.log('=== RxJS模擬香蕉生產線 ===');
const bananaSrc = [1, 2, 3, 4, 5];

const bananaLine$ = from(bananaSrc).pipe(
  filter((num) => num % 2 !== 0), // 模擬奇數個是壞掉的
  map((banana) => `${banana}: Weight`), // 秤重
  map((banana) => `${banana} => Wash`), // 清洗
  map((banana) => `${banana} => Package`) // 包裝
);

bananaLine$.subscribe(console.log); // 訂閱，並印出生產資料

• 輸出的結果如下

//=== RxJS模擬香蕉生產線 ===
// 1: Weight => Wash => Package
// 3: Weight => Wash => Package
// 5: Weight => Wash => Package

等等，這不就是Array Functional Programming嗎?

• 沒錯RxJS就是結合Functional Programming，但這只是他的前菜而已，真正強大的功能在於簡化非同步(async)的處理程序。

Recap

• RxJS的思維，就跟生產線一樣，其中進行著被觀察及觀察的過程，想看的人可隨時可訂閱。

1. 被觀察(Observable): 一串一串的香蕉堆
2. 觀察動作(observe): filterBad -> Weight => Wash => Package
3. 訂閱(subscribe): 有人訂閱，代表生產正式啟動，你就可以拿到生產報告。

• 恭喜你完成day1囉，你仍然有很多的疑問，沒關係，我們接下來的每一天，都一點一滴地說明這一切，加油。