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

Question

有人可以向我解释一下,为什么Redux有两个功能mapStateToProps,mapDispatchToProps并且两个都为容器添加了道具？

定义:

mapStateToProps是一个实用程序,可以帮助您的组件获得更新状态(由其他一些组件更新)

mapDispatchToProps是一个实用程序,它将帮助您的组件触发一个动作事件(可能导致应用程序状态更改的分派操作)

为什么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)
  }

}

在codesandbox上查看此Redux示例

Answer 1

@Andrey Prokhorov是对的,你问的很有趣.今天早些时候我发现自己陷入了github问题的困境,并发现了这个问题(添加state为第三个参数mapDispatchToProps).虽然标题似乎没有关系,但如果你仔细阅读评论,gaearon(react-redux的创建者)解释说:

请看#1.此选项已被考虑并被拒绝.是的,在每次调度时重新绑定动作创建者的性能非常糟糕,如果我们让人们在绑定动作创建者的同一个地方访问状态会发生这种情况.从技术上讲,他们现在仍然可以使用mergeProps,但它隐藏得很好,以至于没有Redux经验的人不会错误地发现它.

我还链接到了gaearon与react-redux相关联的第一个问题,在那里讨论了它(它确实在github上为react-redux问题#1).我敢肯定他们可以改变它你描述的方式,但我认为gaearon的评论总结了它:

这个库的目标是鼓励高性能模式,否则人们会说"Redux很慢!",即使原因是它们的次优功能绑定代码.我们不希望这种情况发生,所以我们宁愿让某些不合格的案例更难实施.