title: React Navigation redux navigate
body: <p>I'd like to know how the navigation supposed to happen, when redux stores the navigation state.</p>
  
  <p><strong>Short version:</strong></p>
  
  <p>If the redux store isn't in initial state, a screen is mounted without actually navigationg there.</p>
  
  <p><strong>Detailed description:</strong></p>
  
  <p>Now I'm able to navigate either by (1) using the navigation props given by the parent navigator <em>(StackNavigator in my case)</em> or by (2) dispatching an action.</p>
  
  <p>1: <code>this.props.navigation.navigate('main')</code></p>
  
  <p>2: <code>this.props.navigateToMainAction()</code></p>
  
  <p>The reducer:</p>
  
  <pre><code>const INIT_STATE = Nav.router.getStateForAction(
      NavigationActions.navigate({ routeName: 'login' })
  );
  const navReducer = (state = INIT_STATE, action) =&gt; {
      const newState = Nav.router.getStateForAction(action, state);
      return newState || state;
  };
  </code></pre>
  
  <p>Nav structure:</p>
  
  <pre><code>const authStack = StackNavigator({
      login: { screen: LoginScreen }
      ,forgottendPassword: { screen: LoginScreen }
  }, {
      initialRouteName: 'login'
      ,headerMode: 'none'
  });
  
  const homeDrawer = DrawerNavigator({
      home: {
          screen: HomeScreen
          ,navigationOptions: { drawerLockMode: 'locked-closed' }
      }
  }, {
      drawerPosition: 'right'
      ,drawerWidth: 300
      ,contentComponent: props =&gt; &lt;HomeDrawerMenu {...props} /&gt;
  });
  
  const mainStack = StackNavigator({
      homeDrawer: {
          screen: homeDrawer
          ,navigationOptions: ({ navigation }) =&gt; ({
              header: &lt;HomeMenu navigate={navigation.navigate} /&gt;
          })
      }
      ,partnerList: {
          screen: PartnerListScreen
          ,navigationOptions: ({ navigation }) =&gt; ({
              header: &lt;PartnerListMenu navigation={navigation} /&gt;
          })
      }
  }, {
      initialRouteName: 'homeDrawer'
  });
  
  const Nav = StackNavigator({
      auth: { screen: authStack }
      ,main: { screen: mainStack }
  }, {
      initialRouteName: 'auth',
      headerMode: 'none',
  });
  </code></pre>
  
  <p>When I try to navigate from <code>auth/login</code> to <code>main</code> and from there to <code>main/partnerList</code> it only works correctly, if the redux store is in initial state <em>(after I cleared the async storage)</em>.</p>
  
  <p>But when I reload the app, it mounts the <code>main/partnerList</code> component, without actually navigating there and thanks to that, the action which fetching the partnerList comp.'s data is also called.</p>
  
  <p>Expected action order on load:</p>
  
  <pre><code>@@INIT
  Offline/STATUS_CHANGED
  persist/REHYDRATE
  check_token &lt;- Check if the user is logged in (in this case he is)
  check_token_commit
  Navigation/NAVIGATE &lt;- The user is forwarded to main, when he is logged in
  Navigation/NAVIGATE &lt;- The user goes to the partnerList component
  fetch_partner_list &lt;- Action for fetching the partner list
  Offline/BUSY
  fetch_partner_list_commit
  </code></pre>
  
  <p>Current action order on load:</p>
  
  <pre><code>@@INIT
  Offline/STATUS_CHANGED
  persist/REHYDRATE
  check_token &lt;- Check if the user is logged in (in this case he is)
  fetch_partner_list &lt;- It's already fetching, but no navigate action was triggered yet
  Offline/BUSY
  check_token_commit
  Navigation/NAVIGATE &lt;- The user is forwarded to main, when he is logged in
  Navigation/NAVIGATE &lt;- The forwarding happens twice, for some reason
  fetch_partner_list_commit
  Navigation/NAVIGATE &lt;- The user goes to the partnerList component
  fetch_partner_list &lt;- The only time it should be triggered
  Offline/BUSY
  fetch_partner_list_commit
  </code></pre>