title: reducer action is just returning pending promises
body: <p>When I make my http request from my search bar I'm getting this in my console:</p>
  
  <p><a href="https://i.stack.imgur.com/9Tu98.png" rel="nofollow noreferrer">look the image to see my console output</a></p>
  
  <p>Action received print is a console.log inside the reducer. Request print is a console.log inside the my action after the axios http request. Note that I want that in my reducer I receive the object instead a promise pending. I will put some of code to you guys know the situation and can help me.</p>
  
  <p>src/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 ReduxPromise from 'redux-promise';
  import promiseMiddleware from 'redux-promise-middleware'
  import thunkMiddleware from 'redux-thunk';
  import { createLogger } from 'redux-logger';
  
  import App from './components/app';
  import reducers from './reducers';
  
  // const createStoreWithMiddleware = applyMiddleware(ReduxPromise, createLogger)(createStore);
  const loggerMiddleware = createLogger()
  
  const store = createStore(
    reducers,
    applyMiddleware(
      thunkMiddleware, // lets us dispatch() functions
      loggerMiddleware // neat middleware that logs actions
    )
  )
  
  ReactDOM.render(
    &lt;Provider store={store}&gt;
      &lt;App /&gt;
    &lt;/Provider&gt;
    , document.querySelector('.container'));
  </code></pre>
  
  <p>src/actions/index.js</p>
  
  <pre><code>import axios from 'axios';
  
  const API_KEY = 'MY API KEY'
  const API_URL = `http://api.openweathermap.org/data/2.5/forecast?appid=${API_KEY}`;
  
  export const FETCH_WEATHER = 'FETCH_WEATHER';
  
  export function fetchWeather(city) {
    const url = `${API_URL}&amp;q=${city},BR`;
    const request = axios.get(url);
  
    console.log('Request:', request);
  
    return {
      type: FETCH_WEATHER,
      payload: request
    };
  }
  </code></pre>
  
  <p>src/containers/search_bar.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { bindActionCreators } from 'redux';
  import { fetchWeather } from '../actions/index';
  
  class SearchBar extends Component {
    constructor(props) {
      super(props);
  
      this.state = { term: '' };
      this.onInputChange = this.onInputChange.bind(this);
      this.onFormSubmit = this.onFormSubmit.bind(this);
    }
  
    onInputChange(term) {
      this.setState({ term: term });
    }
  
    onFormSubmit(event) {
      this.props.fetchWeather(this.state.term);
      this.setState({ term: '' });
  
    }
  
    render() {
      return (
        &lt;form className="input-group" onSubmit= { this.onFormSubmit }&gt;
          &lt;input 
            placeholder="Get a five-day forecast in your favorite cities"
            className="form-control"
            value = {this.state.term}
            onChange = { term =&gt; this.onInputChange(term.target.value)} 
          /&gt;
          &lt;span className="input-group-btn"&gt;
            &lt;button className="btn btn-secondary" type="submit"&gt;Submit&lt;/button&gt;
          &lt;/span&gt;
        &lt;/form&gt;
      );
    }
  }
  
  function mapDispatchToProps(dispatch) {
    return bindActionCreators({ fetchWeather }, dispatch);
  }
  
  export default connect(null, mapDispatchToProps)(SearchBar)
  </code></pre>
  
  <p>src/reducers/reducer_weather.js</p>
  
  <pre><code>export default function(state = null, action) {
    console.log('Action received', action);
    return state;
  }
  </code></pre>
  
  <p>src/reducers/index.js</p>
  
  <pre><code>import { combineReducers } from 'redux';
  import WeatherReducer from './reducer_weather'
  
  const rootReducer = combineReducers({
    weather: WeatherReducer
  });
  
  export default rootReducer;
  </code></pre>
  
  <p>What I want is that in reducer_weather I may get the response object, not a pending promise.</p>