当 State 已经在全球范围内可用时， mapStateToProps 的目的是什么？答案

【问题标题】：What is the purpose of mapStateToProps when State is already globally available?当 State 已经在全球范围内可用时， mapStateToProps 的目的是什么？
【发布时间】：2026-01-01 05:10:01
【问题描述】：

这是一个一般理论问题。

使用 mapStateToProps 从 Store 中选择一组特定的数据并将其作为 Prop 发送到组件中的目的是什么，而所有这些数据已经对 Store 中的所有组件全局可用？

另一种说法是，为什么我要通过将状态映射到道具的额外步骤，以便我可以使用 props.something 访问数据，而我可以使用 state.something 访问数据？

【问题讨论】：

“当所有这些数据已经对商店中的所有组件全局可用时？” - 所有数据如何已经对所有组件可用？组件只能访问作为 props 传递给它们的 redux 存储中的数据。
相信一定是基于以下几点。在组件内部，如果我正在创建我的映射状态到道具功能，就像const mapStateToProps = (state) => { return { streams: Object.values(state.streams) }; }; 我将状态作为参数在那里......这意味着它在那里可用？虽然我猜这是一个回调函数，所以当它在商店中执行时，它实际上在那里可用，而不是在组件中......我可能刚刚回答了我自己的问题。
如果我控制台日志state.streams 我被告知它是未定义的，所以在这个组件的范围内状态实际上是未定义的。
这能回答你的问题吗？ Understanding React-Redux and mapStateToProps()

标签： reactjs redux react-redux

【解决方案1】：

组件无权访问redux 存储中的所有数据。他们只能访问redux 存储中的数据，这些数据以props 的形式传递给他们。

就您对mapStateToProps的用途的问题而言，以下是mapStateToProps的主要用途：

告诉react-redux任何特定组件需要什么数据。
转换存储状态并将转换后的状态作为道具传递给组件
帮助react-redux 决定是否应因商店更新而重新渲染特定组件。

告诉 React-Redux 数据组件需要什么

mapStateToProps 函数告诉react-redux 特定组件需要来自redux 存储的哪些数据。此函数将整个状态作为参数获取，但问题是您无法在 React 组件中访问它。它被传递给mapStateToProps 函数，而不是你的组件。所以你需要react-redux 将所需的数据作为props 传递给你的组件。

转换存储状态

.mapStateToProps 函数也可用于以适合任何特定组件的方式转换存储状态，例如：

结合来自商店不同部分的不同状态。
将数据作为特定的道具名称传递
以适合组件使用的任何方式转换数据。

帮助 React-Redux 决定是否应该重新渲染特定组件

现在你可能会问，如果我告诉react-redux 将整个state 参数作为prop 传递给我的组件呢？

这样做的问题是，每当redux 存储中的状态更新时，即使组件没有使用已更改状态的任何部分，它也会重新渲染。

此行为是由react-redux 如何使用mapStateToProps 函数来决定是否应重新渲染组件作为商店状态更新的结果。

每当redux 存储更新时，react-redux 对mapStateToProps 函数返回的对象的每个字段进行浅比较（===），如果任何字段不同，您的组件将被重新渲染.

为防止这种行为，您使用mapStateToProps 函数仅获取组件内部实际使用的数据。这样，如果在 redux 存储中更新了任何不相关的数据，它不会导致您的组件重新渲染。

mapStateToProps函数的更多细节见：

React Redux: Extracting Data with mapStateToProps

【讨论】：

这就是答案，如果不相关的状态被更新，这可以防止您的组件重新渲染。

【解决方案2】：

这是因为数据存在于 Redux Store 中。因此，要访问该数据，我们必须传递这个 HOC（高阶组件）mapStateToProps 并将其包裹在我们的组件周围，例如我们案例中的 TodoList

connect(mapStateToProps)(TodoList)

因此，要访问商店的状态数据，我们必须首先通过 props 获取它。
简而言之，Store 中存在的数据是在组件内部通过 props 而不是状态访问的。因为 State 是 Store 原生的，而不是我们使用它的组件。

【讨论】：