iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 6
0
Modern Web

ngrx/store 4 學習筆記系列 第 6

[ngrx/store-6] Flux 的基本概念

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官方網站記載,它是一個應用程式架構,包含了三個主要的部分
https://ithelp.ithome.com.tw/upload/images/20171222/20103574GGEq0pdlOL.png 圖片來源

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

要特別注意的是它的方向性,它一定是單向的。也就是說 View 不能直接改變狀態,一定要透過 Dispatcher
https://ithelp.ithome.com.tw/upload/images/20171222/20103574JE0wsLFfqY.png
圖片來源
這裡只簡單介紹他的模型,至於如何實作,留待以後在一個一個深入解析。

基本原則

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)。


上一篇
[ngrx/store -5] 高階 (High Order) Observable
下一篇
[ngrx/store-7] 純函數 (Pure Function)
系列文
ngrx/store 4 學習筆記30

尚未有邦友留言

立即登入留言