React 之 Redux

React 之 Redux

應用場景

1. 隨着 JavaScript 單頁應用開發日趨複雜,管理不斷變化的 state 很是困難

2. Redux的出現就是爲了解決state裏的數據問題

3. 在React中，數據在組件中是單向流動的

4. 數據從一個方向父組件流向子組件(經過props)，因爲這個特徵，兩個非父子關係的組件（或者稱做兄弟組件）之間的通訊就比較麻煩

設計思想：

• - Redux是將整個應用狀態儲存到一個地方，成爲stroe

• - 裏面保存一個狀態樹 state tree

• - 組件能夠派發dispatch行爲action給store，而不是直接通知其餘組件

• - 其餘組件能夠經過訂閱store中的狀態（state）來刷新本身的視圖

三大原則：

1. - 整個應用的 state 被存儲在一顆 object tree 中，而且這個 object tree 只存在於惟一一個store中

2. - State 只是只讀的，惟一改變  state 的方法就是出發action，action是一個用於描述已發生事件的普通對象，使用純函數來進行修改，爲了描述action如何改變 state tree，你須要鞋reducers

3. - 單一數據源的設計讓 React組件之間的通訊更加方便，同時也便於狀態的統一管理
   

Redux 概念解析

    

1Store

store就是數據保存的地方，你能夠把它當作是一個容器。整個應用中只能有一個store，Redux提供 createStore 這個函數，用來生成 Store

• 上述代碼中。createStore函數接受另外一個函數做爲參數，返回新生成的Store對象

2State

Store包含全部的數據，若是想獲得某個時點的數據，就要對Store生成快照，這種時間點的數據集合就叫作 State，當前時刻的 State 能夠經過 store.getState()

• Redux 規定，一個State對應一個View。只要 State 相同， View就相同。你知道 State 什麼樣，就知道View是什麼樣，反之亦然。

3Action

State 改變會致使 View 的變化，可是，用戶接觸不到 State，只能接觸到 View，因此，View的的變化一定是 State 致使的。 Action 就是 View 發出的通知，表示State要發生變化了。Action 是一個對象。其中 type 屬性是必須的，表示 Action 名稱，其餘 屬性能夠自由設置，社區有個規範能夠參考

4Action Creator

View 要發出多少消息，就會有多少種Action。若是手寫，就會很麻煩。能夠定義一個函數來生成 Action，這個 函數叫作 Action Creator

• 上面代碼中，addTodo函數就是一個 Action Creator

5store.dispatch()

store.dispatch()，是 View 發出的惟一方法。

• 上面代碼中，store.dispatch()接受一個Action對象做爲參數，將它發送出去。結合 Action Cretaor，這段代碼能夠改爲下面這樣

6Reducer

Store 收到 Action 以後，必須給出一個新的State，這樣View纔會發生變化。

這種 State 計算過程叫作 Reducer

Reducer 是一個純函數，它接受當前 State 和 Action 做爲參數，返回一個新的 State

7combineReducers(reducers)

combineReducers 輔助函數的做用是。把一個由多個不一樣 reducer 函數做爲 value 的 object，合併成一個最終的 reducer 函數，而後就能夠對這個 reducer 調用 createStore。

多個子 reducer 函數合併後，至關於總體函數會爲 state 特定字段進行映射產生特定的reducer函數。如頁面中的例子

，todos和counter只會處理對應字段過來的action。

8applyMiddleware(...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。

🔚

人要懷揣着想象力活下去。—— 安藤忠雄