在单个组件中使用多个 redux 连接 HOC答案

【问题标题】：Using multiple redux connect HOCs in a single component在单个组件中使用多个 redux 连接 HOC
【发布时间】：2019-05-01 15:13:35
【问题描述】：

嗨????最近我看到一段有趣的代码。

有这个 HOC：

import { connect } from 'react-redux'

const mapProps = store => ({
  someProp: store.some.prop,
})

const withSomeProp = connect(mapProps)

export default withSomeProp

然后它是这样使用的：

export default compose(
  withSomeProp,
  connect(
    mapProps,
    mapDispatch
  ),
)

这种方法好吗？还是我应该担心潜在的性能问题或任何其他错误？

【问题讨论】：

它会给您带来您永远不会知道的名称冲突的风险。如果您想保持代码干燥，我相信selectors pattern 效果更好，并且没有这样的陷阱。

标签： reactjs redux higher-order-functions higher-order-components

【解决方案1】：

我通常建议定义一个更复杂的 mapState 函数来提取此组件所需的两条数据，而不是定义多个 connect 定义只是为了提取不同的数据。

【讨论】：