Q:

undefined is not a function 'onLogin' when use redux

I use connect to bind the actions 'isLoading' & 'onLogin', but it is undefined as 'this.props' is undefined in the log. I have checked many times that I think the code should be fine, but I cannot figure out what i missed in concept of redux. 
And the next question 'is it a right way to pass params to the container in LoginButton.js?' 
It is appreciated that someone may suggest some advice to help me, Thanks!!
I think some possible files that may cause errors in the followings. 
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'));
    }
  };
}

A:

There are 2 things that I've noticed that may cause problems in your code:  

You are creating a stateless component but you are trying to log
this.props which won't work as you are not inside a class
component and you are not expecting any props parameters in your
function signature:  
export const LoginButton = ({isLoading, onLogin, username, password }) => {...

In LoginButton.js you are exporting a named object LoginButton
in addition to the default export which is the component that
connects to redux:  
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(LoginButton);

But in Login.js you are importing the named export (which isn't
connected to redux):  
import {LoginButton} from 'App/components';  

You should change that to a default import syntax:  
import LoginButton from 'App/components';

