title: Given action, reducer returned undefined
body: <p>I'm doing my first react.js app. Because of some issues with the react &amp; redux template project in Visual Studio 2017 I ended up with a Web API in Visual Studio 2017 and a whole different react project in Visual Studio Code (I don't know if that is relevant). I'm trying to consume my Web API but my action.payload.data is always undefined. Also I get a cross-origin error. I don't get what am I doing wrong.</p>
  
  <p><strong><em>src/actions/index.js</em></strong></p>
  
  <pre><code>import axios from 'axios';
  
  export const FETCH_HOME = 'fetch_home';
  
  const R00T_URL = 'http://localhost:52988/api';
  
  export function fetchHome() {
      const request = axios.get(`${R00T_URL}/home`, { crossdomain: true });
  
      console.log(`request: ${request}`);
      return {
          type: FETCH_HOME,
          payload: request
      };
  }
  </code></pre>
  
  <p><strong><em>src/reducers/reducer_home.js</em></strong></p>
  
  <pre><code>import { FETCH_HOME } from '../actions';
  
  export default function(state = {}, action) {
      if (typeof action.payload === 'undefined') {
          console.log('action undefined');
          return state;
      }
  
      switch (action.type) {
          case FETCH_HOME:            
              console.log(`action: ${action}`);
              return action.payload.data;
          default:
              return state;
      }
  }
  </code></pre>
  
  <p><strong><em>src/components/home_index.js</em></strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { fetchHome } from '../actions';
  
  class HomeIndex extends Component {
      constructor(props) {
          super(props);
      }
  
      componentDidMount() {
          this.props.fetchHome();
      }
  
      render() {
          console.log(`props: ${this.props}`);
          return (
              &lt;div&gt;
                  &lt;h1&gt;Home Index&lt;/h1&gt;                
              &lt;/div&gt;
          );
      }
  }
  
  function mapStateToProps(state) {
      return { props: state.props };
  }
  
  export default connect(mapStateToProps, { fetchHome })(HomeIndex);
  </code></pre>
  
  <p><strong><em>src/index.js</em></strong></p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { Provider } from 'react-redux';
  import { createStore, applyMiddleware } from 'redux';
  import { BrowserRouter, Route } from 'react-router-dom';
  import reducers from './reducers';
  import HomeIndex from './components/home_index';
  import promise from 'redux-promise';
  
  const createStoreWithMiddleware = applyMiddleware(promise)(createStore);
  
  ReactDOM.render(
    &lt;Provider store={createStoreWithMiddleware(reducers)}&gt;
      &lt;BrowserRouter&gt;
        &lt;div&gt;
          &lt;Route path="/" component={HomeIndex} /&gt;
        &lt;/div&gt;
      &lt;/BrowserRouter&gt;
    &lt;/Provider&gt;
    , document.querySelector('.container'));
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/yZz8Q.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yZz8Q.jpg" alt="pending promise"></a></p>
  
  <p><a href="https://i.stack.imgur.com/hqRRv.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hqRRv.jpg" alt="console log for index.js"></a></p>
  
  <p><a href="https://i.stack.imgur.com/GHYYr.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GHYYr.jpg" alt="i do am able to access the api data"></a></p>