摘要：函數(shù)的作用是，返回一個最終的函數(shù)，做的事情是得到一個由多個不同函數(shù)作為可以自定義的對象。把數(shù)據(jù)放到一個對象列表中，每個數(shù)據(jù)用作為主鍵。不同類型的對象通過引用數(shù)據(jù)，這樣數(shù)據(jù)發(fā)生改變的時候，只需要修改一處地方，減少數(shù)據(jù)冗余或者混用。

本文記錄的是自己對redux的學習和理解，希望可以簡潔易懂，入門redux，一步步的走進redux!

Redux是JavaScript應用的狀態(tài)容器，提供可預測化的狀態(tài)管理，讓你構建一致化的應用，運行于不同的環(huán)境（客戶端、服務器、原生應用），并且易于測試。不僅于此，它還提供超爽的開發(fā)體驗。

【store】保存應用狀態(tài)全局單一

【state】所有state以key-value的形式存儲在store中

【action】描述發(fā)生什么的對象，觸發(fā)action是唯一改變state的方式，action本質上是一個普通js對象，必必須一個type字段，值為字符串常量

【action creator】創(chuàng)建action

【reducer】描述action如何改變state

創(chuàng)建一個Redux store來以存放應用中所有的state。

隨著應用復雜度上升，數(shù)據(jù)源逐漸變混亂，導致組件內部數(shù)據(jù)調用十分復雜，會產生數(shù)據(jù)冗余或者混用等情況，需要對reducer函數(shù)進行拆分，拆分后的每一模塊獨立負責管理state的一部分。combineReducers函數(shù)的作用是，返回一個最終的rootReducer函數(shù)，rootReducer做的事情是得到一個由多個不同reducer函數(shù)作為value（key可以自定義）的對象。

    const module1Reducer = combineReducers(
        module1_key1: module1_reducer1
    );
    const rootReducer = combineReducers(
        key1: reducer1,
        module1: module1Reducer
    );
    
    const store = createStore(rootReducer);
    
    // store中保存的state結構如下
    {
        key1: reducer1(state.key1, action),
        module1: {
            module1_key1: (state.module1.module1_key1, action)
        }
    }
   

總結一下，state對象的結構由傳入的多個reducer的key決定，可以根據(jù)模塊拆分的細粒度，考慮是否需要嵌套使用combineReducers，整個應用的數(shù)據(jù)大致分來兩類：普通data和ui狀態(tài)

    + data
        - 服務器響應的數(shù)據(jù)
        - 緩存數(shù)據(jù)
        - 本地尚未持久化到服務器的數(shù)據(jù)
        - 用戶輸入
        - ...
    + ui狀態(tài)
        - 激活的路由
        - 被選中的Tab標簽
        - 是否顯示加載動畫
        - 分頁器狀態(tài)
        - ...

設計state結構時，盡量把state范式化，不要存在嵌套不同類型的對象的情況。把數(shù)據(jù)放到一個對象（列表）中，每個數(shù)據(jù)用id作為主鍵。不同類型的對象通過id引用數(shù)據(jù)，這樣數(shù)據(jù)發(fā)生改變的時候，只需要修改一處地方，減少數(shù)據(jù)冗余或者混用。

首先要介紹一下什么是middlewares，middlewares用于包裝store.dispatch，擴展其功能，在發(fā)起action之后，到達reducer之前執(zhí)行一些邏輯，有點類似是aop的一種實現(xiàn)。
applyMiddleware大致實現(xiàn):

暫存redux store提供的dispatch

把dispatch作為實參，傳給middleware執(zhí)行之后返回的函數(shù)A

執(zhí)行函數(shù)A，返回包裝過的dispatch，覆蓋原來的store.dispatch

    function applyMiddleware(store, middlewares) {
        middlewares = middlewares.slice()
        middlewares.reverse()
        // 暫存dispatch
        let dispatch = store.dispatch
        // 包裝dispatch
        middlewares.forEach(middleware =>
            dispatch = middleware(store)(dispatch)
        )
        return {...store, { dispatch })
    }

理解了applyMiddleware的邏輯，自定義一個middleware大致如下

    function(store){
        // pass store.dispatch to next 
        return function(next){
            // return dispatch
            return function(action){
                // implement middleware logic
            }
        }
    }

參數(shù)actionCreators如果為函數(shù) 把 action creators 轉成擁有同名keys的對象，但使用 dispatch 把每個action creator包圍起來，返回新的對象

參數(shù)actionCreators如果為對象，若actionCreators[key]為函數(shù)，用dispatch把每個 actionCreators[key]包圍起來，返回新的對象

組合store enhance，applyMiddleware 和 redux-devtools就是store enhance

Redux本身只提供應用狀態(tài)和數(shù)據(jù)流管理，除了和React一起用外，還支持其它界面庫，且沒有任何依賴。要在React的項目中使用Redux，比較好的方式是借助react-redux這個庫來做連接.

為整個應用提供store數(shù)據(jù)，做的事情是把store作為props傳遞到每一個被connet()包裝的組件

connect(...args)(component)返回一個與Redux store連接的組件類，下面簡單講解一下connect方法的參數(shù)

mapStateToProps(state, [ownProps]) [Function]

state是store中整個應用的state

ownProps高階函數(shù)包裝過的組件的props

該回調函數(shù)必須返回一個純對象，這個對象會與被包裝的組件的props做merge合并

mapStateToProps可以做一些數(shù)據(jù)的format， filter，compose操作，保證數(shù)據(jù)在組件層面的方便使用

mapDispatchToProps(dispatch, [ownProps]) [Object or Function]

mapDispatchToProps參數(shù)為Object, 每個定義在該對象的函數(shù)都將被當作Redux action creator,其中所定義的方法名將作為屬性名，合并到被包裝的組件的props中，實現(xiàn)的效果：執(zhí)行component.prop.checkout()實際上是dispatch了一個action，這樣做的好處是component與redux的解耦，component根本不知道redux的存在。

    // action creator返回對象 
    mapDispatchToProps = {
        // action creator
        checkout: function actionCreator(productId){
            return {
                    type: types.ADD_TO_CART,
                    productId
              }    
        }
    }
    // action creator返回函數(shù)，thunk
    mapDispatchToProps = {
        // action creator
        checkout: function actionCreator(productId){
            action creator 返回一個thunk， thunk的參數(shù)為 dispatch 和 getState
            return (dispatch, getState) => {?                  
                if (getState().products.byId[productId].inventory > 0) {?  
                         dispatch(addToCartUnsafe(productId))?                  
                }?            
            }
        }
    }

    // 最終被綁定的組件props
    component.props.checkout = function () {
        return dispatch(actionCreator.apply(undefined, arguments));
      }

mapDispatchToProps參數(shù)為Function

    mapDispatchToProps(dispatch, [ownProps]) = function(){
        return {
            checkout: () => {?                  
                dispatch(actionCreator())?        
            }
        }
    }        
    // 最終被綁定的組件.props
    component.props.checkout = function () {
            return dispatch(actionCreator.apply(undefined, arguments));
      }

    // 使用bindActionCreators
    mapDispatchToProps(dispatch, [ownProps]) = function(){
        return bindActionCreators(actionCreator, dispatch)
    }
    // 最終被綁定的組件props
    component.props.actionCreator = function () {
        return dispatch(actionCreator.apply(undefined, arguments));
      }

    // 使用 bindActionCreators
    mapDispatchToProps(dispatch, [ownProps]) = function(){
        return bindActionCreators({
            ‘checkout’: actionCreator
        }, dispatch)
    }
    // 最終被綁定的組件props
    component.props.checkout = function () {
                return dispatch(actionCreator.apply(undefined, arguments));
      }

dispatch(actionCreator)?=> Reducer => (state, action) => state

用戶操作或者網絡請求 store.dispatch(action)

redux store調用傳入的rootReducer

redux 執(zhí)行全部的reducer，把每個reducer執(zhí)行得到的結果輸出合成一個新的對象

store 存儲rootReducer返回的值，更新currentState