title: React main component is called twice while using redux
body: <p>I have a react main component that dispatches redux action on <code>componentDidMount</code>, the action will fetch API data.</p>
  
  <p>The problem is: when I start my application my <code>componentDidMount</code> and main component are executed twice. So, it makes 2 API calls for each time application loads. API has a limit for the total number of calls I make, I don't want to reach my limit.</p>
  
  <p>I have already tried fixing the issue by removing constructor, using <code>componentWillMount</code> problem is not solved.</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import * as actions from '../redux/actions/fetchActions';
  import TableHeader from './tableHeader';
  
  class Main extends Component {
  
      componentDidMount() {
          console.log("mounted");
  
          // this.props.dispatch(actions.fetchall("market_cap"));
      }
      render() {
          console.log("rendered");
          //  console.log(this.props.cdata);
          //  console.log(this.props.cdata.data.data_available);
  
          return &lt;div className=""&gt;
              &lt;TableHeader {...this.props} /&gt;
          &lt;/div&gt;
      }
  }
  
  export default Main;
  </code></pre>
  
  <p>///actions</p>
  
  <pre><code>    import axios from 'axios';
  
  export function fetchall(sort) {
      return function (dispatch) {
          axios.get(`https://cors-anywhere.herokuapp.com/https:-----------`)
              .then(function (response) {
                  dispatch({
                      type: 'FETCH_DATA',
                      payload: response.data
                  })
              })
              .catch(function (error) {
                  console.log(error);
              })
      }
  }
  </code></pre>
  
  <p>//reducer</p>
  
  <pre><code>let initialState = {
      coins: [],
      data_available: false,
  
  };
  
  export default function (state = initialState, action) {
      switch (action.type) {
          case 'FETCH_DATA':
              return {
                  ...state,
                  coins: action.payload,
                  data_available: true
  
              }
          default: return state;
      }
  
  }
  </code></pre>
  
  <p>//rootreducer</p>
  
  <pre><code>import { combineReducers } from 'redux';
  import DataReducer from './dataReducer';
  
  export default combineReducers({
      data: DataReducer
  });
  </code></pre>
  
  <p>////index</p>
  
  <pre><code>import {createStore, applyMiddleware} from 'redux';
  import MapStateToProps from './components/mapStateToProps';
  import rootReducer from './redux/reducers/rootReducer';
  import {Provider} from 'react-redux';
  import thunk from 'redux-thunk';
  //const initialState = {};
  const middleware = [thunk];
  
  const store = createStore(rootReducer, applyMiddleware(...middleware));
  
  ReactDOM.render(&lt;Provider store={store}&gt;&lt;MapStateToProps/&gt;&lt;/Provider&gt;, document.getElementById("root"));
  </code></pre>
  
  <p>console image is posted for reference "rendered" is logged inside main component</p>
  
  <p>"runned1" is logged inside main-subcomponent</p>
  
  <p>"mounted" logged inside componentDidMount</p>
  
  <p>"<a href="https://i.stack.imgur.com/hpJyP.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hpJyP.jpg" alt="enter image description here"></a></p>