今天看前辈写的代码,看到mapStateToProps&&mapDispatchToProps处,不明白,于是又是各种找资料,在CSDN博客中发现一篇好文,摘抄到此,方便自己阅读!
原文如下:http://blog.csdn.net/genius_yym/article/details/64130120
在react-redux开发中每个模块有自己的state用来统一管理视图数据
(1)将需要的state的节点注入到与此视图数据相关的组件上
使用 React Redux 库的 connect() 方法来生成容器组件前,需要先定义 mapStateToProps 这个函数来指定如何把当前 Redux store state 映射到展示组件的 props 中。
(2)将需要绑定的响应事件注入到组件上
除了读取 state,容器组件还能分发 action。类似的方式,可以定义mapDispatchToProps() 方法接收 dispatch() 方法并返回期望注入到展示组件的 props 中的回调方法。它可以是一个函数,也可以是一个对象。如果mapDispatchToProps是一个函数,会得到dispatch和ownProps(容器组件的props对象)两个参数。
(3)统筹mapStateToProps和mapDispatchToProps
最后,说一下react-redux开发的基本结构。
开发环境调用后台路径配置:`proxy.config.js`文件下可以自由定义接口调用到的后台地址,业务模块不要出现应用路径(BackGround);各个模块目录下:- api.js定义与后台交互的接口方法- action.js定义页面操作触发的动作(eg. 点击查询按钮)- reducer.js定义触发动作后的影响(eg. 查询完成后将查询结果set回state,视图自动刷新)
补充:自己项目实例(aec-app):