React Redux container component

Question

Я пишу простой компонент React + Redux Container. Ниже приводится код

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