React redux thunk and component rendering too early before actions - reactjs

Question

I'm sending request to API and then saving the response to array for later use with thunk, but the problem is that my component is calling render function too fast before my action that saves the response from API to array.
The error that I'm getting is "Consider adding an error boundary to your tree to customize error handling behavior". I set "isFetching" bool state accordingly true/false each action but the render function seems to completely ignore if I put like a condition if isFetching is true then return <p>loading</p> in render. The action thats responsible for setting data from API works and sets properly but then its already too late.
Question is how do I delay rendering the component so by the time it renders I already have the data saved to array and ready to work with?
UPDATE WITH CODE:
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);
Thanks a lot.