可以将整个Redux状态对象传递给React组件吗？

Question

我们有一个组件需要访问Redux的商店。

import React from 'react'
import { connect } from 'react-redux'

const Component = (props) => {
   ... code ...
}

我们使用connect这个组件连接到商店。

export default connect(mapStateToProps)(Component)

我们现在需要定义mapStateToProps作为connect的第一个参数传递。

const mapStateToProps = state => ({ ...state })

为什么或为什么不是将数据注入组件的可接受方法？ 这是否会在触发渲染的每种情况下重新渲染此组件？

欢迎提供文档和示例。

演示应用程序

仅供参考：我正在为本视频的第二部分做这件事，并考虑将其列为最终解决方案。 很想知道Stack对这段代码的看法。

Answer 1

我认为将整个Redux状态传递给组件是个坏主意。

虽然您的组件今天使用了商店的所有变量，但将来可能会出现不同的情况。

想象一下，在未来，您或其他人会创建许多新的组件来处理商店中的变量。 你看？ 第一个组件会收到很多不必要的数据。

Answer 2

它只会对组件实际使用的道具进行重新渲染，React就像那样聪明。 但是，我个人的偏好是不传递整个对象，它可能更容易编码，但是不那么冗长。

const mapStateToProps = state => ({ ...state })

在这行代码中，您不知道该组件将使用什么，这会使您的代码更不易读取，我也想控制命名，这就是我更喜欢的原因

const mapStateToProps = state => ({ 
  primary,                                    
  secondary,
  myComponentActive: active                                   
})

现在，当有人正在阅读您的代码时，他确切地知道发生了什么。

如果您想要切换到React Hooks，省略mapStateToProps对象，这也为您提供了更好的概述。 即使仍然在讨论Hooks是否是未来，我觉得它非常方便。 虽然您可能会讨论转换的可能性，但这对您的视频没什么用处！