所以，我正在 Build 一个全新的React项目，并将我的所有产品更新到最新版本 .
这导致了项目中的一些夹板破损，所以我要经历并纠正这些 .
我似乎遇到了相互矛盾的规则 . React / prefer-stateless-function试图告诉我将我的组件编写为纯函数，但如果我这样做，我就不能再使用装饰器将我的组件连接到我的Redux存储 .
人们如何解决这个问题？有问题的组件是一个"dumb"组件（例如只有道具，没有状态），所以老实说它应该写成纯函数，但后来我失去了通过 @asyncConnect 和 @connect 将它连接到我的商店的能力 .
Class component with decorators:
@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
}
Pure function component:
// How can I use decorators?
export default function UserProfile(props) {
...stuff
}
Case of two decorators combined:
@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
}
1 回答
Redux不需要装饰工作，
connect实际上只是一个功能 . 你可以像这样使用它：