Как обрабатывать асинхронные данные, поступающие на реагирующие компоненты через componentDidMount

Question

Я работал с избыточными действиями, чтобы получить такие данные:

пример:

export const example = () =>  dispatch => {
  dispatch({ type: "FETCH_EXAMPLE_DATA_LOADING" });

  return axios.get('/admin').then(({ data: exampleData })) => 
           dispatch({ type: "FETCH_EXAMPLE_DATA_SUCCESS", payload: exampleData })
          .catch(err => dispatch({ type: "FETCH_EXAMPLE_DATA_FAILED", payload: err }))
}

и редуктор Пример:

const INITIAL_STATE = {
    exampleData: []
};

case "FETCH_EXAMPLE_DATA_LOADING":
        return { ...state, loadingData: true };

case "FETCH_EXAMPLE_DATA_SUCCESS":
    return {
        ...state, exampleData: action.payload, loadingData: false
    }
case "FETCH_EXAMPLE_DATA_FAILED":
    return {
        ...state,
        fetchError: 'some nonsense about an error!',
        loadingData: false
    }

проблема в том,когда я получаю данные в виде проб и хочу визуализировать их с помощью componentDidMount (), я делаю это:

handleFetchData() {
    if(this.props.assets.fetchError) {
        return (  
           <h1>{this.props.assets.fetchError}</h1>
        );
    } else if(this.props.assets.loadingMovies) {
        return (
            <div className="loading">
                <h1>Loading...</h1>
            </div>
        );
    } else {
        return the data!
    }
}

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

Я также попробовал некоторые другие предложения, сделанные людьми в stackoverflow, например:

fetchMovieResults() {
    const {assets} = this.props;      

    if (assets) {
      if (assets.fetchResultsError) {
        // if error
        return (
          <div className="loading">
            <h1>{assets.fetchResultsError}</h1>
          </div>
        );
      } else if (assets.SearchResult && assets.SearchResult.Search && assets.SearchResult.Search.length > 0) {
        // if data and more than 0
        return assets.SearchResult.Search.map(movie => (
            <div className="latest-admin" key={movie.Title}>
                <div className="poster" style={{backgroundImage: `url(${movie.Poster})`}}></div>
                <button onClick={() => this.props.chooseMovie(movie.imdbID, this.props.formValues, this.props.history)}>Choose Movie</button>  
            </div>
        ));
      }
    }

    // no error or data
    // has to be loading
    return (
      <div className="loading">
         <h1>Loading...</h1>
      </div>
    );
}

но это навсегда повлияло на загрузку данных, а не на рендеринг!какие-либо предложения?:)