Реакция избыточного ренджа и рендеринга компонентов слишком рано перед действиями

Question

Я отправляю запрос в API, а затем сохраняю ответ в массив для последующего использования с thunk, но проблема в том, что мой компонент слишком быстро вызывает функцию рендеринга до того, как мое действие сохранит ответ от API в массив.

Я получаю ошибку "Consider adding an error boundary to your tree to customize error handling behavior".Я устанавливаю "isFetching" состояние bool соответственно true / false каждое действие, но функция рендеринга, кажется, полностью игнорирует, если я ставлю как условие if isFetching is true then return <p>loading</p> в рендере.Действие, которое отвечает за установку данных из API, работает и устанавливается правильно, но тогда уже слишком поздно.

Вопрос в том, как отложить рендеринг компонента, чтобы к моменту рендеринга у меня уже были данные, сохраненные в массиве иготов к работе?

ОБНОВЛЕНИЕ С КОДОМ:

Action.js:

import axios from "axios";
export let startFetch = () => {
    return {
        type: "START_FETCH"
    }
}
export let endFetch = (array) => {
    return {
        type: "END_FETCH",
        array
    }
}
export let fetchApi = () => {
    let url = "http://127.0.0.1:5000/api/stats"
    return (dispatch) => {
        dispatch(startFetch())
        return axios.get(url).then(
            (response) => {
                dispatch(endFetch(response.data))
            },
            (err) => {
                console.log(err);
            }
        )
    }
}

Reducer.js:

export let fetchApiReducer = (state={isFetching : false, array : []},action) => {
    switch(action.type){
        case 'START_FETCH':
            return {
                isFetching : true
            }
        break;

        case 'END_FETCH':
            return{
                isFetching : false,
                array : action.array
            }
        break;
        default:   
            return state;
    }
}

Container.js:

import React, {Component} from "react";
import {connect} from "react-redux";
import {bindActionCreators} from 'redux';
import {fetchApi} from "../actions/adsActions"

class AdsList extends Component {

    componentWillMount() {
            this.props.fetchApi();
    }

    renderList(ad) {
        return (
            <a className="list-group-item list-group-item-action flex-column align-items-start">
                <div className="d-flex w-100 justify-content-between">
                  <h5 className="mb-1">{ad.text}</h5>
                  <small className="text-muted">{ad.date}</small>
                </div>
            </a>
        );
    }


    render() {
        if(this.props.isFetching == true) {
            return (<p>Loading</p>);
         } else if (this.props.isFetching == false && this.props.array.length >= 1) {
                return (
                <div>
             {this.props.array.map(this.renderList)}
            </div>
         );
    }
}


}
function mapStateToProps(state) {
    return {
        isFetching: state.isFetching,
        array: state.array
    };
}


function matchDispatchToProps(dispatch){
    return bindActionCreators({fetchApi: fetchApi}, dispatch);
}


export default connect(mapStateToProps, matchDispatchToProps)(AdsList);

Большое спасибо.