如何在mapDispatchToProps中访问mapStateToProps添加的属性？

你碰到的这个问题其实挺常见的——先明确一点：ownProps参数指的是父组件传递给当前组件的原始props，并不包含mapStateToProps注入到组件的那些属性，所以你用它拿propertyFromState肯定会得到undefined。

下面给你两种实用的解决方案：

方案一：组件内部调用action时传递state属性（推荐） #

这是最直接也最稳妥的方式。既然mapStateToProps已经把propertyFromState变成了组件的props，你完全可以在组件的事件处理或业务逻辑里，调用action creator时直接把这个props传进去：

// mapDispatchToProps 写法（函数式）
const mapDispatchToProps = (dispatch) => {
  return {
    // 定义一个接收参数的action触发函数
    doSomething: (targetValue) => {
      dispatch({ type: 'DO_SOMETHING', payload: targetValue });
    }
  };
};

// 组件内部使用
class MyComponent extends React.Component {
  handleAction = () => {
    // 直接把mapState注入的propertyFromState传进去
    this.props.doSomething(this.props.propertyFromState);
  };

  render() {
    return <button onClick={this.handleAction}>执行操作</button>;
  }
}

这种方式的好处是，每次调用action时都会拿到最新的propertyFromState值，不会因为state更新但mapDispatchToProps没重新执行而拿到旧数据。

方案二：用mergeProps合并props（适合复杂场景） #

如果你确实需要在mapDispatchToProps的逻辑里直接用到state注入的属性，可以借助connect的第三个参数mergeProps。它会把mapStateToProps返回的state属性、mapDispatchToProps返回的dispatch方法，以及组件的原始props合并成最终传给组件的props。

举个例子：

const mapStateToProps = (state) => {
  return { propertyFromState: state.someModule.targetValue };
};

// 先定义基础的dispatch方法，不绑定state值
const mapDispatchToProps = (dispatch) => {
  return {
    _doSomething: (value) => dispatch({ type: 'DO_SOMETHING', payload: value })
  };
};

// 自定义mergeProps，把state属性绑定到dispatch方法里
const mergeProps = (stateProps, dispatchProps, ownProps) => {
  return {
    ...ownProps,
    ...stateProps,
    // 封装成组件可以直接调用的方法，自动带上state里的propertyFromState
    doSomething: () => dispatchProps._doSomething(stateProps.propertyFromState)
  };
};

// 连接组件时传入mergeProps
export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(MyComponent);

这样组件内部直接调用this.props.doSomething()就可以自动使用最新的propertyFromState值了。

小提醒 #

尽量优先用方案一，因为mapDispatchToProps只会在组件挂载或原始props变化时重新计算，如果state更新但原始props没变化，mapDispatchToProps不会重新执行，容易拿到过时的state值。而方案一每次调用都取最新的props，可靠性更高。

内容的提问来源于stack exchange，提问作者Zhicheng Zhang