React Native - Cannot read property [PROPERTY] of undefined (ignite 2, reduxsauce) - react-native

Question

I'm having trouble using redux in my react native app. I cannot call an action in my component. I get the following error:
This is my AuthRedux.js
import { createReducer, createActions } from 'reduxsauce'
import Immutable from 'seamless-immutable'
const { Types, Creators } = createActions({
login: ['email', 'password'],
logout: null
})
export const AuthTypes = Types
export default Creators
export const INITIAL_STATE = Immutable({
isLoggedIn: false,
email: null,
password: null
})
export const userLogin = (state, {email, password}) => {
return Object.assign({}, state, {
isLoggedIn: true
});//state.merge({ isLoggedIn: true, email, password})
}
export const userLogout = (state) => {
return state.merge({ isLoggedIn: false, email: null, password: null })
}
export const reducer = createReducer(INITIAL_STATE, {
[Types.USER_LOGIN]: userLogin,
[Types.USER_LOGOUT]: userLogout
})
And this is my component LoginScreen.js
import React, { Component } from 'react'
import { ScrollView, Text, KeyboardAvoidingView, TextInput, TouchableOpacity, Button } from 'react-native'
import { connect } from 'react-redux'
import { AuthActions } from '../Redux/AuthRedux'
// Add Actions - replace 'Your' with whatever your reducer is called :)
// import YourActions from '../Redux/YourRedux'
// Styles
import styles from './Styles/LoginScreenStyle'
class LoginScreen extends Component {
constructor(props) {
super(props);
this.state = {
email: '',
password: '',
opacity: 1.0,
isLoggedIn: false
}
}
render () {
return (
<ScrollView style={styles.container}>
<KeyboardAvoidingView behavior='position'>
<Text>LoginScreen</Text>
<TextInput style={{width: 100, backgroundColor: 'red', height: 50, marginTop: 10}} onChangeText={(text) => this.setState({email : text})}/>
<TextInput style={{width: 100, backgroundColor: 'yellow', height: 50, marginTop: 10}} onChangeText={(text) => this.setState({password : text})}/>
<Button title='Hola' onPress={this.onLogin}/>
</KeyboardAvoidingView>
</ScrollView>
)
}
onLogin = () => {
console.log(this.state.email);
this.setState({opacity: 0.5})
this.props.userLogin(this.state.email, this.state.password);
}
handleOnPress = () => {
this.setState({opacity: 0.5})
}
}
const mapStateToProps = (state) => {
return {
isLoggedIn: state.auth.isLoggedIn
}
}
const mapDispatchToProps = (dispatch) => {
return {
userLogin: (email, password) => dispatch(AuthActions.login(email, password))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen)
I'm trying to call userLogin function from the onPress button which is assigned in mapDispatchToProps. I also have my rootReducer configured like this:
const rootReducer = combineReducers({
nav: require('./NavigationRedux').reducer,
github: require('./GithubRedux').reducer,
search: require('./SearchRedux').reducer,
auth: require('./AuthRedux').reducer
})
And the store is also given to the Provider in App.js
class App extends Component {
render () {
return (
<Provider store={store}>
<RootContainer />
</Provider>
)
}
}
I don't know why login action is not detected.

Answer 1

Instead of import { AuthActions } from '../Redux/AuthRedux', do import AuthActions from '../Redux/AuthRedux', because you are doing export default on the actionCreators which are the ones that you want to import right now.
You can also do export const AuthActions = Creators where you are doing export default Creators, and you can keep your import statement the same way you have right now.