Flux 的基本概念

為什麼要用 Flux？

是應用程式架構

在繼續談 ngrx/store 之前，我們先從它的基本概念 Flux 談起，Flux 並不是一個 Library，它是一種應用程式的架構 (application architecture)，就像常看到的 MVC (Model View Controller) 一樣是一種架構。

ngrx/store 是 Flux 的實作

它最早的實作在 React 時稱為 Redux, 在 Angular 上有 ngrx/store 跟 @angular-redux/store (ng2-redux)兩種，第二種是直接將 Redux 包裝讓 Angular 用，在 Vue 上有 Vuex， 這些都是為了解決一些特定的問題而產生的，意思是並不是所有的狀態管理 (State Management) 都需要用到。畢竟使用這些程式庫需要加入很多額外的基本程式碼(boilerplate)。而且有其他的原則要遵守（後面談到）。Angular 已經有 service 來提供所有的 Components的服務，我們之後再來談 ngrx/store 跟 Angular service 間的關係。

什麼時候用到？

那什麼時候需要用它呢？如果從這個架構的原始問題來看，這篇文章詳細解釋 Facebook 面臨的 message counter 問題，短的結論可能是 如果這個狀態由多個不同的改變狀態者可能並行(concurrent)改變時，那您可能需要用到Flux ，像臉書的訊息，它的資料來源可能是幾億個使用者。Redux 的作者之一也有一篇文章 You Might Not Need Redux,提醒大家不要濫用 Redux。

舉例

再舉個例子:

• 您的登出登入狀態，它是由使用者控制。
• 一方面如果您使用“記住我”的功能，在重新刷瀏覽器時，有些資訊可能存在於 local storage 上，而這個資訊您可能設定它的有效期限，client 端會使用 setInterval 來定時查閱，時間到時，將狀態改變由登入變為登出。
• 又如果您使用 JWT (JasonWebToken) 來回於 client/server 間，時間到時，server 會回應 token 到期給 client, 這時也需改變狀態。

這個情況下用 Flux 來管理狀態會是一個可能適用的情形。

什麼是 Flux?

根據Flux官方網站記載，它是一個應用程式架構，包含了三個主要的部分
圖片來源

1. Dispatcher: Diapatcher 是接受 Actions 的單一窗口，在每個應用中，Dispatcher 必須只有單一個。
2. Store: Store 儲存了狀態以及對應 Action 時，需要進行的邏輯，也就是函數 (Reducer)，做完 Reducer 後會產生新的狀態。
3. View:這裡的 View 並不是 MVC 的 View, 應該在 Angular 來講是一個 Component，也就是當狀態改變時，使用者看到的內容也會隨之改變

要特別注意的是它的方向性，它一定是單向的。也就是說 View 不能直接改變狀態，一定要透過 Dispatcher

圖片來源
這裡只簡單介紹他的模型，至於如何實作，留待以後在一個一個深入解析。

基本原則

Redux 是 Flux 的實作，它首先提出三個原則，ngrx/store 是由 Redux 啟發的，它也遵循了這三個原則

1. Single Source of Truth: 您的應用程式狀態儲存在單一的 Store 裡的單一 Object Tree (State Tree) 中。
2. State is read only: 唯一能改變狀態的是透過 Action。
3. Changes are made with pure functions: 透過 Action, 改變 State Tree 的方式是一種稱為 Reducer 的 純函數 （pure function）。

使用的好處？

在 Angular 裡，您不一定要用 ngrx/store 來管理狀態，您可以用 Service 來處理類似的挑戰，但使用ngrx/stor 還是有一些好處，前提是您要遵守它的三個原則（如上），可能的好處有

1. 可追蹤：因為有了Chrome extention 的 Redux DevTool，您可以清楚了解狀態改變的流程，以進行對可能存在的程式錯誤做除錯。
2. 增加效能：對一些 Component 的 ChangeDetectionStrategy 為 OnPush，也就是 Presentation Component的資料來源根據上層 Container Component @Input 進來，它本身只要負責做渲染 (rendering) 的工作。
3. 易於測試：因為 Reducer 是純函數，便於測試，

在進入 ngrx/store 之前，下次我們先來仔細看一下純函數 (pure function)。