title: mapStateToProps() in Redux app nesting state within state?
body: <p>I've hit a wall trying to figure out why the JSON data I'm fetching and storing on state isn't being mapped to my component props, yet appears when <code>console.log()</code>ed from within the <code>mapStateToProps()</code> function. Am I doing something wrong that I'm not seeing here?</p>
  
  <p><strong>EDIT:</strong> Apparently the properties on state are being mapped to the component but are nested. The <code>data</code> property, when logged from within <code>mapStateToProps()</code>, has to be accessed via <code>state.state.data</code>. Prior to this (see reducer), when <code>action.data</code> is logged, the data appears as expected. No strange nesting.
  Perhaps something is wrong with the <code>connect</code> function?</p>
  
  <p>See how there is a state property populated within the state object:</p>
  
  <p><a href="https://i.stack.imgur.com/61Bsh.png" rel="noreferrer"><img src="https://i.stack.imgur.com/61Bsh.png" alt="See the data property populated within the state object"></a> </p>
  
  <p>Below is my component:</p>
  
  <pre><code>class ViewSelector extends Component {
    componentWillMount() {
      this.props.fetchDataAsync('VIEW ALL');
    }
  
    selectView(event) {
      // this.props.data comes up undefined despite state being mapped
      // to the component props
      console.log('props: ' + this.props.data);
      this.props.filterData(event.target.innerHTML, this.props.data);
    }
  
    render() {
      return (
        &lt;section&gt;
          &lt;nav&gt;
            &lt;button onClick={this.selectView.bind(this)}&gt;VIEW ALL&lt;/button&gt;
            &lt;button onClick={this.selectView.bind(this)}&gt;VIEW LAST WEEK&lt;/button&gt;
            &lt;button onClick={this.selectView.bind(this)}&gt;VIEW LAST MONTH&lt;/button&gt;
          &lt;/nav&gt;
          &lt;Dashboard data={this.props.data}/&gt;
        &lt;/section&gt;
      );
    }
  }
  
  function mapStateToProps(state) {
    console.log(state);
    // this console.log shows the state with the data property.
    return {
      data: state.data
    };
  }
  
  export default connect(mapStateToProps, actions)(ViewSelector);
  </code></pre>
  
  <p>EDIT: Here is the reducer for clarification:</p>
  
  <pre><code>import {
    FETCH_DATA,
    FETCH_DATA_SUCCESS,
    FETCH_DATA_FAILURE,
    FILTER_DATA
  } from '../actions/types';
  import { getLastWeek, getLastMonth } from './reducer_helper';
  
  const initialState = {
    error: '',
    loading: false,
    data: []
  };
  
  /* eslint-disable */
  const app = (state = initialState, action) =&gt; {
    switch(action.type) {
      case FETCH_DATA:
        return { ...state, error: '', loading: true };
      case FETCH_DATA_SUCCESS:
        // console.log(action.data) returns data as expected.
        // no nesting...until it hits the mapStateToProps() function
        return { ...state, error: '', loading: false, data: action.data };
      case FETCH_DATA_FAILURE:
        return { ...state, error: action.error, loading: false };
      case FILTER_DATA:
        let data;
        if (action.view === 'VIEW LAST WEEK') {
          data = getLastWeek(state.data);
        } else if (action.view === 'VIEW LAST MONTH') {
          data = getLastMonth(state.data);
        } else {
          data = state.data;
        }
        return { ...state, error: '', loading: false, data };
    }
    return state;
  }
  
  export default app;
  </code></pre>
  
  <p>Action Creators for clarification on dispatches to Reducer:</p>
  
  <pre><code>export function fetchData() {
    return {
      type: FETCH_DATA
    };
  }
  
  export function fetchDataSuccess(data) {
    return {
      type: FETCH_DATA_SUCCESS,
      data: data
    };
  }
  
  export function fetchDataFailure(data) {
    return {
      type: FETCH_DATA_FAILURE,
      data
    };
  }
  
  export function filterData(view) {
    return {
      type: FILTER_DATA,
      view
    };
  }
  
  export function fetchDataAsync() {
    return dispatch =&gt; {
      dispatch(fetchData());
  
      axios.get(DATA_URL)
      .then(res =&gt; {
        dispatch(fetchDataSuccess(res.data));
      }).catch(err =&gt; {
        dispatch(fetchDataFailure(err));
      });
    };
  }
  </code></pre>
  
  <p>How the entire app is being rendered &amp; the Redux store:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { Provider } from 'react-redux';
  import { createStore, applyMiddleware } from 'redux';
  import thunk from 'redux-thunk';
  
  import App from './components/app';
  import reducers from './reducers';
  
  const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
  
  ReactDOM.render(
    &lt;Provider store={createStoreWithMiddleware(reducers)}&gt;
      &lt;App /&gt;
    &lt;/Provider&gt;
    , document.querySelector('.container'));
  </code></pre>