mapStateToProps returning undefined state from reducer

Question

I am getting this error:

I have this reducer for async:

const initUserState = {
    fetching: false,
    fetched: false,
    users: [],
    error: null
};

const userReducer = (state = initUserState, action) => {
    switch(action.type){
        case "FETCH_USER":
            state = {
                ...state,
                users : action.payload
            };
            break;
        case "FETCH_USER_START":
            state = {
                ...state,
                fetching: true
            };
            break;
        case "FETCH_USER_SUCCESS":
            state = {
                ...state,
                fetched: true,
                users: action.payload
            };
            break;
        case "FETCH_USER_ERROR":
            state = {
                ...state,
                fetched: false,
                error: action.payload
            };
            break;
        default: 
            break;
    }
    return state;
};

export default userReducer;

And my container is:

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("Prop: " , this.props.user);
        return(
            <div>
                <h1>My Blog Posts</h1>
                <Blog/>
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        user: state.userReducer
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        fetchAllUser: () => {
            dispatch((dispatch) => {
                dispatch({ type: "FETCH_USER_START" })
                axios.get('http://infosys.esy.es/test/get_allBlog.php')
                .then((response) => {
                    dispatch({
                        type: "FETCH_USER_SUCCESS",
                        payload: response.data
                    });
                })
                .catch((err) => {
                    dispatch({
                        type: "FETCH_USER_ERROR",
                        payload: err
                    });
                })
            });
        }
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

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?

My store is:

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(() => console.log('State: ',store.getState()));

export default store;

And my index is:

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(
    <Provider store={store}>
        <App />
    </Provider> , document.getElementById('root'));

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

Answer 1

You should have;

const mapStateToProps = (state) => {
  return {
    user: state.users
  };
};

Answer 2

mapStateToProps passes state (global store) as a props to the component.

Global store

const initUserState = {
    fetching: false,
    fetched: false,
    users: [],
    error: null
};

inside component listening to user state

const mapStateToProps = (state) => {
    return {
        user: state.users
    };
};