돌아 오는 발송 작업

Question

나는 다음과 같은 컨테이너 요소 프레젠테이션은 내가 LoginComponent에 컨테이너 구성 요소의 로그인 방법을 계승하고있는 렌더링() 메소드에서 볼 수 있듯이

import { connect } from "react-redux"; 
import LoginComponent from "./Login"; 
import React from "react"; 

export class LoginContainerComponent extends React.Component { 

    constructor(props) { 
     super(props) 
    } 

    login(username, password) { 
     //Perform actual login here 
     this.props.onLoginClick(); 
    } 

    render() { 
     return (<LoginComponent onLoginClick = {this.login} />); 
    }; 
} 

const mapStateToProps = function (state) { 
    return { 
     currentState: 'Logged Out' 
    } 
}; 

const mapDispatchToProps = function (dispatch) { 
    return { 
     onLoginClick:() => { 
      alert('login clicked'); 
     } 
    } 
}; 

export default connect(mapStateToProps, mapDispatchToProps)(LoginContainerComponent); 

에게 있습니다 구성 요소. 아이디어는

1. 사용자가 클릭
2. 프리젠 테이션 구성 요소 호출이 위의 컨테이너 요소에 대한 방법을 로그인 프리젠 테이션 구성 요소 버튼을 로그인 점이다.
3. 컨테이너 구성 요소는 login (이 메서드는 실제 데이터베이스에 연결하고 사용자를 인증 함) 한 다음 connect() 메서드를 통해 전달 된 onLoginClick 메서드 (mapDispatchToProps)를 호출합니다. 그러나 this.props.onLoginClick에 액세스하려고 시도 할 때 LoginContainerComponent의 로그인 메서드에서 this.props는 null을 반환합니다. 내가 여기서 뭔가 잘못하고있는거야.

Answer 1

건축물 내부에 로그인 방법을 바인드해야합니다.

import { connect } from "react-redux"; 
import LoginComponent from "./Login"; 
import React from "react"; 

export class LoginContainerComponent extends React.Component { 

    constructor(props) { 
     super(props) 

     this.login = this.login.bind(this); 
    } 

    login(username, password) { 
     //Perform actual login here 
     this.props.onLoginClick(); 
    } 

    render() { 
     return (<LoginComponent onLoginClick = {this.login} />); 
    }; 
} 

const mapStateToProps = function (state) { 
    return { 
     currentState: 'Logged Out' 
    } 
}; 

const mapDispatchToProps = function (dispatch) { 
    return { 
     onLoginClick:() => { 
      alert('login clicked'); 
     } 
    } 
}; 

export default connect(mapStateToProps, mapDispatchToProps)(LoginContainerComponent); 

이 기능은 구성 요소에만 기능을 전달하면 더 이상 사용할 수 없기 때문에 필요합니다. 그러나 만약 당신이 "강제"- 방법에 바인딩 할 수 있습니다.

Answer 2

react-redux는 희박하게 connect 함수의 세 번째 매개 변수 인 mergeProps을 사용하여 자신의 컨테이너 클래스를 만들 필요없이 이런 유형의 것을 제공 할 수 있습니다.

import { connect } from "react-redux"; 
import LoginComponent from "./Login"; 
import React from "react"; 

const mapStateToProps = function (state) { 
    return { 
     currentState: 'Logged Out' 
    } 
}; 

const mapDispatchToProps = function (dispatch) { 
    return { 
     onLoginClicked:() => { 
      alert('login clicked'); 
     } 
    } 
}; 

const mergeProps = function (stateProps, dispatchProps) { 
    return { 
     ...stateProps, 
     onLoginClicked: (username, password) -> { 
      //Perform actual login here 
      dispatchProps.onLoginClicked() 
     } 
    } 
}; 

export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(LoginComponent); 

이것은 또한 bind 할 필요하면 컨테이너의 login 기능을 무시합니다.