React-Redux中未传Props的Menu为何出现冗余Props？求解决方案

这是个很常见的Redux connect 函数使用问题，我来帮你拆解原因和解决办法：

为什么会出现额外的props？ #

最核心的原因是Redux的connect函数有默认行为：当你没有显式定义完整的mapDispatchToProps时，它会自动把dispatch函数作为props注入到你的组件中。

看你的Menu组件代码：

function mapDispatchToProps(dispatch){ return ... }

如果这里的return ...只是简单返回了{ dispatch }，或者你甚至没有定义mapDispatchToProps（直接省略第二个参数），connect都会默认把dispatch加到组件props里。这就导致你打印props时，除了从state.configuration.menu映射来的属性，还多了一个dispatch属性。

另外还有一种小概率情况：如果你的mapStateToProps不小心混入了其他state内容，或者reducer返回的state.configuration.menu本身包含多余属性，也会导致props里出现额外内容，但这种情况需要检查你的reducer逻辑。

如何让Menu组件仅保留store映射的props？ #

根据你的需求，有几种可行的方案：

1. 显式定义mapDispatchToProps，只返回需要的action creators #

使用Redux的bindActionCreators工具，把你需要的action包装后返回，这样props里只会有这些action函数，不会出现额外的dispatch：

import { bindActionCreators } from 'redux';
// 导入你的Menu相关action
import { fetchMenuData, toggleMenu } from '../actions/menuActions';

function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    fetchMenuData,
    toggleMenu
  }, dispatch);
}

2. 不需要dispatch映射时，直接传null或空对象给mapDispatchToProps #

如果你的Menu组件不需要触发任何action，完全只读store数据，那么可以直接把connect的第二个参数设为null，或者返回空对象：

// 方案1：传null
export default connect(mapStateToProps, null)(Menu);

// 方案2：返回空对象
function mapDispatchToProps() {
  return {};
}
export default connect(mapStateToProps, mapDispatchToProps)(Menu);

3. 检查mapStateToProps的返回值 #

确保你只返回state.configuration.menu的内容，不要混入其他state属性：

function mapStateToProps (state) {
  // 只返回menu相关的state，不要扩展其他内容
  return { ...state.configuration.menu };
}

如果state.configuration.menu本身包含多余属性，那需要调整你的reducer，确保它只返回Menu组件需要的数据。

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