title: Connecting React Component with Redux Store
body: <p>Very basic simple GET example for react-redux</p>
  
  <p>I have a "MockAPI" which simulates a GET request to an API like so:</p>
  
  <pre><code>const dashboards = [
    {
      "Id":1,
      "title":"Overview"
    },
    {
      "Id":2,
      "title":"Overview"
    },
    {
      "Id":3,
      "title":"Overview"
    },
    {
      "Id":4,
      "title":"Overview"
    }
  ];
  
  class DashboardApi {
    static getAllDashboards() {
      return new Promise((resolve) =&gt; {
        setTimeout(() =&gt; {
          resolve(Object.assign([], dashboards));
        }, delay);
      });
    }
  }
  </code></pre>
  
  <p>I am trying to develop in a react-redux flow of dispatching an action via a button click and then updating the component via the redux store.</p>
  
  <p>Here is my component code:</p>
  
  <pre><code>import React, { PropTypes } from 'react';
  import { connect } from 'react-redux';
  import * as dashboardActions from '../../actions/dashboardActions';
  
  class HomePage extends React.Component {
    constructor(props) {
      super(props);
      this.loadDashboards = this.loadDashboards.bind(this);
    }
  
    loadDashboards() {
      this.props.dispatch(dashboardActions.loadDashboards());
    }
  
    dashboardItem(dashboard, index) {
      return &lt;p key={index}&gt;{dashboard.title}&lt;/p&gt;;
    }
  
    render() {
      return (
        &lt;div&gt;
            &lt;h1&gt;
              Hello World!
              &lt;button onClick={this.loadDashboards}&gt;load&lt;/button&gt;
            &lt;/h1&gt;
            {this.props.dashboards.map(this.dashboardItem)}
        &lt;/div&gt;
      );
    }
  }
  
  HomePage.propTypes = {
    dashboards: PropTypes.array.isRequired,
    dispatch: PropTypes.func.isRequired
  };
  
  function mapStateToProps(state) {
    return {
      dashboards: state.dashboards
    };
  }
  
  export default connect(mapStateToProps)(HomePage);
  </code></pre>
  
  <p>And here is my <code>dashboardActions.js</code>: </p>
  
  <pre><code>import * as types from './actionTypes';
  import dashboardApi from '../mockApi/mockDashboardApi';
  
  export function loadDashboardsSuccess(dashboards) {
      return { type: types.LOAD_DASHBOARDS_SUCCESS, dashboards };
  }
  
  export function loadDashboards() {
      return dispatch =&gt; {
          return dashboardApi
              .getAllDashboards()
              .then(dashboards =&gt; {
                  dispatch(loadDashboardsSuccess(dashboards));
              });
      };
  }
  </code></pre>
  
  <p>And here is my reducer:</p>
  
  <pre><code>import initialState from './initialState';
  import * as types from '../actions/actionTypes';
  
  export default function dashboardReducer(state = initialState.dashboards, action) {
      switch(action.types) {
          case types.LOAD_DASHBOARDS_SUCCESS:
              return action.dashboards;
  
          default:
              return state;
      }
  }
  </code></pre>
  
  <p>I am trying to get the onClick to load in the dashboards array and to render as <code>&lt;p&gt;</code> tags simply displaying the <code>title</code> value. Unfortunately it is not happening. </p>
  
  <p>I see that the LOAD_DASHBOARDS_SUCCESS action is getting loaded, but I see that the <code>dashboards</code> property in the store is still an empty array instead of showing the returned data...</p>
  
  <p>What am I missing here?</p>