React依赖注入说明（mapStateToProps/mapDispatchToProps）

本博客主要来讲一下React依赖注入说明，其中涉及到mapStateToProps()和mapDispatchToProps()两种方法。

---

在react-redux开发中每个模块有自己的state用来统一管理视图数据

（1）将需要的state的节点注入到与此视图数据相关的组件上

function mapStateToProps(state, ownProps) {    return {            loading:state.getIn(['projectPre', 'projectMgr', 'loading']),            data:state.getIn(['APP', 'data']),      ...    }    // loading、data都是来自对应的reduce}

（2）将需要绑定的响应事件注入到组件上

function mapDispatchToProps(dispatch){    return {        ...bindActionCreators(action, dispatch)    }}// mapDispatchToProps()函数的bindActionCreators、action需要引入    // import * as action from '../action';    // import { bindActionCreators } from 'redux';----// 多个action 引入import * as action from '../action';import * as action2 from '../../../inde/action';function mapDispatchToProps(dispatch){    return {        ...bindActionCreators(action, dispatch)        ...bindActionCreators(action2, dispatch)    }}

（3）统筹mapStateToProps和mapDispatchToProps

export default connect(mapStateToProps, mapDispatchToProps)(OtherMsg)// OtherMsg 是类名// class OtherMsg extends React.Component { // 具体的内容}

---

最后，说一下react-redux开发的基本结构。

开发环境调用后台路径配置：`proxy.config.js`文件下可以自由定义接口调用到的后台地址，业务模块不要出现应用路径(BackGround)；各个模块目录下：- api.js      定义与后台交互的接口方法- action.js   定义页面操作触发的动作(eg. 点击查询按钮)- reducer.js  定义触发动作后的影响(eg. 查询完成后将查询结果set回state，视图自动刷新)

欢迎指正。