Store does not have reducer initialState - react-native

Question

I cannot get the store reducer initialState, so I cannot map to props in the component as well.
Here is my reducer:
const initialState = { currentUser: null }
export default function UserReducer(state = initialState, action){
let nextState;
switch(action.type){
case "USER_CONNECTED":
nextState = {
...state,
currentUser : action.value
}
return nextState;
case "USER_DECONNECTED":
nextState = {
...state,
currentUser : null
}
return nextState;
default:
return state;
}
}
Here is the class that configures the store:
import { createStore, combineReducers } from 'redux';
import UserReducer from './reducers/userReducer'
const rootReducer = combineReducers({
currentUser : UserReducer
});
const configureStore = () => {
return createStore(rootReducer);
}
export default configureStore;
And here is where I initialise the store and pass it to the App thanks to a provider:
import {AppRegistry} from 'react-native';
import React from 'react';
import App from './App';
import {name as appName} from './app.json';
import { Provider } from 'react-redux';
import configureStore from './store/store';
const Store = configureStore();
console.log("STORE :"+ JSON.stringify(Store.getState()));
const RNRedux = () => (
<Provider store = { Store }>
<App />
</Provider>
)
AppRegistry.registerComponent(appName, () => RNRedux);
When I print the "STORE" above, it gives me the right output { currentUser : ...}. Then I connect App.js to the store as follows:
const AppNavigator = createStackNavigator(
{
NewAccount: NewAccountScreen,
Login: LoginScreen
},
{
initialRouteName: "Login"
}
);
const AppContainer = createAppContainer(AppNavigator);
export class App extends React.Component {
constructor(props, context){
super(props, context);
}
render() {
console.log("APP.JS : "+ JSON.stringify(this.props));
return (
<AppContainer />
)
}
}
export default connect()(App);
So at the last line I connect the entire App state to the component props but it gives me {}.

Answer 1

You are missing mapStateToProps param in your connect call.
export default connect()(App);
You need to specify mapping function that will take parts of state and pass it to components props.
To map entire state to props try this:
export default connect(state=>state)(App)
Better practice would be to pass only parts of state that the component needs. That way you would avoid unnecessary re-renders when some other part of state changes. For example if your connected component only needs user first name you could do this:
export default connect(state=>{firstName:state.currentUser.firstName})(App)