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

本文記錄的是自己對redux的學(xué)習(xí)和理解，希望可以簡潔易懂，入門redux，一步步的走進(jìn)redux!

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

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

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

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

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

【reducer】描述action如何改變state

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

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

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

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

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

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

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

暫存redux store提供的dispatch

把dispatch作為實(shí)參，傳給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的邏輯，自定義一個(gè)middleware大致如下

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

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

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

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

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

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

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

mapStateToProps(state, [ownProps]) [Function]

state是store中整個(gè)應(yīng)用的state

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

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

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

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

mapDispatchToProps參數(shù)為Object, 每個(gè)定義在該對象的函數(shù)都將被當(dāng)作Redux action creator,其中所定義的方法名將作為屬性名，合并到被包裝的組件的props中，實(shí)現(xiàn)的效果：執(zhí)行component.prop.checkout()實(shí)際上是dispatch了一個(gè)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 返回一個(gè)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

用戶操作或者網(wǎng)絡(luò)請求 store.dispatch(action)

redux store調(diào)用傳入的rootReducer

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

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