title: React Native: nextState.routes.forEach undefined is not an object
body: <p>I am building a mobile app in React Native and one thing I have problems with is navigation. Right now I am trying to implement a login screen with a main screen from which I can logout or call other screens. For that, and since I use redux, I tried to tweak my StackNavigator and to make a reducer for it and a separate Component. But after I finished doing this I encountered this error:</p>
  
  <pre><code>undefined is not an object (evaluating nextState.routes.forEach)
  </code></pre>
  
  <p>This error is triggered in my code in the connect function from App.js, function that must map some state variables to the Navigation Component. Here is my code:</p>
  
  <p>NavReducer.js</p>
  
  <pre><code>import { NavigationActions, StackNavigator } from "react-navigation";
  import routes from "../core/routes";
  
  
  export const AppNavigator = StackNavigator(routes)
  const routerForLogin = AppNavigator.router.getActionForPathAndParams('Login')
  const routerForPlane = AppNavigator.router.getActionForPathAndParams('PlaneList')
  const loginState = AppNavigator.router.getStateForAction(routerForLogin);
  const registerState = AppNavigator.router.getStateForAction(AppNavigator.router.getActionForPathAndParams('Register'));
  const planeListState = AppNavigator.router.getStateForAction(routerForPlane);
  const insertState = AppNavigator.router.getStateForAction(AppNavigator.router.getActionForPathAndParams('Insert'));
  
  export const navReducer = (state = { loginState, planeListState, insertState, registerState }, action) =&gt; {
    switch (action.type) {
      case '@@redux/INIT':
        return {
          ...state,
          planeListState: AppNavigator.router.getStateForAction(routerForPlane, loginState)
        };
  
      case 'LOGIN':
        return {
          ...state,
          planeListState: AppNavigator.router.getStateForAction(routerForPlane, loginState)
        };
  
      case 'LOGOUT':
        return {
          ...state,
          loginState: AppNavigator.router.getStateForAction(
            NavigationActions.reset({
              index: 0,
              actions: [NavigationActions.navigate({ routeName: 'Login' })]
            })
          )
        };
  
      case 'REGISTER':
        return {
          ...state,
          registerState: AppNavigator.router.getStateForAction(action, state.registerState)
        };
  
      case 'INSERT':
        return {
          ...state,
          insertState: AppNavigator.router.getStateForAction(action, state.insertState)
        };
  
      default:
        return {
          ...state,
          planeListState: AppNavigator.router.getStateForAction(action, state.planeListState)
        };
    }
  };
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
  import thunk from 'redux-thunk';
  import { Provider, connect } from 'react-redux';
  import { addNavigationHelpers } from 'react-navigation';
  import authReducer from './src/reducers/LoginReducer';
  import registerReducer from './src/reducers/RegisterReducer';
  import planeReducer from './src/reducers/PlaneListReducer';
  import insertReducer from './src/reducers/InsertReducer';
  import Expo from 'expo';
  import { AsyncStorage } from 'react-native'
  import { navReducer,AppNavigator } from './src/reducers/NavReducer';
  
  class App extends Component {
    render() {
      const { nav, dispatch } = this.props;
  
      const state = AsyncStorage.getItem('token')
        ? this.props.nav.planeListState
        : this.props.nav.loginState;
  
      return (
        &lt;AppNavigator
          screenProps={{ store: { store } }}
          navigation={addNavigationHelpers({
            dispatch: this.props.dispatch,
            state: this.props.nav
          })}
        /&gt;
      );
    }
  }
  
  const mapStateToProps = (state) =&gt; ({
    nav: state.nav
  });
  
  const AppWithNavigationState = connect(mapStateToProps)(App);
  
  const initialState = {
    auth: { isLoading: false, error: null, username: '', password: '' },
    insert: { wasInserted: false }
  };
  
  const rootReducer = combineReducers
    (
    {
      nav: navReducer, auth: authReducer, register: registerReducer, planeList: planeReducer, insert: insertReducer
    }
    );
  
  let store = createStore(rootReducer, initialState, applyMiddleware(thunk));
  
  export default function Root() {
    return (
      &lt;Provider store={store}&gt;
        &lt;AppWithNavigationState /&gt;
      &lt;/Provider&gt;
    );
  }
  </code></pre>
  
  <p>Routes.js</p>
  
  <pre><code>import LoginComponent from "../components/Login";
  import RegisterComponent from "../components/Register";
  import PlaneListComponent from "../components/PlaneList";
  import InsertComponent from "../components/Insert";
  
  const Routes = {
      Login: { screen: LoginComponent },
      Register: { screen: RegisterComponent },
      PlaneList: { screen: PlaneListComponent },
      Insert: { screen: InsertComponent }
  };
  
  export default Routes;
  </code></pre>
  
  <p>what is wrong with my code that it triggers that error? Thank you.</p>