angular 使用Redux

Redux 筆記

Redux 是 JavaScript 狀態容器，提供可預測化的狀態管理。

可讓你構建一致化的應用，運行於不一樣的環境（客戶端、服務器、原生應用），而且易於測試。不只於此，它還提供 超爽的開發體驗，好比有一個時間旅行調試器能夠編輯後實時預覽。

Redux 除了和 React 一塊兒用外，還支持其它界面庫。 它體小精悍（只有2kB）且沒有任何依賴。

函數式編程思想

函數式編程是把一個功能的一個操做和相關數據封裝在一塊兒，函數式編程是函數滿天飛。(面向對象是把一個功能的一組操做和相關數據封裝在一個對象裏，面向對象是對象滿天飛。)

函數不訪問全局變量，也不改變全局變量。(函數式編程的準則：函數不受外部變量影響，不依賴於外部變量，也不改變外部變量的值。)

函數式編程關心數據的映射，命令式編程關心解決問題的步驟.

特色

1. 函數是"第一等公民"

  所謂"第一等公民"（first class），指的是函數與其餘數據類型同樣，處於平等地位，能夠賦值給其餘變量，也能夠做爲參數，傳入另外一個函數，或者做爲別的函數的返回值。

舉例來講，下面代碼中的print變量就是一個函數，能夠做爲另外一個函數的參數。

2. 只用"表達式"，不用"語句"

"表達式"（expression）是一個單純的運算過程，老是有返回值；"語句"（statement）是執行某種操做，沒有返回值。函數式編程要求，只使用表達式，不使用語句。也就是說，每一步都是單純的運算，並且都有返回值。

緣由是函數式編程的開發動機，一開始就是爲了處理運算（computation），不考慮系統的讀寫（I/O）。"語句"屬於對系統的讀寫操做，因此就被排斥在外。

固然，實際應用中，不作I/O是不可能的。所以，編程過程當中，函數式編程只要求把I/O限制到最小，不要有沒必要要的讀寫行爲，保持計算過程的單純性。

3. 沒有"反作用" -- 不會修改外部變量

所謂"反作用"（side effect），指的是函數內部與外部互動（最典型的狀況，就是修改全局變量的值），產生運算之外的其餘結果。

函數式編程強調沒有"反作用"，意味着函數要保持獨立，全部功能就是返回一個新的值，沒有其餘行爲，尤爲是不得修改外部變量的值。

4. 不修改狀態

上一點已經提到，函數式編程只是返回新的值，不修改系統變量。所以，不修改變量，也是它的一個重要特色。

在其餘類型的語言中，變量每每用來保存"狀態"（state）。不修改變量，意味着狀態不能保存在變量中。函數式編程使用參數保存狀態，最好的例子就是遞歸。下面的代碼是一個將字符串逆序排列的函數，它演示了不一樣的參數如何決定了運算所處的"狀態"。

5. 引用透明

引用透明（Referential transparency），指的是函數的運行不依賴於外部變量或"狀態"，只依賴於輸入的參數，任什麼時候候只要參數相同，引用函數所獲得的返回值老是相同的。

有了前面的第三點和第四點，這點是很顯然的。其餘類型的語言，函數的返回值每每與系統狀態有關，不一樣的狀態之下，返回值是不同的。這就叫"引用不透明"，很不利於觀察和理解程序的行爲。

咱們爲何要使用Redux，什麼是Redux？

理解Redux

view ---> action ---> reducer ---> store(state) ---> view

若是放入一個web app中，首先store(state)決定了view，而後用戶與view的交互會產生action，這些action會觸發reducer於是改變state，而後state的改變又形成了view的變化。

Action

Action 的任務是描述「發生了什麼事情？」 

Actions 是把數據從應用傳到 store 的有效載荷。它是 store 數據的惟一來源。用法是經過 store.dispatch() 把 action 傳到 store。

Action就像leader，告訴咱們應該作哪些事，而且給咱們提供‘資源’，真正幹活的是苦逼的Reducer。

Reducer

Reducer 的任務是根據傳入的 Action 對象去修改狀態樹。Reducer 是一個普通的回調函數。當它被Redux調用的時候會爲他傳遞兩個參數State 和 Action。

或者簡單地講 Reducer 就是一個純函數， 根據傳入的 當前state 和 action ，返回一個新的 state ：(state, action) => newState

小結：

Reducer很簡單，但有三點須要注意

1. 不要修改 state。
2. 在 default 狀況下返回舊的 state。遇到未知的 action 時，必定要返回舊的 state。
3. 若是沒有舊的State，就返回一個initialState，這很重要！！！

Store

能夠把Store想象成一個數據庫（如Redis同樣），就像咱們在移動應用開發中使用的SQLite同樣，Store是一個你應用內的數據（狀態）中心。一個應用只有一個Store

Store中通常負責：保存應用狀態、提供訪問狀態的方法、派發Action的方法以及對於狀態訂閱者的註冊和取消等。任什麼時候間點的Store的快照均可以提供一個完整當時的應用狀態。

Store 就是把 Reducer 和 action 聯繫到一塊兒的對象。Store 有如下職責：

• 維持應用的 state；
• 提供 getState() 方法獲取 state；
• 提供 dispatch(action) 方法更新 state；
• 經過 subscribe(listener) 註冊監聽器；

 

Redux 流程圖 

Redux是什麼？

全局的、惟一的、不可改變的內存狀態[數據庫]

reducer是一個純函數，能夠接收到「任何」Action

reducer 不改變狀態，只返回新的狀態

Reducer 是一個形式爲 (state,action) => state 的純函數,描述了action如何把state轉變成下一個state。

reduce、map、filter 等方法是函數式編程中經常使用的數組處理方法

Action是個JavaScript對象，它是store數據的惟一來源

編寫reduce技巧

每一個reducer模塊默認export自身的純函數。若是每個模塊export同樣名稱的reducer將很難閱讀。能夠經過* as 自定義暱稱方便代碼的可讀性。以下修改：

    /**
 * 分別從每一個 reducer 中將須要導出的函數或對象進行導出，並起個易懂的名字  */ import * as fromQuote from './quote.reducer'; import * as fromAuth from './auth.reducer'; import * as fromProjects from './project.reducer'; import * as fromTaskLists from './task-list.reducer'; import * as fromTasks from './task.reducer'; import * as fromUsers from './user.reducer'; import * as fromTheme from './theme.reducer';