在 React 和 Redux 的不同组件中访问 store 的相同部分答案

【问题标题】：Accessing the same part of the store in different components in React and Redux在 React 和 Redux 的不同组件中访问 store 的相同部分
【发布时间】：2016-03-09 23:26:46
【问题描述】：

我目前正在使用 React 和 Redux 构建应用程序。在应用程序的两个单独部分中，我想从我的商店访问一个库列表。可以将所有库作为卡片显示为页面的主要内容。另一个将库显示为页面特定部分中的一个小下拉列表。

到目前为止，我的实现想法是要么使用一个高阶组件来监听库的存储并将其用于两个不同的展示组件，要么使用一个展示组件从容器中获取样式作为道具。

【问题讨论】：

好吧，如果他们需要完全相同的道具，你可以只用两个不同的“容器”（智能？）组件包装两个展示（愚蠢？）组件，它们使用完全相同的 mapStateProps 函数。

标签： javascript reactjs ecmascript-6 redux

【解决方案1】：

到目前为止，我的实现想法是要么使用一个高阶组件来监听库的存储并将其用于两个不同的展示组件，要么使用一个展示组件从容器中获取样式作为道具。

这些听起来都不是理想的解决方案。将 React 与 Redux 结合使用的美妙之处在于它将您的演示文稿与您的数据分开。没有理由不能将两个组件 connected 放到商店中。确实，这是encouraged。

例如：

// LibrariesCards.jsx
export default connect((state) => ({
  libraries: state.libraries
}))(LibrariesCards);

// LibrariesDropdown.jsx
export default connect((state) => ({
  libraries: state.libraries
}))(LibrariesDropdown);

【讨论】：