How to use axios / AJAX with redux-thunk
<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>