我有一个 react (with redux & react-router) 应用程序,它在各个方面都需要根据商店中某些数据的状态以及与商店中的数据相关的一堆其他东西来了解用户是否登录.
为了实现这一点,我创建了一个高阶组件,如下所示:
import React from 'react';
import {connect} from 'react-redux';
export function masterComponent(Component){
class MasterComponent extends React.Component {
constructor(props){
super(props);
}
loggedIn(){
return this.props.player.token? true : false
}
render(){
return (
<Component {...this.props} player={{loggedIn: this.loggedIn()}}/>
);
}
}
UserComponent.propTypes = {
player: React.PropTypes.object
};
function mapStateToProps(state) {
return state;
}
return connect(
mapStateToProps
)(MasterComponent);
}
我的问题是如何最好地将它包裹在我的各个组件周围?目前我已经实现了它,以便每个单独的组件在传递给 connect 时都会被包装,这工作正常但感觉有点低效。IE:
import {masterComponent} from '../HigherOrderComponents/MasterComponent';
export class ResultsPage extends React.Component {
constructor(props){
.....
}
render(){
return (
.....
);
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(masterComponent(ResultsPage));
有一个更好的方法吗?