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

1. Function: 一组回调函数，函数返回值为dispatch方法，既是常规写法
2. Object: 直接传入一个由Action组成的Object，既是简便写法

所以说如果connect第一参数要传空，要使用 ()=>({})

MD。。。我讨厌JS。。。。写法规范这么复杂

赏

请问老板还招人么(/ω＼)

支付宝

微信