react依赖注入之mapStateToProps&&mapDispatchToProps

今天看前辈写的代码,看到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):

 
原文地址:https://www.cnblogs.com/weizhxa/p/11689933.html