Le composant principal de réagir est appelé deux fois en utilisant REDUX

J'ai un composant principal react qui distribue l'action redux sur componentDidMount , l'action récupérera les données de l'API.

Le problème est: lorsque je démarre mon application, mon code componentDidMount > et le composant principal sont exécutés deux fois. Ainsi, il effectue 2 appels d'API pour chaque fois que l'application se charge. L'API a une limite pour le nombre total d'appels que je fais, je ne veux pas atteindre ma limite.

J'ai déjà essayé de résoudre le problème en supprimant le constructeur, en utilisant componentWillMount le problème n'est pas résolu.

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(<Provider store={store}><MapStateToProps/></Provider>, document.getElementById("root"));

/// actions

import { combineReducers } from 'redux';
import DataReducer from './dataReducer';

export default combineReducers({
    data: DataReducer
});

// réducteur

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;
    }

}

//rootreducer

    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);
            })
    }
}

////index

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 <div className="">
            <TableHeader {...this.props} />
        </div>
    }
}

export default Main;

l'image de la console est postée pour la référence "rendu" est enregistrée dans le composant principal

"runned1" est enregistré dans le sous-composant principal

"monté" enregistré dans le composantDidMount

"