React新手疑问：mapDispatchToProps传递ownProps的作用与覆盖问题

嘿，作为React新手碰到Redux的这些细节问题太正常了，我来帮你一步步拆解清楚～

问题1：为什么mapDispatchToProps没用到props还要传递它？ #

首先得明确：你其实完全没必要在没用到ownProps的情况下特意定义带第二个参数的mapDispatchToProps。

React Redux的mapDispatchToProps有两种常用写法：

• 写法一：直接传一个包含action creator的对象（最简洁推荐）：

  const mapDispatchToProps = {
    editExpense,
    removeExpense
  };
  

  这种写法下，Redux会自动把这些action creator包装成带dispatch调用的方法，不需要你手动写dispatch(xxx)。
• 写法二：定义一个函数，签名是(dispatch, ownProps?) => {}，这里的ownProps是可选参数。只有当你需要用到组件的外部props（比如路由参数、父组件传入的props）来生成action时，才需要加这个参数。比如你需要用ownProps.match.params.id作为editExpense的id参数，这时候才需要接收ownProps。

如果你的函数里根本没用到ownProps，那完全可以省略第二个参数，甚至换成更简洁的对象写法。你看到的代码里写了props参数却没用到，大概率是冗余写法——可能之前的代码需要用到props后来删掉了，但没清理干净。

另外补充一点：如果你定义了带ownProps的mapDispatchToProps，Redux会在组件的props发生变化时重新调用这个函数，生成新的dispatch props。如果没用到ownProps，这反而会导致不必要的重计算，影响性能。

问题2：传递props到mapDispatchToProps会覆盖用户传入的props吗？ #

先给你揪个代码里的小错误：你写的connect(mapStateToProp, mapDispatchToProp(EditExpensePage);是不对的！正确用法是把mapDispatchToProps函数（或对象）作为第二个参数传给connect，再用connect的返回值包裹组件：

const connectedComponent = connect(mapStateToProps, mapDispatchToProps)(EditExpensePage);

回到你的疑问：你的理解是错误的，mapDispatchToProps不会覆盖用户传入的props。React Redux会把三部分props合并后传给组件：

1. mapStateToProps返回的状态props
2. mapDispatchToProps返回的dispatch方法props
3. 用户直接传入的props（比如你写的<connectedComponent date={2019} />）

只有当这三部分出现同名键时，才会发生覆盖——优先级是：mapStateToProps和mapDispatchToProps的返回值会覆盖用户传入的同名props。比如如果你用户传入了editExpense={xxx}，那mapDispatchToProps返回的editExpense会把它覆盖掉。但像date这种在mapState和mapDispatch里都没出现的键，组件肯定能正常拿到props.date。

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