Reux Redux 컨테이너 구성 요소

Question

간단한 React + Redux 컨테이너 구성 요소를 작성했습니다. 내가 생성자에서 (연결을 정의 특히이 전반적인 접근, 수정 난이 1을 둘러싼 몇 가지 질문을 가지고 코드

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

아래입니다 감안할 때? 내가 외부 연결 정의합니다 본 예제의 많은 이 컴포넌트를 컴포넌트 외부에 정의하면 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);