mapDispatchToProps简洁Object写法分析
React-Redux正常的写法分析
在Connect函数中有两个主要的参数就是
- mapStateToProps
- mapDispatchToProps
其中前者很好理解，是返回一个Object 例如
const mapStateToProps = (state, ownProps) => {
let obj = {
count: state.count + ownProps.count
}
//返回一个新的Object作为Component的Props
return obj
}
返回的Object中的key(例如上文中的count)是可以在Component里通过 this.props.count 来调用的
而mapDispatchToProp常规的写法应该是返回一个Object，这个Object与 mapStateToProps 的返回值不同的是
它的value并不是一个固定值，而是一个返回值为dispath()方法的回调函数const mapDispatchToProps = (dispatch, ownProps) => {
let actionObject1 = actions.increase(...args);
let actionObject2 = actions.decrease(...args);
return {
increase: ()=>(dispatch(actionObject1)),
decrease: ()=>(dispatch(actionObject2))
}
mapDispatchToProps简要的写法
按照分析，mapDispatchToProps的返回值里的Value字段应该是由dispatch的结果
但是好多示例代码中并没有用到dispatch这个变量，而是直接把Action作为Object的Value进行返回 例如
import {switchRightBar} from "../../actions/RightBar";
export connect(()=>({}), {switchRightBar})(UserBox);
原因是官方文档中的
[mapStateToProps(state, [ownProps]): stateProps] (Function) [mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function)
mapStateToProps 只能是Function，而mapDispatchToProps既可以是Function，也可以是Object
- Function: 一组回调函数，函数返回值为dispatch方法，既是常规写法
- Object: 直接传入一个由Action组成的Object，既是简便写法
所以说如果connect第一参数要传空，要使用 ()=>({})
MD。。。我讨厌JS。。。。写法规范这么复杂
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
