redux和react 01

react和redux

redux API

整个Redux API包含5个顶级函数：

• Object createStore(reducer, initailState) - 创建Redux存储
• Object combineReducers(reducers) - 将多个reducer合并成一个
• Object bindActionCreators(actionCreators, dispatch) - 将多个状态生成器与dispatch绑定
• Object compose(...functions) - 从左向右构造函数
• void applyMiddleware(...middlewares) - 应用Redux中间件

combineReducers(reducers)

combineReducers()的作用是将多个reducer合并为一个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)

    /**
     * 典型的函数式API，始终保持闭包访问，这个就是返回的合并后的reducer
     */
    return function combination(state = {}, action={}) {

        var hasChanged = false
        var nextState = {}
        /**
         * 遍历访问finalReducers
         */
        for (var i = 0; i < finalReducerKeys.length; i++) {
            var key = finalReducerKeys[i]
            var reducer = finalReducers[key]
            /**
             *将state按照reducer的名字分离
             * 每个key都对应着state
             */
            var previousStateForKey = state[key];
            // 利用一个reducer对state中的某一部分进行更新
            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
    }
}

• 实例说明：
  例如：store的state中存放了两个内容:a和b，而且有两个reducer：a和b,分别负责对state中的a和b的操作，当调用dispatch(action)的时候，会进行如下操作：newState[a] = a(state[a],action)和newState[b]=b(state[b],action),最后就得到了新的newstate

• 注意: state中存放了内容a和b，则a和b对应的reducer必须命名为a和b，因为在调用合并后的reducer的时候，是根据key来匹配state中的内容和对应的reducer的

bindActionCreators(actionCreators, dispatch)

bindActionCreators(actionCreators, dispatch)的作用是将多个action生成器与dispatch绑定，action生成器的作用是传入数据，返回固定类型的action，利用生成的action去操作state的改变，将action生成器与dispatch绑定的意思就是传入数据，生成action并自动将action传入dispatch

• bindActionCreators(actionCreators, dispatch)核心源码

// 返回一个箭头函数，调用这个箭头函数，就会产生对应的action，并调用dispatch方法
function bindActionCreator(actionCreator, dispatch) {
  return (...args) => dispatch(actionCreator(...args))
}

export default function bindActionCreators(actionCreators, dispatch) {
  
  // 获取各个action生成器的名称
  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)
    }
  }
  // 返回了一个对象
  return boundActionCreators
}

使用：

function mapDispatchToProps(dispatch){
    return {
        userInfoActions: bindActionCreators(userInfoActions, dispatch)
    }
}
加入userinfo中包含了一个关于用户改变的actioncreator（update）
则通过this.props.userInfoActions.update(data)就可以生成一个关于用户改变action，
并直接传递给dispatch来实现对state的操作

react-redux常用内容

• Provider - 一个react组件，可以将从createStore返回的store放入context中，使子组件可以获取并操作store
• connect - 将react组件与redux连接

connect

调用connect会产生一个新组件，这个组件的state与store中存放的state有关，并且它将state和对state的操作通过props的方式传递给一个子组件，在这个新组件中设置了一个监听器，并放入了store的subscribe中，当调用dispatch方法的时候，会触发这个监听器，而这个监听器的内容就是利用store中的state来更新自己的state(setState)。因此当调用dispatch时，就会触发该组件的更新。