为啥 mapStateToProps 和 mapDispatchToProps 不只是 Redux 中的一个函数？

Posted 2023-02-22

【中文标题】为啥 mapStateToProps 和 mapDispatchToProps 不只是 Redux 中的一个函数？

【英文标题】：Why mapStateToProps and mapDispatchToProps are not just one function in Redux?为什么 mapStateToProps 和 mapDispatchToProps 不只是 Redux 中的一个函数？

【发布时间】：2018-05-10 02:30:16

【问题描述】：

有人可以向我解释为什么 Redux 有两个函数 mapStateToProps 和 mapDispatchToProps 都向容器添加道具吗？

定义：

ma​​pStateToProps 是一个帮助您更新组件的实用程序 状态（由其他一些组件更新）

ma​​pDispatchToProps 是一个实用程序，可以帮助您的组件触发 一个动作事件（调度可能导致改变的动作 应用程序状态）

为什么 Redux 团队选择将其分解为两个映射函数 - 即为什么不只有一个函数 mapToProps(state, dispatch, props) 两者兼而有之？

仅仅是关注点分离/更容易理解的原因吗？ 是因为在mapDispatchToProps 中重新绑定的性能问题会为每次更改创建新函数吗？为动作创建绑定提供单独的功能将有助于避免这项额外的工作？考虑到每次状态更改都会调用mapStateToProps。

示例：

const increaseAction =  type: 'increase' 

class Counter extends Component 
  render() 
    const  value, onIncreaseClick  = this.props
    return (
      <div>
        <span>value</span>
        <button onClick=onIncreaseClick>Increase</button>
      </div>
    )
  


function mapDispatchToProps(dispatch) 
  return 
    onIncreaseClick: () => dispatch(increaseAction)
  

看到这个Redux example on codesandbox

【问题讨论】：

Redux 的作者 Dan Abramov 解释说 here mapDispatchToProps 为每个动作创建者分配函数，当你有很多组件时，这是一项非常昂贵的重做操作。看起来有两种不同的机制可以检测 redux 何时需要更新 state 和 action creator 绑定——因此有两个不同的函数：mapStateToProps 和 mapDispatchToProps。这是答案吗？

【参考方案1】：

@Andrey Prokhorov 是对的，你问的很有趣。我今天早些时候发现自己陷入了 github 问题的深处，并发现了这个问题 (Add state as the third parameter to mapDispatchToProps)。虽然标题似乎没有关联，但如果您深入研究 cmets，gaearon（react-redux 的创建者）解释说：

请查看#1。该选项已被考虑并 被拒绝。是的，重新绑定动作创建者对性能非常不利 在每次调度时，如果我们让人们访问就会发生这种情况 他们绑定动作创建者的同一位置的状态。技术上 他们现在仍然可以使用 mergeProps 做到这一点，但它隐藏得足够好 没有使用 Redux 经验的人不会通过以下方式发现它 错误。

我还链接到了 gaearon 链接到的第一个问题，用于讨论它的 react-redux（它实际上是 github 上的 react-redux 问题 #1）。我相信他们可以将其更改为您描述的方式，但我认为 gaearon 的评论总结了这一点：

这个库的目标是鼓励高性能模式，因为 否则人们会说“Redux 很慢！”即使原因是他们 次优的函数绑定代码。我们不希望这种情况发生，所以 我们宁愿让某些表现不佳的案例更难实现。

【讨论】：

通常，库的创建者会尝试抽象出库代码的实际工作方式，即隐藏实现细节，例如 redux state 和 dispatched actions 如何转换为组件的 props 之间的差异。这不是 Redux 的情况。感谢您的评论，原因变成了教育目的！遗憾的是，没有多少人真正考虑过这样的实现，在我问这个问题后的前 2 周内，这个问题的浏览量不到 100 次 :)