React:了解Redux用法之Reducers

开课吧开课吧锤锤2021-07-16 17:16

Redux是Reducers实际完成了状态数据更改的工作,使用Redux时,很多人可能也只是似懂非懂,我们不知道它是如何工作的,也不知道如何建立这种关系,所以只有深入源代码才更清楚它的作用机制。  

Redux用法之Reducers

1.Flux中事件的定义  

还是看看Flux中是如何定义的吧,在Flux中,事件流是非常清楚的。  

a.我们定义Action  

module.exports = {
  deletePersonByID: function(id) {
    AccountDispatcher.dispatch({
      type: ActionTypes.DELETE_PERSON,
      id: id
    });
  }
}

b.在store中定义事件和action对于的操作  

定义事件:varCHANGE_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等多个函数共同完成,然而如此做法,对性能影响是否很大,这还得进一步查看相关代码才能解惑。  

以上就是开课吧广场小编为大家整理发布的“React:了解Redux用法之Reducers”一文,更多Web教程相关内容尽在开课吧Web教程频道。 

免责声明:本站所提供的内容均来源于网友提供或网络搜集,由本站编辑整理,仅供个人研究、交流学习使用。如涉及版权问题,请联系本站管理员予以更改或删除。
有用
分享
全部评论快来秀出你的观点
登录 后可发表观点…
发表
暂无评论,快来抢沙发!
云开发实战特训营