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