React Redux容器组件

Question

我在写一个简单的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，我认为它应该在组件内部。

Answer 1

连接功能是一个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) 

Answer 2

这是一个很好的做法，让你的组件和一个单独的容器。展示和容器组件，你可以在这个Medium post by the creator of Redux阅读更多。但基本上这个想法是，你保持你的mapStateToProps和mapDispatchToProps以外的组件，它将收到它需要的所有东西作为道具。

Answer 3

在这里，你去。

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);