使用connect的mapToProps vs读取和调度到商店作为全局?

时间:2017-06-21 17:52:14

标签: reactjs redux connect

A)使用连接状态和调度函数的连接方法与组件之间有什么区别?B)只是在组件中执行调度以及直接访问商店的函数?

(不是ES2015)

2 个答案:

答案 0 :(得分:2)

importing the store directly上的Redux常见问题解答中引用:

  

虽然可以通过直接导入来引用您的商店实例,但这不是Redux中推荐的模式。如果您创建一个商店实例并从模块中导出它,它将成为一个单例。这意味着将Redux应用程序隔离为更大的应用程序的组件(如果有必要)或启用服务器呈现将更加困难,因为在服务器上您要为每个请求创建单独的存储实例。

我最近还写了Reddit comment on why you should use React-Redux and connect而不是直接与商店交谈。引用:

  

首先,当您可以手动编写代码以订阅React组件中的Redux商店时,完全没有理由自己编写该代码 。 React-Redux的connect函数生成的包装器组件已经为您提供了存储订阅逻辑。

     

其次,connect做了大量工作,以确保您的实际组件仅在实际需要时重新呈现。这包括大量的memoization工作,以及来自父组件的props的比较以及mapStateToProps函数为该组件返回的值。如果不使用connect,您就会放弃所有这些性能改进,并且您的组件将不必要地重新渲染。

     

第三,仅通过连接顶级组件,您还会导致应用程序的其余部分不必要地重新呈现。最佳性能模式是连接应用程序中的许多组件,每个连接的组件仅通过mapStateToProps提取实际需要的数据。这样,如果任何其他数据发生变化,该组件将不会重新渲染。

     

第四,您手动将商店导入到组件中,并将它们直接连接在一起,从而使测试组件变得更加困难。我个人试图保持我的组件"不知道" Redux。他们从不引用props.dispatch,而是调用预先约束的动作创建者,如this.props.someFunction()。该组件不知道"它是一个Redux动作创建者 - 该函数可以是来自父组件,绑定的Redux动作创建者或测试中的模拟函数的回调,从而使组件更具可重用性和可测试性。

     

最后,使用React和Redux构建的绝大多数应用都使用React-Redux库。它是将两者绑定在一起的官方方式,而做其他事情只会让其他开发人员看到你的项目时感到困惑。

有关详细信息,请参阅:

来源:我是Redux维护者,也是Redux FAQ的作者。

答案 1 :(得分:0)