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 })

为什么不接受将数据注入组件的方法呢？这样会使该组件在触发渲染的每种情况下都重新渲染吗？

欢迎提供文档和示例。

Demo Application

仅供参考：我正在此video的第二部分中进行此操作，并考虑将其作为最终解决方案。很想知道Stack对此代码的想法。

Answer 1

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

尽管您的组件今天使用了商店中的所有变量，但将来情况可能会有所不同。

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

Answer 2

它只会在组件实际使用的道具上重新渲染，React很聪明。但是，我个人的喜好是不传递整个对象，这可能更容易编写代码，但不那么冗长。

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

在这一行代码中，您不知道该组件将使用什么组件，这会使您的代码可读性降低，我也想控制命名，这就是为什么我更喜欢

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

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

如果您想切换到React Hooks，并且省略mapStateToProps对象，这也可以为您提供更好的概述。尽管仍在讨论Hooks是否是未来，但我发现这非常方便。尽管您可能会讨论转换的可能性，但这对您的视频并没有多大用处！

是否可以将整个Redux状态对象传递到React组件中？

2 个答案: