React 之 Redux
應用場景
1. 隨著 JavaScript/">JavaScript 單頁應用開發日趨複雜,管理不斷變化的 state 非常困難
2 . Redux的出現就是為了解決state裡的資料問題
3. 在React中，資料在元件中是單向流動的
4. 資料從一個方向父元件流向子元件(通過props)，由於這個特徵，兩個非父子關係的元件（或者稱作兄弟元件）之間的通訊就比較麻煩
設計思想：
-
- Redux是將整個應用狀態儲存到一個地方，成為stroe
-
- 裡面儲存一個狀態樹 state tree
-
- 元件可以派發dispatch行為action給store，而不是直接通知其他元件
-
- 其他元件可以通過訂閱store中的狀態（state）來重新整理自己的檢視
三大原則：
-
- 整個應用的 state 被儲存在一顆 object tree 中，並且這個 object tree 只存在於唯一一個store中
-
- State 只是只讀的，唯一改變 state 的方法就是出發action，action是一個用於描述已發生事件的普通物件，使用純函式來進行修改，為了描述action如何改變 state tree，你需要鞋reducers
-
- 單一資料來源的設計讓 React元件之間的通訊更加方便，同時也便於狀態的統一管理
Redux 概念解析
1 Store
store就是資料儲存的地方，你可以把它看成是一個容器。整個應用中只能有一個store，Redux提供 createStore 這個函式，用來生成 Store
-
上述程式碼中。createStore函式接受另一個函式作為引數，返回新生成的Store物件
2 State
Store包含所有的資料，如果想得到某個時點的資料，就要對Store生成快照，這種時間點的資料集合就叫做 State，當前時刻的 State 可以通過 store.getState()
-
Redux 規定，一個State對應一個View。只要 State 相同， View就相同。你知道 State 什麼樣，就知道View是什麼樣，反之亦然。
3 Action
State 改變會導致 View 的變化，但是，使用者接觸不到 State，只能接觸到 View，所以，View的的變化必定是 State 導致的。 Action 就是 View 發出的通知，表示State要發生變化了。Action 是一個物件。其中 type 屬性是必須的，表示 Action 名稱，其他 屬性可以自由設定，社群有個規範可以參考
4 Action Creator
View 要發出多少訊息，就會有多少種Action。如果手寫，就會很麻煩。可以定義一個函式來生成 Action，這個 函式叫做 Action Creator
-
上面程式碼中，addTodo函式就是一個 Action Creator
5 store.dispatch()
store.dispatch()，是 View 發出的唯一方法。
-
上面程式碼中，store.dispatch()接受一個Action物件作為引數，將它傳送出去。結合 Action Cretaor，這段程式碼可以改成下面這樣
6 Reducer
Store 收到 Action 之後，必須給出一個新的State，這樣View才會發生變化。
這種 State 計算過程叫做 Reducer
Reducer 是一個純函式，它接受當前 State 和 Action 作為引數，返回一個新的 State
7 combineReducers( reducer s)
combineReducers 輔助函式的作用是。把一個由多個不同 reducer 函式作為 value 的 object，合併成一個最終的 reducer 函式，然後就可以對這個 reducer 呼叫 createStore。
多個子 reducer 函式合併後，相當於整體函式會為 state 特定欄位進行對映產生特定的reducer函式。如 ofollow,noindex"> 頁面 中的例子
， todos和counter只會處理對應欄位過來的action。
8 applyMiddleware(...middlewares)
輸入一個middlewares陣列，返回一個函式，函式以createStore為引數：
使用示例：
每個 middleware 接受 Store 的 dispatch 和 getState 函式作為命名引數，並返回一個函式。該函式會被傳入 被稱為 next 的下一個 middleware 的 dispatch 方法，並返回一個接收 action 的新函式，這個函式可以直接呼叫next(action)，或者在其他需要的時刻呼叫，甚至根本不去呼叫它。呼叫鏈中最後一個 middleware 會接受真實的 store 的 dispatch 方法作為 next 引數，並藉此結束呼叫鏈。所以，middleware 的函式簽名是 ({ getState, dispatch }) => next => action。
9 <Provider store>和connect([mapStateToProps], [mapDispatchToProps],[mergeProps], [options])
<Provider store>使元件層級中的 connect()方法都能夠獲得 Redux store。正常情況下，你的根元件應該巢狀在 <Provider>中才能使用 connect()方法。
connect： 連線 React 元件與 Redux store。
:end:
人要懷揣著想象力活下去 。—— 安藤忠雄