在Redux中,每个容器都有一个连接？

Question

在我以前的项目中,我通常只有一个connect(mapStateToProps, mapDispatchToProps)(App).但是当我今天查看官方示例时,我发现connect()每个容器几乎都有一个.

有多个有什么好处connect()？

Answer 1

想象一下Redux版本的Stack Overflow的Q&A页面.您将拥有相当多的组件:问题及其投票,答案和投票,Markdown编辑器获取更多答案,顶部的个人资料链接以及右侧的相关和网络问题.相应的Redux商店可以包含活动问题,活动答案,相关问题,用户配置文件和Markdown编辑器的子对象.

connect如上所述,您可以使用单个顶级,但connect单独提供每个组件可提供性能和封装:

• 单个顶级connect意味着App只要Redux存储库值发生变化,顶层就会重新呈现,然后它必须将这些道具传递给它的每个子组件(必须重新渲染或检查shouldComponentUpdate).如果您connect单独使用每个组件,那么,例如,当您在Markdown编辑器中键入内容并更新编辑器的商店切片时,只有Markdown编辑器重新渲染.
• 单个顶级connect意味着顶级App需要知道其下的所有内容,以便它可以传递所有需要的道具和事件本身.个人connect提供封装:配置文件栏可以connect提供它所需的道具和动作创建者,而更高级别的组件不必知道或关心细节.