title: MapStateToProps not being called
body: <p>I understand questions like this one has been asked numerous times before; but I have exhausted all the resources and options and cannot figure out why this is not working. When I create the action <strong>"AUTHENTICATION_LOGOUT"</strong>  I can trace it up to the action reducer and can see that from the action reducer the new state is returned, however it does not get picked up in the component by <code>connect</code> and consequently<code>mapStateToProps</code> wont run. I return a new object for state so the check should flag it as a state change not a state mutation, right?
  could it be a bug or version mismatch? Thanks.</p>
  
  <p>in auth_actions: </p>
  
  <pre><code>export const appLogout = () =&gt; async dispatch =&gt; {
      await AsyncStorage.removeItem(USER);
      dispatch({ type: "AUTHENTICATION_LOGOUT" });
  };
  </code></pre>
  
  <p>in auth_reducer.js</p>
  
  <pre><code>export default function (state = {}, action) {
          switch (action.type) {
              case "AUTHENTICATION_SUCCESS":
                  return { user: action.payload };
              case "AUTHENTICATION_LOGOUT":
                  return {user: null };
              default:
                  return state;
          }
      }
  </code></pre>
  
  <p>in index.js in the reducers folder:</p>
  
  <pre><code>export default combineReducers({
      search, auth
  });
  </code></pre>
  
  <p>in AuthComponent.js:</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Text, TouchableOpacity, View } from 'react-native';
  import { connect } from 'react-redux';
  class AuthScreen extends Component {
   ...
  }
  
  function mapStateToProps(state) {
      let { auth } = state;
      return { user: auth.user };
  }
  
  export default connect(mapStateToProps, actions)(AuthScreen);
  </code></pre>
  
  <p>and the store:</p>
  
  <pre><code>const store = createStore(
      reducers,
      {},
      compose(
          applyMiddleware(thunk)
      )
  );
  
  export default store;
  </code></pre>
  
  <p>in App.js</p>
  
  <pre><code>import store from './store';
  import { Provider } from 'react-redux';
  export default class App extends React.Component {
    render() {
      return (
        &lt;Provider store={store}&gt;
          &lt;MainNavigation /&gt;
        &lt;/Provider&gt;
      );
    }
  }
  </code></pre>
  
  <p>package.json:</p>
  
  <pre><code>"dependencies": {
      "axios": "^0.18.0",
      "expo": "^27.0.0",
      "react": "16.3.1",
      "react-native": "https://github.com/expo/react-native/archive/sdk-27.0.0.tar.gz",
      "react-redux": "^5.0.7",
      "redux": "^3.7.2",
      "redux-thunk": "^2.2.0"
    }
  </code></pre>
  
  <p><strong>Update</strong>
  After a lot of digging I figured what the problem was. The issue here, that of course I failed to see, was the fact that <em>this component was unmounted and therefore did not received any state update at all</em>. I checked it with the <strong>componentWillUnmount</strong> life cycle hook. It did not have anything to do with state mutation. I got horribly thrown off by all the talks and posts about state mutation. Thanks everyone for their invaluable help and time.</p>