title: React props not updating with store update
body: <p>After LOGIN_SUCCESS action, mapStateToProps is not called with the updated state. Inside Login Screen is consoled on the first run but when I do login, with the action dispatch as LOGIN_SUCCESS, the control does to the corresponding action.type. But I don't know if the store is not getting updated or the control does not get to LoginScreen</p>
  <p>LoginScreen.js</p>
  <pre><code>import React from 'react';
  import { StyleSheet, Text, View } from 'react-native';
  import { connect } from 'react-redux';
  import { bindActionCreators } from 'redux';
  import EkoButton from '../../ui_components/EkoButton'
  import { login } from '../../actions/login.actions';
  
  class LoginScreen extends React.Component {
      constructor(props) {
          super(props)
          this.handleLogin = this.handleLogin.bind(this)
      }
      componentWillReceiveProps(nextProps) {
          console.log(&quot;Next Props &quot;, nextProps)
      }
      handleLogin () {
          console.log(&quot;Click login&quot;)
          this.props.login(&quot;Ishan&quot;)
      }
      render() {
          console.log(&quot;Inside Home Screen&quot;)
          return (
          &lt;View style={styles.container}&gt;
              &lt;EkoButton onPress={this.handleLogin}&gt;
                  &lt;Text&gt;Test Login&lt;/Text&gt;
              &lt;/EkoButton&gt;
  
          &lt;/View&gt;
          );
      }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
  });
  
  const mapStateToProps = (state) =&gt; {
      console.log(&quot;Inside Login Screen &quot;, state)
      const loginData = state
      return {
          loginData
      }
  };
  
  const mapDispatchToProps = dispatch =&gt; (
    bindActionCreators({
      login,
    }, dispatch)
  );
  
  export default connect(mapStateToProps, mapDispatchToProps)(LoginScreen);
  
  </code></pre>
  <p>login.reducers.js</p>
  <pre><code>import { combineReducers } from 'redux';
  import { LOGIN_USER, LOGIN_FAILURE, LOGIN_SUCCESS } from '../types/login.types';
  import { loginAction, loginSuccessAction, loginFailureAction } from '../actions/login.actions';
  
  const INITIAL_STATE = {
    isUserAuthenticated: false,
    userProfile: null   
  };
  
  const loginReducer = (state = INITIAL_STATE, action) =&gt; {
    console.log(&quot;Dispatching action &quot;, action.type)
    
    switch (action.type) {
      case LOGIN_USER:
        loginAction(state, action.payload)
        return state
      case LOGIN_SUCCESS: 
        return {
          ...state,
          isUserAuthenticated: true,
          userProfile: action.payload
        }
      case LOGIN_FAILURE: 
        return state
      default:
        return state
    }
  };
  
  export default loginReducer
  </code></pre>
  <p>createStore.js</p>
  <pre><code>import { createStore, combineReducers, applyMiddleware } from 'redux';
  import loginReducer from '../reducers/login.reducers';
  import apiMiddleware from '../middleware/core/api.middleware';
  
  const rootReducer = combineReducers ({
      loginReducer
  })
  
  const middlewareEnhancer = applyMiddleware(
      apiMiddleware
  )
  
  const store = createStore(rootReducer, middlewareEnhancer);
  
  export default store;
  </code></pre>
  <p>App.js</p>
  <pre><code>import &quot;react-native-gesture-handler&quot;;
  import React from &quot;react&quot;;
  import { StyleSheet } from &quot;react-native&quot;;
  import { Provider } from 'react-redux';
  import store from './store/createStore';
  
  import { NavigationContainer } from &quot;@react-navigation/native&quot;;
  import { createStackNavigator } from &quot;@react-navigation/stack&quot;;
  import BottomBar from &quot;./ui_containers/BottomBar/BottomBar&quot;;
  
  
  const Stack = createStackNavigator();
  
  class App extends React.Component {
    render() {
      console.log(&quot;here&quot;)
      return (
        &lt;Provider store={store}&gt;
          &lt;NavigationContainer&gt;
              &lt;BottomBar&gt;&lt;/BottomBar&gt;
          &lt;/NavigationContainer&gt;
        &lt;/Provider&gt;
        
      );
    }
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: &quot;#fff&quot;,
      alignItems: &quot;center&quot;,
      justifyContent: &quot;center&quot;
    }
  });
  
  export default App;
  </code></pre>
  <p>login.actions.js</p>
  <pre><code>
  import { LOGIN_USER, SET_USER, REMOVE_USER, SOCIAL_SIGNOUT, ACCESS_DENIED, LOGIN_FAILURE, LOGIN_SUCCESS } from '../types/login.types';
  import { API } from '../types/common.types';
  import { makeServiceCall } from '../actions/common.actions' 
  import store from '../store/createStore';
  
  export const login = payload =&gt; (
      {
        type: LOGIN_USER,
        payload: payload,
      }
  );
  
  export const setUser = payload =&gt; (
    {
      type: SET_USER,
      payload: payload,
    }
  );
  export const removeUser = payload =&gt; (
    {
      type: REMOVE_USER,
      payload: payload,
    }
  );
  export const socialSignout = payload =&gt; (
    {
      type: SOCIAL_SIGNOUT,
      payload: payload,
    }
  );
  export const loginAgain = payload =&gt; (
    {
      type: LOGIN_USER,
      payload: payload,
    }
  );
  
  export const accessDenied = payload =&gt; (
    {
      type: ACCESS_DENIED,
      payload: payload
    }
  )
  export const loginSuccess = payload =&gt; (
    {
      type: LOGIN_SUCCESS,
      payload: payload
    }
  )
  
  export const loginFailure = payload =&gt; (
    {
      type: LOGIN_FAILURE,
      payload: payload
    }
  )
  
  export const loginAction = (state, data) =&gt; {
    console.log(&quot;data &quot;, data)
    let payload = {
      url: &quot;authentication/dummylogin/&quot;,
      method: &quot;POST&quot;,
      data: data,
      noAuth: true,
      onSuccess: loginSuccess,
      onFailure: loginFailure,
      noClientRefId: true
    }
    store.dispatch(makeServiceCall(payload))
    
  }
  
  export const loginSuccessAction = (state, data) =&gt; {
  
  }
  
  export const loginFailureAction = (state, data) =&gt; {
  
  }
  </code></pre>
  <p>common.actions.js</p>
  <pre><code>
  import { API } from '../types/common.types';
  
  export const makeServiceCall = payload =&gt; (
      {
        type: API,
        payload: payload,
      }
  );
  </code></pre>
  <p>common.reducers.js</p>
  <pre><code>import { combineReducers } from 'redux';
  
  const INITIAL_STATE = {
    
  };
  
  const commonReducer = (state = INITIAL_STATE, action) =&gt; {
    console.log(&quot;State &quot;, state)
    console.log(&quot;action &quot;, action)
    switch (action.type) {
      default:
        return state
    }
  };
  
  export default combineReducers({
    common: commonReducer
  });
  </code></pre>