React Redux容器组件
问题描述:
我在写一个简单的React + Redux容器组件。下面给出的是代码React Redux容器组件
export default class LoginContainerComponent extends React.Component {
constructor() {
super();
connect(this.mapStateToProps, this.mapDispatchToProps)(LoginComponent)
}
render() {
return (<LoginComponent></LoginComponent>);
}
mapStateToProps(state) {
return {
loginText: 'Login'
,
registerText: 'Register'
}
}
mapDispatchToProps(dispatch) {
return {
onLoginClick:() => {
alert('login clicked');
},
onRegisterClick:() => {
alert('register clicked');
}
}
};
}
我围绕这个 1.几个问题是这个总体方针是正确的,具体在哪里,我定义的连接(在构造函数?很多我所看到的限定外连接的例子该组件,但如果我在组件外定义,那么我无法访问mapStateToPrope和mapDispatchToProps,我认为它应该在组件内部。
答
连接功能是一个high order component(HOC),并不需要被定义为一个类本身。该redux文件有一些examples如何做到这一点。他们正在使用ES6语法,您可能不会这样做,因此以下内容对您而言是等同的。
function mapStateToProps(state) {
return {
loginText: 'Login'
,
registerText: 'Register'
}
}
function mapDispatchToProps(dispatch) {
return {
onLoginClick:() => {
alert('login clicked');
},
onRegisterClick:() => {
alert('register clicked');
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(LoginComponent)
答
这是一个很好的做法,让你的组件和一个单独的容器。展示和容器组件,你可以在这个Medium post by the creator of Redux阅读更多。但基本上这个想法是,你保持你的mapStateToProps
和mapDispatchToProps
以外的组件,它将收到它需要的所有东西作为道具。
答
在这里,你去。
class LoginContainerComponent extends React.Component {
constructor(props) {
//you actually dont need this atm
super(props);
}
render() {
return (<LoginComponent></LoginComponent>);
}
}
const mapStateToProps = state => ({
loginText: 'Login',
registerText: 'Register'
});
const mapDispatchToProps = dispatch => ({
onLoginClick:() => alert('login clicked'),
onRegisterClick:() => alert('register clicked')
});
export default connect(mapStateToProps, mapDispatchToProps)(LoginComponent);