React实战-深入源码了解Redux用法之Reducers

React实战-深入源码了解Redux用法之Reducers
在Redux中Reducers是真正实现state数据变化的工作。我们在使用Redux时，可能也只是似懂非懂，我们不知道它是如何工作的，我们知道在Action中定义事件，在Reducers中定义对应事件对应的操作，我们知道他们有关系，但如何建立的关系不知道（微信：react-javascript）。
1.Flux中事件的定义
还是看看Flux中是如何定义的吧，在Flux中，事件流是非常清楚的。
a.我们定义Action
module.exports = {
  deletePersonByID: function(id) {
    AccountDispatcher.dispatch({
      type: ActionTypes.DELETE_PERSON,
      id: id
    });
  }
}
b.在store中定义事件和action对于的操作
定义事件：var CHANGE_EVENT = 'change';
定义事件绑定与解绑定：
addChangedListener(callback)
  {
    this.on(CHANGE_EVENT, callback);
  },
  removeChangedListener(callback){
    this.removeListener(CHANGE_EVENT, callback);
  }
定义事件对应的操作：
PersonDispatcher.register(function (action) {
  switch (action.type) {
    case ActionTypes.DELETE_PERSON:
      PersonStore.deleteByID(action.id);
      break;
}
}
c.在comonent中关联事件：
componentDidMount(){
    PersonStore.addChangedListener(this._onChange);
  },
  componentWillUnmount(){
    PersonStore.removeChangedListener(this._onChange);
  },
整个过程清楚明了。
2.Redux中却少了很多环节
a.定义Action，基本与Flux相同
b.定义reducers:我们常常看到的例子是这样的
export default function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}
或者是类似的变种吧。
3.Reducers源码分析
现在问题来了背后的数据流到底是如何产生的？还是看看源码吧。
export default function combineReducers(reducers) {
var reducerKeys = Object.keys(reducers)
  var finalReducers = {}
  for (var i = 0; i < reducerKeys.length; i++) {
var key = reducerKeys[i]
.......
 return function combination(state = {}, action) {
...........
var hasChanged = false
    var nextState = {}
    for (var i = 0; i < finalReducerKeys.length; i++) {
      var key = finalReducerKeys[i]
      var reducer = finalReducers[key]
      var previousStateForKey = state[key]
      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
  }
}
}
 
从源码中我们可以看到：在Redux中为了方便统一管理，省去了事件的绑定与解绑定，将事件作为事件队列进行统一管理。
var reducerKeys = Object.keys(reducers)
  var finalReducers = {}
  for (var i = 0; i < reducerKeys.length; i++) {
var key = reducerKeys[i]
.....
}
每次执行一个事件操作时，并不仅仅只执行这个事件，而是会将事件队列中的所有事件进行遍历。
for (var i = 0; i < finalReducerKeys.length; i++) {
......
}
 
在每次遍历时都在同一state上构建数据树，同时在遍历时会判断本事件是否导致了整个state数据树的数据变化。
hasChanged = hasChanged || nextStateForKey !== previousStateForKey
    }
    return hasChanged ? nextState : state
......
}
看到这里是否清楚了？好像还是没有,Redux中的事件与数据流的管理，并不只是由一个函数完成的，而是由reducers、connect等多个函数共同完成，然而如此做法，对性能影响是否很大，这还得进一步查看相关代码才能解惑。