title: mapStateToProps returning undefined state from reducer
body: <p>I am getting this error:</p>
  <p><a href="https://i.stack.imgur.com/OkiBi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OkiBi.png" alt="console image" /></a></p>
  <p>I have this reducer for async:</p>
  <pre><code>const initUserState = {
      fetching: false,
      fetched: false,
      users: [],
      error: null
  };
  
  const userReducer = (state = initUserState, action) =&gt; {
      switch(action.type){
          case &quot;FETCH_USER&quot;:
              state = {
                  ...state,
                  users : action.payload
              };
              break;
          case &quot;FETCH_USER_START&quot;:
              state = {
                  ...state,
                  fetching: true
              };
              break;
          case &quot;FETCH_USER_SUCCESS&quot;:
              state = {
                  ...state,
                  fetched: true,
                  users: action.payload
              };
              break;
          case &quot;FETCH_USER_ERROR&quot;:
              state = {
                  ...state,
                  fetched: false,
                  error: action.payload
              };
              break;
          default: 
              break;
      }
      return state;
  };
  
  export default userReducer;
  </code></pre>
  <p>And my container is:</p>
  <pre><code>import React from 'react';
  import { Blog } from '../components/Blog';
  import { connect } from 'react-redux';
  //import { act_fetchAllUser } from '../actions/userActions';
  import axios from 'axios';
  
  class App extends React.Component {
  
      componentWillMount(){
          this.props.fetchAllUser();
      }
  
      render(){
          console.log(&quot;Prop: &quot; , this.props.user);
          return(
              &lt;div&gt;
                  &lt;h1&gt;My Blog Posts&lt;/h1&gt;
                  &lt;Blog/&gt;
              &lt;/div&gt;
          );
      }
  }
  
  const mapStateToProps = (state) =&gt; {
      return {
          user: state.userReducer
      };
  };
  
  const mapDispatchToProps = (dispatch) =&gt; {
      return {
          fetchAllUser: () =&gt; {
              dispatch((dispatch) =&gt; {
                  dispatch({ type: &quot;FETCH_USER_START&quot; })
                  axios.get('http://infosys.esy.es/test/get_allBlog.php')
                  .then((response) =&gt; {
                      dispatch({
                          type: &quot;FETCH_USER_SUCCESS&quot;,
                          payload: response.data
                      });
                  })
                  .catch((err) =&gt; {
                      dispatch({
                          type: &quot;FETCH_USER_ERROR&quot;,
                          payload: err
                      });
                  })
              });
          }
      };
  };
  
  export default connect(mapStateToProps, mapDispatchToProps)(App);
  </code></pre>
  <p>Im new to redux and I am into async now...
  my application should load the users on page load but why my user state is returning undefined state? in the render method, i am logging the user props that contains the returned state from userReducer(mapStateToProps) but i am getting undefined. But when I getState() in store and log it, I am getting the expected result but it is not the ideal place to get the state right?... What i am doing wrong?</p>
  <p>My store is:</p>
  <pre><code>import { createStore, applyMiddleware } from 'redux';
  import logger from 'redux-logger';
  import userReducer from './reducers/userReducer';
  import thunk from 'redux-thunk';
  
  const store  = createStore(userReducer,applyMiddleware(thunk, logger()));
  //store.subscribe(() =&gt; console.log('State: ',store.getState()));
  
  export default store;
  </code></pre>
  <p>And my index is:</p>
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './container/App';
  
  import { Provider } from 'react-redux';
  import store from './store';
  
  ReactDOM.render(
      &lt;Provider store={store}&gt;
          &lt;App /&gt;
      &lt;/Provider&gt; , document.getElementById('root'));
  </code></pre>
  <p>Also, on my default case in userReducer, what should I code there.. should I just break; or do I need also to return state it? Thank you</p>