使用 connect 的 mapToProps 与作为全局读取并分派到商店？

Question

A）使用将状态和调度函数连接到组件的 connect 方法与 B）在组件中简单地使用执行调度以及直接作为全局访问存储的函数之间有什么区别？

（不是 ES2015）

Answer 1

引用Redux FAQ中关于直接导入store：

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

我最近还写了一篇 Reddit 评论，解释为什么应该使用 React-Redux 和

connect

，而不是直接与商店交谈。引用一下：

首先，虽然您可以手动编写代码来订阅 React 组件中的 Redux 存储，但绝对没有理由自己编写该代码。 React-Redux 的 connect 函数生成的包装器组件已经为您处理了存储订阅逻辑。

其次，

connect

做了很多工作来确保您的实际组件仅在实际需要时重新渲染。这包括大量的记忆工作，以及与父组件的 props 和该组件的

mapStateToProps

函数返回的值进行比较。如果不使用

connect

，您将放弃所有这些性能改进，并且您的组件将一直不必要地重新渲染。

第三，仅连接顶级组件也会导致应用程序的其余部分不必要地重新渲染。最佳性能模式是连接应用程序中的大量组件，每个连接的组件仅通过

mapStateToProps

提取其实际需要的数据。这样，如果任何其他数据发生变化，该组件将不会重新渲染。

第四，您手动将商店导入到组件中，并将它们直接耦合在一起，从而使测试组件变得更加困难。我个人尝试让我的组件“不知道”Redux。他们从不引用

props.dispatch

，而是调用像

this.props.someFunction()

这样的预绑定动作创建者。该组件不“知道”它是一个 Redux 操作创建者 - 该函数可能是来自父组件的回调、绑定的 Redux 操作创建者或测试中的模拟函数，从而使组件更具可重用性和可测试性.

最后，绝大多数使用 React 和 Redux 构建的应用程序都使用 React-Redux 库。这是将两者绑定在一起的官方方式，做任何其他事情只会让其他正在查看您的项目的开发人员感到困惑。

欲了解更多信息，请参阅：

• 有关性能的 Redux 常见问题解答部分
• 有关连接多个组件的 Redux 常见问题解答条目
• 有关组件重新渲染过于频繁的 Redux 常见问题解答条目
• 直接导入store的Redux FAQ入口
• 我的 React/Redux 链接列表中的 Redux Performance 部分
• 最后，我的博客文章实用 Redux，第 6 部分：连接列表、表单和性能和惯用的 Redux：为什么使用操作创建器？.

来源：我是 Redux 维护者，也是 Redux FAQ 的作者。