本博客主要来讲一下React依赖注入说明,其中涉及到mapStateToProps()和mapDispatchToProps()两个函数。
在react-redux开发中每个模块有自己的state用来统一管理视图数据
(1)将需要的state的节点注入到与此视图数据相关的组件上
function mapStateToProps(state, ownProps) {
return {
loading:state.getIn(['APP', '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 '../../index/action';
function mapDispatchToProps(dispatch){
return {
...bindActionCreators(action, dispatch),
...bindActionCreators(action2, dispatch)
}
}
------------------------------------
------------------------------------
// 引入一个action里面的多个方法
import { function1, function2, function3 } from '../webs/action'
function mapDispatchToProps(dispatch) {
return {
...bindActionCreators({ afunction1, function2, function3 }, dispatch)
}
}
(3)统筹mapStateToProps和mapDispatchToProps
export default connect(mapStateToProps, mapDispatchToProps)(DemoClass)
// OtherMsg 是类名
// class DemoClass extends React.Component { // 具体的内容}
(4)综合
import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as action from '../action';
import * as action2 from '../../../inde/action';
import { function1, function2, function3 } from '../webs/action'
class DemoClass extends React.Component {
render() { return ( <div></div> ) }
}
function mapDispatchToProps(dispatch){
return {
...bindActionCreators(action, dispatch),
...bindActionCreators(action2, dispatch),
...bindActionCreators({ function1, function2, function3 }, dispatch)
}
}
function mapStateToProps(state, ownProps) {
return {
loading:state.getIn(['APP', 'loading']),
data:state.getIn(['APP', 'data']),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(DemoClass)
最后,说一下常规react-redux开发的基本结构。
开发环境调用后台路径配置:可以使用代理,例如`proxy.config.js`
各个模块目录下:
> api 定义与后台交互的接口方法 api.js
> action 定义页面操作触发的动作 action.js
> reducer 定义触发动作后的影响 reducer.js