是否可以将类似连接的组件封装在同一HoC中，而不是让它们都以相同的方式连接()到auth-reducer

Question

我的一些组件只连接到auth-reducer，唯一的原因是他们需要知道用户是否经过了身份验证/记录。我创建了一个更高阶的组件（withAuth）来包装这些组件（并添加isLogged道具），但我不知道它是否是一个好的模式。

ps-所描述的用例被简化了，还有更多的属性/操作以这种方式映射。

谢谢你的帮助！

编辑-这里有一些代码要说明：让我们假设我们有几个小部件共享代码（添加一些映射的动作、道具等）

import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { getIsLogged } from 'authManager/reducer'
const Widget1 = props => {
  return <div>{props.isLogged ? 'yay!' : 'nope'}</div>
}
Widget1.propTypes = {
  isLogged: PropTypes.bool.isRequired
}
const mapStateToProps = (state) => {
  return {
    isLogged: getIsLogged(state)
  }
}
export default connect(
  mapStateToProps
)(Widget1)

我刚刚重构创建了以下HoC

import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { getIsLogged, getFirstName } from 'authManager/reducer'
const withAuth = ComposedComponent => {
  class _hoc extends React.Component {
    render () {
      return <ComposedComponent {...this.props} />
    }
  }
  _hoc.propTypes = {
    isLogged: PropTypes.bool.isRequired,
    firstName: PropTypes.string
  }
  const mapStateToProps = (state, {params}) => {
    return {
      isLogged: getIsLogged(state),
      firstName: getFirstName(state)
    }
  }
  return connect(
    mapStateToProps
  )(_hoc)
}
export default withAuth

现在所有以前的小部件都是这样的：

import React, { PropTypes } from 'react'
import withAuth from 'hoc/withAuth'
const Widget1 = props => {
  return <div>{props.isLogged ? 'yay!' : 'nope'}</div>
}
Widget1.propTypes = {
  isLogged: PropTypes.bool.isRequired
}
export default withAuth(Widget1)

我开始怀疑连接的组件/容器是否有问题，以及HoC应该是什么（或者是什么？）。

不管怎样，问题是：这是不是一个好的举动？

Answer 1

您的代码非常好。连接组件的惯用方法是连接那些最"接近"所需数据的组件。创建一个HowithAuth无疑是一个很好的方法。您不必太担心应用程序中连接组件的数量，因为pub/sub模式的复杂性是O（n），n是连接组件的数目。由于你不太可能有成千上万的HoC，与许多连接到商店的HoC打交道并不是什么大不了的事。