對redux和react-redux的理解和總結（一）

爲何使用redux

隨着前端單頁面開發愈來愈複雜，javascript須要管理愈來愈多的狀態state。若是一個model的變化引發另外一個model的變化，view的變化，那麼當 view 變化時，就可能引發對應 model 以及另外一個 model 的變化，依次地，可能會引發另外一個 view 的變化。直至你搞不清楚到底發生了什麼。state 在何時，因爲什麼緣由，如何變化已然不受控制。 當系統變得錯綜複雜的時候，想重現問題或者添加新功能就會變得舉步維艱。Redux使得state在變化和異步中可預測。

在使用redux的應用中，全部的stae都以一個對象樹的形式存儲在單一的store中，唯一改變 state 的辦法是觸發 action，action 如何改變 state 樹，須要編寫 reducers。

Action 把數據從應用傳到 store 。它是 store 數據的惟一來源。經過 store.dispatch() 將 action 傳到 store。
Reducers 指定了應用狀態的變化如何響應 actions 併發送到 store 的，actions 只是描述了有事情發生了這一事實，並無描述應用如何更新 state。更新state的函數稱爲reducer，它是一個純函數，接受舊的state和action，返回新的state。reducer必須是一個純函數，不能進行以下操做：

• 修改傳入的參數
• 執行有反作用的操做，如 API 請求和路由跳轉
• 調用非純函數，如 Date.now() 或 Math.random()

Redux提供了combineReducers函數，該函數接受一個對象，做用是生成一個函數，這個函數來調用你的一系列 reducer，每一個 reducer 根據它們的 key 來篩選出 state 中的一部分數據並處理，而後這個生成的函數再將全部 reducer 的結果合併成一個大的對象。沒有任何魔法。正如其餘 reducers，若是 combineReducers() 中包含的全部 reducers 都沒有更改 state，那麼也就不會建立一個新的對象。

Store 是action和reader之間的橋樑，是把它們聯繫到一塊兒的對象。Redux 應用只有一個單一的 store
Store有如下功能：

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

使用createStore建立一個Store

const Store = createStore(reducers,other)

Redux的數據流

Redux是單向數據流。單向數據流的好處：意味着應用中全部的數據都遵循相同的生命週期，這樣可讓應用變得更加可預測且容易理解。同時也鼓勵作數據範式化，這樣能夠避免使用多個且獨立的沒法相互引用的重複數據。

• 調用 store.dispatch(action)，觸發action動做
• Redux store 調用傳入的 reducer 函數，Store 會把兩個參數傳入 reducer： 當前的 state 樹和 action。
• 根 reducer 應該把多個子 reducer 輸出合併成一個單一的 state 樹。
• Redux store 保存了根 reducer 返回的完整 state 樹

Redux搭配react使用

使用react-redux。在react-redux的使用中，關注兩個方法：Provider和connect

• Provider把store放到context裏，全部的子元素能夠直接取到store，本質上 Provider 就是給 connect 提供 store 用的。
• connect 是一個高階組件，接受一個組件 WrappedComponent 做爲參數，負責連接組件，把給到redux裏的數據放到組件的屬性裏。主要有兩個做用：1. 負責接受一個組件，把state裏的一些數據放進去，返回一個組件；2. 數據變化的時候，可以通知組件。