undefined는 redux를 사용할 때 'onLogin'이 아닙니다

Question

actions 'isLoading' & 'onLogin'을 바인딩하는 데 connect을 사용하지만 로그에 'this.props'가 정의되어 있지 않으므로 정의되지 않았습니다. 나는 코드가 잘되어야한다고 생각하는 것을 여러 번 확인했지만, 나는 redux의 개념에서 무엇을 놓쳤는 지 알 수 없다.
다음 질문은 '컨테이너에 매개 변수를 전달하는 올바른 방법입니까? LoginButton.js'입니까?
누군가 저에게 도움이 될 조언을 제안 할 수 있습니다. 감사합니다.
다음과 같은 오류가 발생할 수있는 파일이 있다고 생각합니다.
My SourceCode

LoginButton.js

import {loginStyles} from 'App/styles'; 
import {loginUser} from 'App/redux/actions/actionCreators' 


export const LoginButton = ({isLoading, onLogin, username, password }) => { 
    let loginButton; 
    console.log('props: ' + this.props); 

    if (isLoading){ 
    loginButton = (
     <Button primary full rounded > 
     <Spinner style={loginStyles.spinner} color='white'/> 
     <Text style={loginStyles.IconDivider}>Loading...</Text> 
     </Button> 
    ) 
    }else{ 
    loginButton = (
     <Button primary full rounded 
      onPress={() => onLogin(username, password)}> 
     <Text>Login</Text> 
     </Button> 
    ) 
    } 
    return loginButton; 
} 

const styles = StyleSheet.create({ 
    buttonContainer:{ 
    flex:1, 
    flexDirection:'row' 
    } 
}) 

const mapStateToProps = state => ({ 
    isLoading: state.auth.isLoading, 
    username: state.auth.username, 
    password: state.auth.password 
}); 

const mapDispatchToProps = dispatch => ({ 
    onLogin: (username, password) => dispatch(loginUser(username, password)) 
}); 

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

Login.js

import {LoginButton} from 'App/components'; 

export class Login extends Component { 
    constructor(props){ 
    super(props); 

    this.state = { 
     username: '', 
     password: '' 
    } 
    } 

    render() { 

    return (
     <Container> 
     <Content contentContainerStyle={styles.contentContainer}> 
      <Image source={images.login} style={styles.bg}> 
      <View style= {loginStyles.formContainer}> 

       <InputGroup style={loginStyles.input}> 
       <Icon name="ios-mail-outline" style={loginStyles.icon} /> 
       <Input 
        onChangeText={(username) => this.setState({username})} 
        value={this.state.username} 
        placeholder={"Email Address"} />    
       </InputGroup> 

       <InputGroup style={loginStyles.input}> 
        <Icon name="ios-lock-outline" style={loginStyles.icon} /> 
        <Input 
        onChangeText={(password) => this.setState({password})} 
        value={this.state.password} 
        secureTextEntry={true} 
        placeholder={"Password"} />    
       </InputGroup> 

       <View style={loginStyles.button}> 
       <LoginButton username={this.state.username} password={this.state.password}/> 
       </View> 
      </View> 
      </Image> 
     </Content> 
     </Container> 
    ); 
    } 
} 

const mapStateToProps = state => { 
    return { 
     payload: state.auth.payload 
    }; 
} 

export default connect(mapStateToProps, null)(Login); 

actionCreators.js

function loginSuccess(username, password) { 
    return { 
    type: types.LOGIN_SUCCESS, 
    username: username, 
    password: password 
    } 
} 

function loginFailure(error) { 
    return { 
    type: types.LOGIN_FAILURE, 
    payload: error 
    } 
} 

export function loginUser(username, password) { 
    return function(dispatch) { 
    if (username == 'admin' && password == '123qwe'){ 
     dispatch(loginSuccess(username, password)); 
    }else{ 
     dispatch(loginFailure('Incorrect username or password')); 
    } 
    }; 
} 

Answer 1

내가 NotI을했습니다 2 가지가 있습니다 CED는 코드에서 문제가 발생할 수 :

1. 당신은 stateless 구성 요소를 만들하지만 당신은 당신이 class 구성 요소 내부에없는대로 작동하지 것이다 this.props를 기록하려고하고 당신은 어떤 기대하지 않습니다 당신의 함수 서명에 props 매개 변수 : LoginButton.js에서

   export const LoginButton = ({isLoading, onLogin, username, password }) => {... 
   

2. 당신의 이름 첨부 객체 LoginButton 를 내보내는

   import {LoginButton} from 'App/components'; 
   

   당신에게 :

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

   그러나이 Login.js 당신이 (redux에 연결 되지 않음)라는 이름의 수출을 가져 : 이 redux에 연결하는 구성 요소 인 기본 내보내기에 추가 이를 기본 가져 오기 구문으로 변경해야합니다.

   import LoginButton from 'App/components';