解读redux中通过connect和bindActionCreators调用store的dispatch方法

2016-11-29 09:20:04:  

今天看官方redux中的todomvc这个实例,找不到在哪里调用store.dispatch这个方法,最后在containers中的App.js文件中的mapDispatchToProps中发现,我看看一下他如何调用:

有代码我们可以看到是调用了bindActionCreators方法把action绑定到了connect方法中,其中connect方法的作用是连接react组件和redux store,也就是说通过connect方法子组件可以获取store中的state和dispatch。

感觉还是没找到在哪调用的dispatch方法,所以把注意力集中在bindActionCreators方法中,搜了下看到一些解释:bindActionCreators的作用是将一个或多个action和dispatch组合起来生成mapDispatchToProps需要生成的内容。

看代码:

不使用bindActionCreators时候:

function mapDispatchToProps(dispatch) {  return {    onIncrement: () => dispatch(increment())  }; }

使用时:

let actions = {
  addItem:  {
    type: types.ADD_ITEM,
    text
  }
}

bindActionCreators(actions, dispatch); 
 @return {addItem:  dispatch({ type: types.ADD_ITEM, text })}

可以看到其实使用了bindActionCreators其实就是把多个action还是用dispatch调用,这样就知道了是在

containers中的App.js中使用redux的connect方法获取store中的state数据和dispatch方法,然后action中声明好类型,然后再通过js事件去触发导出的action方法,因为在bindActionCreators方法中已经把actions和dispatch合并(相当于dispatch({type:type.ADD_ITEM, text})),这样就相当于在containers中这样调用dispatch去改变store中的数据:

store.dispatch({ type: types.ADD_ITEM, text })

这样也就理解了redux说的state在其他地方是只读的,只有store中可以修改的概念了。

Tags :
坐等站主更新~

精品书籍

更多

HTML5与CSS3权威指南代码清单
Sass和Compass设计师指南
JavaScript框架高级编程