title: Weird behavior of Redux thunk in a React Native app
body: <p>I recently noticed a very weird behavior of Redux in my app that I would like to share with you. When I click this TouchableOpacity in my settings in order to disconnect, I get the following error: </p>
  
  <blockquote>
    <p>TypeError: Cannot read property first_name of null</p>
  </blockquote>
  
  <p>from Homepage.js</p>
  
  <p>So my code is firing an error for that piece component that is in a page where I'm not supposed to go.</p>
  
  <p><strong>Homepage.js</strong></p>
  
  <pre><code>&lt;AppText textStyle={styles.title}&gt;
    Welcome {userReducer.infos.first_name}
  &lt;/AppText&gt;
  </code></pre>
  
  <p>The workflow that is supposed to happen is the user clicking on the disconnect button, then the tryLogout function is called, which fires the action with the type 'LOGOUT'. Then this action sets to null user related data and information with some additional booleans. The state gets updated then the UI should be re-rendered and componentWillUpdate() called. In there, I check my state to redirect the user to the landing/not connected navigation.</p>
  
  <p>I tried to comment <code>infos: null</code> in my reducer and my code processes without errors.</p>
  
  <p>This variable is nowhere in my app asking to redirect to any page.</p>
  
  <p>It may seem complicated to debug, since the problem must be deeper than it looks. Anyway, maybe someone has already had a similar problem so I give you here the potential elements to try to solve the problem.</p>
  
  <p><strong>Settings.js</strong></p>
  
  <pre><code>import { tryLogout } from '@actions/user'
  
  const mapDispatchToProps = dispatch =&gt; ({
    tryLogout: () =&gt; dispatch(tryLogout()),
  })
  
  class Settings extends React.Component&lt;Props, State&gt; {  
  
    // What should normally happen
    componentDidUpdate(prevProps: Props) {
        const { userReducer, navigation } = this.props
  
        if (
          prevProps.userReducer.isSignedUp !== userReducer.isSignedUp ||
          prevProps.userReducer.isLoggedIn !== userReducer.isLoggedIn
        ) {
          if (!userReducer.isSignedUp &amp;&amp; !userReducer.isLoggedIn) {
            navigation.navigate('Landing')
          }
        }
      }
  
    // Inside my render() method
    &lt;AppTouchableOpacity
            onPress={() =&gt; tryLogout()}
            style={styles.touchableOpacity}
          &gt;
            Disconnect
    &lt;/AppTouchableOpacity&gt;
  }
  </code></pre>
  
  <p><strong>actions/user.js</strong></p>
  
  <pre><code>export const tryLogout = (): Function =&gt; (dispatch: Function) =&gt; {
    const logout = () =&gt; ({
      type: LOGOUT,
    })
  
    dispatch(logout())
  }
  </code></pre>
  
  <p><strong>reducers/user.js</strong></p>
  
  <pre><code>case LOGOUT:
    return {
      ...state,
      data: null,
      infos: null,
      isLoggedIn: false,
      isSignedUp: false,
    }
  </code></pre>
  
  <p><strong>App.js</strong> (I'm using React Navigation)</p>
  
  <pre><code>const LandingScenes = {
    Welcome: { screen: WelcomeScreen },
    { /* Some other screens */ }
  }
  
  const LandingNavigator = createStackNavigator(LandingScenes, {
    initialRouteName: 'Welcome',
    defaultNavigationOptions: {
      header: null,
    },
  })
  
  const SecuredScenes = {
    Homepage: { screen: HomepageScreen },
    Settings: { screen: SettingsScreen },
    { /* Some other screens */ }
  }
  const SecuredNavigator = createStackNavigator(SecuredScenes, {
    initialRouteName: 'Homepage',
    defaultNavigationOptions: {
      header: null,
    },
  })
  
  export default createAppContainer(
    createSwitchNavigator(
      {
        Landing: LandingNavigator,
        Secured: SecuredNavigator,
      },
      {
        initialRouteName: 'Landing',
      }
    )
  )
  </code></pre>