可以将类似连接的组件包装在同一个 HoC 中，而不是让它们都以与 auth reducer 相同的方式连接（）吗？

Question

我的一些组件只连接到 auth reducer，唯一的原因是它们需要知道用户是否 authenticated/logged。我创建了一个高阶组件 (withAuth) 来包装这些组件（并添加了 isLogged 属性），但我不知道它是否是一个好的模式。

ps - 所描述的用例已简化，还有几个 properties/actions 以这种方式映射。

感谢您的帮助！

编辑 - 这里有一些代码来说明：假设我们有一些小部件共享该代码（添加一些映射操作，props，等等）

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)

我开始怀疑连接 component/containers 是否有问题，以及 HoC 应该是什么（或者是什么？）。

无论如何，问题是：这是好棋吗？

Answer 1

您的代码完全没问题。连接组件的惯用方法是将最 "closer" 的组件连接到它们需要的数据。创建一个 HoC withAuth 绝对是一个好方法。您不必太担心应用程序中连接组件的数量，因为 pub/sub 模式的复杂度为 O(n)，连接组件数量为 n。由于您不太可能拥有数千个，因此处理许多连接到商店的 HoC 并不是什么大问题。

可以将类似连接的组件包装在同一个 HoC 中，而不是让它们都以与 auth reducer 相同的方式连接（）吗？

is it ok to wrap similarly connected components in the same HoC instead of having them all connect() the same way to the auth reducer?

reactjs

redux

react-redux