可以將整個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是否是未來，我覺得它非常方便。 雖然您可能會討論轉換的可能性，但這對您的視頻沒什么用處！