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时，就会触发该组件的更新。
