首页 文章

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

提问于
浏览 次
9

有人可以向我解释为什么 Redux 有两个函数 mapStateToProps 和 mapDispatchToProps 这两个函数都添加到容器的原因是什么？

定义：

mapStateToProps是一个实用程序，可以帮助您的组件获得更新状态（由其他一些组件更新）mapDispatchToProps是一个实用程序，它将帮助您的组件触发一个动作事件（可能导致更改应用程序状态的调度操作）

为什么Redux团队选择将其分解为两个映射函数 - 即为什么不只有一个函数mapToProps（state，dispatch，props）同时执行这两个函数？

  • 这只是关注点的分离/更容易理解的原因吗？

  • 是否因为 mapDispatchToProps 中重新绑定的性能问题为每次更改创建了新功能？具有独立的动作创作绑定功能将有助于避免这项额外的工作？考虑到每个状态变化都会调用 mapStateToProps .

Example:

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

reactjs redux react-redux

1 回答

  • 7

    @Andrey Prokhorov是对的，你问的很有趣 . 我今天早些时候发现自己陷入了github问题的困境，并发现了这个问题（Add state as the third parameter to mapDispatchToProps） . 虽然 Headers 似乎没有关系，但如果你仔细阅读评论，gaearon（react-redux的创建者）解释说：

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

    我还链接到了gaearon与react-redux相关联的第一个问题，在那里讨论了它（它确实是#ith在github上为react-redux排名第一） . 我相信他们可能会改变它你描述的方式，但我认为gaearon的评论总结了它：

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

    回复于

相关问题