Загрузка / поиск и трансляция видео с YouTube с помощью Google Chrome Dev Tools

Поскольку вы используете redux, ваш список элементов должен управляться с помощью действий / редуктора.

InfiniteScroll.js:

onScroll () {
    var nearBottom = window.innerHeight + window.scrollY >= document.body.offsetHeight - 100;
    if (!this.props.fetching && nearBottom) {
        fetchItems();  // dispatch action
    }
}

render () {
    var items = this.props.items.map(item => (<Component {item}/>)

    return (
        <ul>{ items }</ul>
    )
}

componentDidMount() {
    window.addEventListener("scroll", this.onScroll.bind(this), false);
}
componentWillUnmount() {
    window.removeEventListener("scroll", this.onScroll.bind(this), false);
}

действия:

fetchItems () {
    return dispatch => {
        dispatch({
            type: "FETCH_ITEMS"
        });
        fetch("/api/items")
        .then(items => {
            dispatch(itemsReceived(items));
        });
    }
}
itemsReceived (items) {
    return {
        type: "ITEMS_RECEIVED",
        payload: {
            items: items
        }
    }
}

редуктор:

case "FETCH_ITEMS":
    return {
        ...prevState,
        fetching: true

case "ITEMS_RECEIVED":
    return {
        ...prevState,
        fetching: false,
        items: prevState.items.concat(items)
    }

Таким образом, свиток прокручивает четко определенное действие (FETCH_ITEMS). Используя redux-thunk, действие вызывает вызов API для извлечения новых элементов. Когда этот вызов будет завершен, вы отправите новое действие для подачи новых элементов через редуктор.

Затем редуктор обновляет состояние, в результате чего <InfiniteScroll> переписывает обновленный список элементов.

ПРИМЕЧАНИЕ. Вы также должны установить fetchching в false в случае ошибки.