React / Redux Async n'attend pas la réponse renvoyée

Tout d'abord mon code fonctionne (tout est exporté correctement etc) mais il n'attend pas le retour asynchrone des données. J'utilise redux-thunk pour mon middleware asynchrone

J'ai une action nommée async.js

export function itemsHasErrored(bool) {
    return {
        type: 'ITEMS_HAS_ERRORED',
        hasErrored: bool
    };
}

export function itemsIsLoading(bool) {
    return {
        type: 'ITEMS_IS_LOADING',
        isLoading: bool
    };
}

export function itemsFetchDataSuccess(items) {
    return {
        type: 'ITEMS_FETCH_DATA_SUCCESS',
        items
    };
}

export function itemsFetchData(url) {
    return (dispatch) => {
        dispatch(itemsIsLoading(true));

        fetch(url)
            .then((response) => {
                if (!response.ok) {
                    throw Error(response.statusText);
                }

                dispatch(itemsIsLoading(false));

                return response;
            })
            .then((response) => response.json())
            .then((items) => dispatch(itemsFetchDataSuccess(items)))
            .catch(() => dispatch(itemsHasErrored(true)));
    };
}

Mon réducteur

export function itemsHasErrored(state = false, action) {
    switch (action.type) {
        case 'ITEMS_HAS_ERRORED':
            return action.hasErrored;

        default:
            return state;
    }
}

export function itemsIsLoading(state = false, action) {
    switch (action.type) {
        case 'ITEMS_IS_LOADING':
            return action.isLoading;

        default:
            return state;
    }
}

export function items(state = [], action) {
    switch (action.type) {
        case 'ITEMS_FETCH_DATA_SUCCESS':
            return action.items;

        default:
            return state;
    }
}

J'ai un composant conteneur, asyncContainer.js

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux'

import {itemsFetchData} from '../../../actions/async';
import AsyncUI from './asyncUI'

class AsyncContainer extends Component {

    componentDidMount() {
        this.props.fetchData('http://5826ed963900d612000138bd.mockapi.io/items');
    }

    render() {

        if (this.props.hasErrored) {
            return <p>Sorry! There was an error loading the items</p>;
        }

        if (this.props.isLoading) {
            return <p>Loading…</p>;
        }
//This fails to wait
        return (
               <AsyncUI />
        );
    }
}

AsyncContainer.propTypes = {
    fetchData: PropTypes.func.isRequired,
    items: PropTypes.array.isRequired,
    hasErrored: PropTypes.bool.isRequired,
    isLoading: PropTypes.bool.isRequired
};

const mapStateToProps = (state) => {
    return {
        items: state.items,
        hasErrored: state.itemsHasErrored,
        isLoading: state.itemsIsLoading
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        fetchData: (url) => dispatch(itemsFetchData(url))
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(AsyncContainer);

Et enfin, j'ai un composant d'interface utilisateur simple nommé asyncUI.js écrit de manière fonctionnelle

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux'

const AsyncUI = (items) => {

    return (
        <ul>
            {items.map((item) => (
                <li key={item.id}>
                    {item.label}
                </li>
            ))}
        </ul>
    );
}

const mapStateToProps = (state) => {
    return {
        items: state.items
    };
};

export default connect(mapStateToProps)(AsyncUI);

Dans asyncContainer.js , vous pouvez voir l'appel à mon composant d'interface utilisateur simple

 return (
               <AsyncUI />
        );

Mais en appelant la propriété du redux store items dans asyncUI.js un tableau vide, donc le items.map échoue

Cependant , si je supprime le code de asyncUI.js et le place dans asyncContainer.js cela fonctionne

C'est le code qui fonctionne dans asyncContainer.js

  class AsyncContainer extends Component {
        componentDidMount() {
            this.props.fetchData('http://5826ed963900d612000138bd.mockapi.io/items');
        }

        render() {
            if (this.props.hasErrored) {
                return <p>Sorry! There was an error loading the items</p>;
            }

            if (this.props.isLoading) {
                return <p>Loading…</p>;
            }

//THIS IS WHERE I HAD <Async />
            return (
                <ul>
                    {this.props.items.map((item) => (
                        <li key={item.id}>
                            {item.label}
                        </li>
                    ))}
                </ul>
            );
        }
    }

    AsyncContainer.propTypes = {
        fetchData: PropTypes.func.isRequired,
        items: PropTypes.array.isRequired,
        hasErrored: PropTypes.bool.isRequired,
        isLoading: PropTypes.bool.isRequired
    };

    const mapStateToProps = (state) => {
        return {
            items: state.items,
            hasErrored: state.itemsHasErrored,
            isLoading: state.itemsIsLoading
        };
    };

    const mapDispatchToProps = (dispatch) => {
        return {
            fetchData: (url) => dispatch(itemsFetchData(url))
        };
    };

    export default connect(mapStateToProps, mapDispatchToProps)(AsyncContainer);

Je pense que le problème est que le composant est rendu avant que les données des éléments ne soient prêtes. C'est un comportement de réaction normal. Alors, comment puis-je "retarder" le rendu. Comme vous pouvez le voir, j'essaie d'utiliser un style d'architecture Conteneur / Composant. Je peux toujours utiliser la solution qui fonctionne comme mentionné ci-dessus, mais j'aimerais m'en tenir à ce conteneur / composant. Vais-je devoir approfondir mes promesses, etc.? Ne devrais-je pas utiliser la manière fonctionnelle d'écrire pour asyncUI.js? Je suis un peu confus.