react和redux

redux API

整個(gè)Redux API包含5個(gè)頂級(jí)函數(shù)：

• Object createStore(reducer, initailState) - 創(chuàng)建Redux存儲(chǔ)
• Object combineReducers(reducers) - 將多個(gè)reducer合并成一個(gè)
• Object bindActionCreators(actionCreators, dispatch) - 將多個(gè)狀態(tài)生成器與dispatch綁定
• Object compose(...functions) - 從左向右構(gòu)造函數(shù)
• void applyMiddleware(...middlewares) - 應(yīng)用Redux中間件

combineReducers(reducers)

combineReducers()的作用是將多個(gè)reducer合并為一個(gè)reducer

• combineReducers的核心源碼

export default function combineReducers(reducers) {
    var reducerKeys = Object.keys(reducers)
    var finalReducers = {}
    //提取reducers中value值為function的部分
    for (var i = 0; i < reducerKeys.length; i++) {
        var key = reducerKeys[i]
        if (typeof reducers[key] === 'function') {
            finalReducers[key] = reducers[key]
        }
    }
    
    var finalReducerKeys = Object.keys(finalReducers)

    /**
     * 典型的函數(shù)式API，始終保持閉包訪(fǎng)問(wèn)，這個(gè)就是返回的合并后的reducer
     */
    return function combination(state = {}, action={}) {

        var hasChanged = false
        var nextState = {}
        /**
         * 遍歷訪(fǎng)問(wèn)finalReducers
         */
        for (var i = 0; i < finalReducerKeys.length; i++) {
            var key = finalReducerKeys[i]
            var reducer = finalReducers[key]
            /**
             *將state按照reducer的名字分離
             * 每個(gè)key都對(duì)應(yīng)著state
             */
            var previousStateForKey = state[key];
            // 利用一個(gè)reducer對(duì)state中的某一部分進(jìn)行更新
            var nextStateForKey = reducer(previousStateForKey, action)
            if (typeof nextStateForKey === 'undefined') {
                var errorMessage = getUndefinedStateErrorMessage(key, action)
                throw new Error(errorMessage)
            }
            nextState[key] = nextStateForKey
            hasChanged = hasChanged || nextStateForKey !== previousStateForKey
        }
        return hasChanged ? nextState : state
    }
}

• 實(shí)例說(shuō)明：
  例如：store的state中存放了兩個(gè)內(nèi)容:a和b，而且有兩個(gè)reducer：a和b,分別負(fù)責(zé)對(duì)state中的a和b的操作，當(dāng)調(diào)用dispatch(action)的時(shí)候，會(huì)進(jìn)行如下操作：newState[a] = a(state[a],action)和newState[b]=b(state[b],action),最后就得到了新的newstate

• 注意: state中存放了內(nèi)容a和b，則a和b對(duì)應(yīng)的reducer必須命名為a和b，因?yàn)樵谡{(diào)用合并后的reducer的時(shí)候，是根據(jù)key來(lái)匹配state中的內(nèi)容和對(duì)應(yīng)的reducer的

bindActionCreators(actionCreators, dispatch)

bindActionCreators(actionCreators, dispatch)的作用是將多個(gè)action生成器與dispatch綁定，action生成器的作用是傳入數(shù)據(jù)，返回固定類(lèi)型的action，利用生成的action去操作state的改變，將action生成器與dispatch綁定的意思就是傳入數(shù)據(jù)，生成action并自動(dòng)將action傳入dispatch

• bindActionCreators(actionCreators, dispatch)核心源碼

// 返回一個(gè)箭頭函數(shù)，調(diào)用這個(gè)箭頭函數(shù)，就會(huì)產(chǎn)生對(duì)應(yīng)的action，并調(diào)用dispatch方法
function bindActionCreator(actionCreator, dispatch) {
  return (...args) => dispatch(actionCreator(...args))
}

export default function bindActionCreators(actionCreators, dispatch) {
  
  // 獲取各個(gè)action生成器的名稱(chēng)
  var keys = Object.keys(actionCreators)
  
  var boundActionCreators = {}
  for (var i = 0; i < keys.length; i++) {
    var key = keys[i]
    var actionCreator = actionCreators[key]
    if (typeof actionCreator === 'function') {
      boundActionCreators[key] = bindActionCreator(actionCreator, dispatch)
    }
  }
  // 返回了一個(gè)對(duì)象
  return boundActionCreators
}

使用：

function mapDispatchToProps(dispatch){
    return {
        userInfoActions: bindActionCreators(userInfoActions, dispatch)
    }
}
加入userinfo中包含了一個(gè)關(guān)于用戶(hù)改變的actioncreator（update）
則通過(guò)this.props.userInfoActions.update(data)就可以生成一個(gè)關(guān)于用戶(hù)改變action，
并直接傳遞給dispatch來(lái)實(shí)現(xiàn)對(duì)state的操作

react-redux常用內(nèi)容

• Provider - 一個(gè)react組件，可以將從createStore返回的store放入context中，使子組件可以獲取并操作store
• connect - 將react組件與redux連接

connect

調(diào)用connect會(huì)產(chǎn)生一個(gè)新組件，這個(gè)組件的state與store中存放的state有關(guān)，并且它將state和對(duì)state的操作通過(guò)props的方式傳遞給一個(gè)子組件，在這個(gè)新組件中設(shè)置了一個(gè)監(jiān)聽(tīng)器，并放入了store的subscribe中，當(dāng)調(diào)用dispatch方法的時(shí)候，會(huì)觸發(fā)這個(gè)監(jiān)聽(tīng)器，而這個(gè)監(jiān)聽(tīng)器的內(nèi)容就是利用store中的state來(lái)更新自己的state(setState)。因此當(dāng)調(diào)用dispatch時(shí)，就會(huì)觸發(fā)該組件的更新。