React / prefer-stateless-function vs class decorators？

Question

所以，我正在建立一个全新的React项目，并将我的所有产品更新到最新版本。

这导致了项目中的一些夹板破损，所以我要经历并纠正这些。

我似乎遇到了相互矛盾的规则。 React / prefer-stateless-function试图告诉我将我的组件编写为纯函数，但如果我这样做，我就不能再使用装饰器将我的组件连接到我的Redux存储。

人们如何解决这个问题？ 有问题的组件是一个“哑”组件（例如只有道具，没有状态），所以老实说它应该写成一个纯函数，但后来我失去了通过@asyncConnect和@connect将它连接到我的商店的能力。

带装饰器的类组件：

@connect(
  state => ({ // eslint-disable-line
    user: state.publicData.user.data,
    error: state.publicData.user.error,
    loading: state.publicData.user.loading,
  }),
  { initializeWithKey })
export default class UserProfile extends Component {
  ...stuff
}

纯功能组件：

// How can I use decorators?
export default function UserProfile(props) {
  ...stuff
}

两个装饰器组合的案例：

@asyncConnect([{
  deferred: true,
  promise: ({ params, store: { dispatch, getState } }) => {
    if (!isLoaded(getState())) {
      return dispatch(loadUser(params.userID))
    }
  },
}])
@connect(
  state => ({ // eslint-disable-line
    user: state.publicData.user.data,
    error: state.publicData.user.error,
    loading: state.publicData.user.loading,
  }),
  { initializeWithKey })
export default class UserProfile extends Component {
  ...stuff
}

Answer 1

Redux不需要装饰器工作， connect实际上只是一个功能。 你可以像这样使用它：

export default connect(mapStateToProps)(props => <div />)