Unable to access reducer state in container - reactjs

Question

My Login Component:
import React, { Component } from 'react'
import {
View,
Text,
StyleSheet,
TextInput,
TouchableOpacity
} from 'react-native'
export class Login extends Component {
onChangeText = (key, value) => {
this.props.setUserDetails({
...this.props.user,
[key]: value
})
}
render() {
const { user, onSubmitForm } = this.props
console.log(this.props.user) // user undefined here
return (
<View style={styles.container}>
<Text style={styles.heading}>Login</Text>
<TextInput
placeholder='Email'
onChangeText={val => this.onChangeText('email', val)}
style={styles.input}
value={user.email}
/>
<TextInput
placeholder='Password'
onChangeText={val => this.onChangeText('password', val)}
style={styles.input}
value={user.password}
/>
<TouchableOpacity onPress={() => onSubmitForm(user)}>
<View style={styles.button}>
<Text style={styles.buttonText}>Submit</Text>
</View>
</TouchableOpacity>
</View>
)
}
}
My Login container:
import React, { Component } from 'react'
import { setUserDetails } from '../actions/loginActions'
import { connect } from 'react-redux'
import loginReducer from '../reducers/loginReducer'
import { Login } from '../components/login'
export class LoginContainer extends Component {
onSubmitForm = () => {
// Checking Validations
const { name, email } = this.props;
if (!name || !email) {
alert('Please fill the form')
console.log(this.props.user) // It says undefined
return;
}
}
render () {
return (
<Login
user={this.props.user}
setUserDetails={this.props.setUserDetails}
onSubmitForm={this.onSubmitForm}
/>
)
}
}
const mapStateToProps = (state) => ({
user: state.loginReducer.user,
})
const mapDispatchToProps = dispatch => ({
setUserDetails: payload => dispatch(setUserDetails(payload)),
})
export default connect(mapStateToProps, mapDispatchToProps)(Login)
My login Reducer:
const initialState = {
user: {
email: '',
password: '',
}
}
const loginReducer = (state = initialState, action) => {
switch(action.type) {
case SET_USER_DETAILS:
return Object.assign({}, state, {
user: action.user
})
default:
return state
}
return state
}
export default loginReducer
My root Reducer:
import { combineReducers } from 'redux';
import loginReducer from './loginReducer'
const rootReducer = combineReducers({
loginReducer
})
export default rootReducer
MY store configuration:
import { createStore } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
import rootReducer from './reducers'
const persistConfig = {
key: 'mykey',
storage,
}
const persistedReducer = persistReducer(persistConfig, rootReducer)
const store = createStore(persistedReducer)
const persistedStore = persistStore(store)
export default store
I am learning React native and trying to implement some features.
The problem is that I just can't access my this.props.user in the Login container when the submit is called. What am I missing in this scenario?
Any help is appreciated.

Answer 1

I've noticed some weird thing. Your default export of LoginContainer.js is connected Login component. I guess what you really meant is instead of this:
// ...imports
export class LoginContainer extends Component {
// ...
}
//...
export default connect(mapStateToProps, mapDispatchToProps)(Login)
to use this:
// ...imports
// no need to 'export class ...' here.
class LoginContainer extends Component {
// ...
}
// ...
export default connect(mapStateToProps, mapDispatchToProps)(LoginContainer)

Answer 2

In the container you used:
const mapStateToProps = (state) => ({
user: state.loginReducer.user,
})
But in your initial state there is not loginReducer. Maibe it works:
const mapStateToProps = (state) => ({
user: state.user
})