最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

Flux 的基本概念

XAMPP下载 admin 929浏览 0评论
 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) 來回於 clientrver 間,時間到時,server 會回應 token 到期給 client, 這時也需改變狀態。
這個情況下用 Flux 來管理狀態會是一個可能適用的情形。

什麼是 Flux?
根據Flux官方網站記載,它是一個應用程式架構,包含了三個主要的部分

QQ截图20181008161159
 Dispatcher: Diapatcher 是接受 Actions 的單一窗口,在每個應用中,Dispatcher 必須只有單一個。
Store: Store 儲存了狀態以及對應 Action 時,需要進行的邏輯,也就是函數 (Reducer),做完 Reducer 後會產生新的狀態。
View:這裡的 View 並不是 MVC 的 View, 應該在 Angular 來講是一個 Component,也就是當狀態改變時,使用者看到的內容也會隨之改變
要特別注意的是它的方向性,它一定是單向的。也就是說 View 不能直接改變狀態,一定要透過 Dispatcher
QQ截图20181008161209
 這裡只簡單介紹他的模型,至於如何實作,留待以後在一個一個深入解析。

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

Single Source of Truth: 您的應用程式狀態儲存在單一的 Store 裡的單一 Object Tree (State Tree) 中。
State is read only: 唯一能改變狀態的是透過 Action。
Changes are made with pure functions: 透過 Action, 改變 State Tree 的方式是一種稱為 Reducer 的 純函數 (pure function)。
使用的好處?
在 Angular 裡,您不一定要用 ngrx/store 來管理狀態,您可以用 Service 來處理類似的挑戰,但使用ngrx/stor 還是有一些好處,前提是您要遵守它的三個原則(如上),可能的好處有

可追蹤:因為有了Chrome extention 的 Redux DevTool,您可以清楚了解狀態改變的流程,以進行對可能存在的程式錯誤做除錯。
增加效能:對一些 Component 的 ChangeDetectionStrategy 為 OnPush,也就是 Presentation Component的資料來源根據上層 Container Component @Input 進來,它本身只要負責做渲染 (rendering) 的工作。
易於測試:因為 Reducer 是純函數,便於測試,
在進入 ngrx/store 之前,下次我們先來仔細看一下純函數 (pure function)。

转载请注明:XAMPP中文组官网 » Flux 的基本概念

您必须 登录 才能发表评论!