title: React-navigation Redux State management
body: <p>I'm learning React Native and Redux and I've started using 3rd party libraries - specifically <a href="https://reactnavigation.org/" rel="noreferrer">React Navigation</a></p>
  
  <p>I've followed a tutorial on it <a href="https://medium.com/@parkerdan/react-navigation-with-complete-redux-state-management-tab-bar-and-multiple-navigators-ed30a69d9a4d" rel="noreferrer">Dan Parker's Medium Tutorial</a> and I still can't get it working</p>
  
  <p>My RootContainer of the app:</p>
  
  <pre><code>&lt;PrimaryNavigation /&gt;
  ...
  
  export default connect(null, mapDispatchToProps)(RootContainer)
  </code></pre>
  
  <p>PrimaryNavigation definition:</p>
  
  <pre><code>const mapStateToProps = (state) =&gt; {
    return {
      navigationState: state.primaryNav
    }
  }
  
  class PrimaryNavigation extends React.Component {
    render() {
      return (
        &lt;PrimaryNav
          navigation={
            addNavigationHelpers({
              dispatch: this.props.dispatch,
              state: this.props.navigationState
            })
          }
        /&gt;
      )
    }
  }
  
  export default connect(mapStateToProps)(PrimaryNavigation)
  </code></pre>
  
  <p>PrimaryNav definition:</p>
  
  <pre><code>const routeConfiguration = {
    LoginScreen: {
      screen: LoginScreen
    },
    MainContainer: {
      screen: MainContainer
    }
  }
  
  const PrimaryNav = StackNavigator(
    routeConfiguration,
    {
      headerMode: 'none'
    })
  
  export default PrimaryNav
  
  export const reducer = (state, action) =&gt; {
    const newState = PrimaryNav.router.getStateForAction(action,state)
    return newState || state;
  }
  </code></pre>
  
  <p>My create store:</p>
  
  <pre><code>const rootReducer = combineReducers({
    ...
    primaryNav: require('../Navigation/AppNavigation').reducer
  })
  
  return configureStore(rootReducer, rootSaga)
  </code></pre>
  
  <p>I get an error along the lines of:</p>
  
  <p><code>Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of 'PrimaryNavigation'</code></p>
  
  <p>My understanding so far is:</p>
  
  <ul>
  <li>RootContainer is connected to a store - it holds a PrimaryNavigation</li>
  <li>PrimaryNavigation contains a Navigator (PrimaryNav), it wraps the Navigator and passes it state</li>
  <li>PrimaryNav is the actual Navigator - I've defined routes and default initializations</li>
  <li>the reducer that handles PrimaryNav is just PrimaryNav.router.getStateForAction</li>
  </ul>
  
  <p>Am I missing initial state? Am I not connecting it to Redux properly? Do I need to fire off a dispatch to go to the first screen?</p>
  
  <p>Thanks</p>