Unable to access reducer state in container

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
})