title: Action does not trigger a reducer in Redux
body: <p>I'm new to redux and trying to fetch content using the Contentful API. For some reason the action I call does not reach the reducer. I have attached the code I feel is relevant and any contributions would be highly appreciated.</p>
  
  <p>actions/index.js</p>
  
  <pre><code>import axios from 'axios';
  
  const API_BASE_URL = 'https://cdn.contentful.com';
  const API_SPACE_ID = 'xxxxxxxxxxxxx';
  const API_KEY ='xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
  
  const FETCH_CONTENT = 'fetch_content';
  
  export function fetchContent() {
    const request = axios.get(`${API_BASE_URL}/spaces/${API_SPACE_ID}/environments/master/entries?access_token=${API_KEY}`);
    return {
      type: FETCH_CONTENT,
      payload: request
    };
    }
  </code></pre>
  
  <p>reducers/index.js</p>
  
  <pre><code>import { combineReducers } from 'redux';
  import ContentReducer from './reducer-content';
  
  const rootReducer = combineReducers({
    contents: ContentReducer
  });
  
  export default rootReducer;
  </code></pre>
  
  <p>reducer-content.js</p>
  
  <pre><code>import {FETCH_CONTENT} from '../actions';
  const INITIAL_STATE = { all: [] };
  
  export default function(state = INITIAL_STATE, action){
    switch(action.type){
      case FETCH_CONTENT:
        return { ...state, all: action.payload.data.items };
  
    default:
    return state;
    }
  }
  </code></pre>
  
  <p>index.js</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, Switch } from "react-router-dom";
  import promise from 'redux-promise';
  import { logger } from 'redux-logger'
  
  
  import ContentIndex from './components/content-index';
  import reducers from './reducers';
  
  const createStoreWithMiddleware = applyMiddleware(promise, logger)(createStore);
  
  ReactDOM.render(
    &lt;Provider store={createStoreWithMiddleware(reducers)}&gt;
      &lt;BrowserRouter&gt;
        &lt;div&gt;
        &lt;Route  path = "/" component = {ContentIndex}/&gt;
      &lt;/div&gt;
      &lt;/BrowserRouter&gt;
  
    &lt;/Provider&gt;
    , document.querySelector('.container'));
  </code></pre>
  
  <p>components/content-index.js</p>
  
  <pre><code>import React, {Component} from 'react';
  import {fetchContent} from '../actions';
  import {connect} from 'react-redux';
  import _ from 'lodash';
  
  class ContentIndex extends Component {
    componentDidMount(){
      this.props.fetchContent();
    }
  
    renderContent(props){
      return this.props.contents.map((content, index) =&gt; {
        return (
          &lt;article key={content.sys.id}&gt;
            &lt;h3&gt;{content.fields.name}&lt;/h3&gt;
            &lt;p&gt;{content.fields.website}&lt;/p&gt;
          &lt;/article&gt;
        );
      });
    }
  
    render(){
      return(
        &lt;div&gt;
        &lt;h3&gt;Content&lt;/h3&gt;
        {this.renderContent()}
        &lt;/div&gt;
      );
    }
  }
  
  const mapStateToProps = (state) =&gt; {
    return {contents: state.contents.all};
  }
  // export default CharacterIndex;
  export default connect(mapStateToProps, {fetchContent})(ContentIndex);
  </code></pre>