title: How to use axios / AJAX with redux-thunk
body: <p>Im using <strong>axios</strong> inside my action. I need to know if this is the right way to do it or not.</p>
  
  <p><code>actions/index.js</code> ==></p>
  
  <pre><code>import axios from 'axios';
  import types from './actionTypes'
  const APY_KEY = '2925805fa0bcb3f3df21bb0451f0358f';
  const API_URL = `http://api.openweathermap.org/data/2.5/forecast?appid=${APY_KEY}`;
  
  export function FetchWeather(city) {
    let url = `${API_URL}&amp;q=${city},in`;
    let promise = axios.get(url);
  
    return {
      type: types.FETCH_WEATHER,
      payload: promise
    };
  }
  </code></pre>
  
  <p><code>reducer_weather.js</code> ==></p>
  
  <pre><code>import actionTypes from '../actions/actionTypes'
  export default function ReducerWeather (state = null, action = null) {
    console.log('ReducerWeather ', action, new Date(Date.now()));
  
    switch (action.type) {
      case actionTypes.FETCH_WEATHER:
            return action.payload;
    }
  
    return state;
  }
  </code></pre>
  
  <p>and then come combining them inside <strong>rootReducer.js</strong> ==></p>
  
  <pre><code>import { combineReducers } from 'redux';
  import reducerWeather from './reducers/reducer_weather';
  
  export default combineReducers({
    reducerWeather
  });
  </code></pre>
  
  <p>And finally calling it inside my React container some js file...</p>
  
  <pre><code>import React, {Component} from 'react';
  import {connect} from 'react-redux';
  import {bindActionCreators} from 'redux';
  import {FetchWeather} from '../redux/actions';
  
  class SearchBar extends Component {
    ...
    return (
      &lt;div&gt;
        ...
      &lt;/div&gt;
    );
  }
  function mapDispatchToProps(dispatch) {
    //Whenever FetchWeather is called the result will be passed
    //to all reducers
    return bindActionCreators({fetchWeather: FetchWeather}, dispatch);
  }
  
  export default connect(null, mapDispatchToProps)(SearchBar);
  </code></pre>