使用 React 作為前端架構的朋友對於 Flux 應該都不陌生，React 也內建了 Flux 讓我們可以直接使用，同時也有許多其他的 library 以這個架構為基礎設計，並應用在各種前端框架下，如 Redux (for React)、NgRx (for Angular) 和 Vuex (for Vue) 等等。可以見得它是多麽重要的東西，今天我們來嘗試實際使用 RxJS 來實作一下這種架構，也藉此多認識一下 Flux Pattern 的重要觀念。

今天我們用實際的例子來練習各種 RxJS operators 的組合運用！在一般的應用程式裡面，資料查詢應該算是非常常見的情境了，我們就實際使用資料查詢的功能做範例，加上各種變化，來練習一些 operators 的實際使用吧！

在介紹完各種建立 Observable 的 operators 後，接下來我們開始介紹各式各樣放在 pipe 裡面，讓 Observable 資料流向更加多采多姿的 operators。

首先要介紹的是各種「轉換」類型的 operators。

在昨天的文章最後我們出了一個「簡易計數器」的練習，今天就來看看該如何實作這些功能吧！

在前兩天介紹 AsyncPipe 時，我們不難發現當進入 RxJS 思維時，搭配 AsyncPipe 可以帶來非常多的好處！雖然透過這種不使用 subscribe() 訂閱的方式，對於許多剛進入 Angular 或 RxJS 世界的朋友會感到不適應；尤其是當有更多複雜資料要處理時，不使用 subscribe() 訂閱後處理資料還真的不知道該如何處理是好。

其實只要透過 RxJS 提供的運算子(operators)，便能夠幫助我們減少大量的程式，並寫出更加好維護的程式碼！這兩天就讓我們來看看一些我個人在開發 Angular 時常用的 RxJS 應用技巧吧！