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:
人要懷揣著想象力活下去 。—— 安藤忠雄