Добавить React Infinite Scroll

Question

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

Вот так выглядит моя приборная панель.

import React from 'react';
import {connect} from 'react-redux';
import requiresLogin from './requires-login';
import LinkButton from './LinkButton';
import { fetchRecs } from '../actions/recommendations';
import { POSTER_PATH_BASE_URL } from '../config';
import {Link} from 'react-router-dom';

import './dashboard.css';

export class Dashboard extends React.Component {
componentDidMount()
{
    this.props.dispatch(fetchRecs());
}

render() {
    let recs;
    if (this.props.recs) {
        recs = this.props.recs.map((rec, index) => {
          return (
            <li key={index} className="card">
              <section className="dash-recommended">
                <section className="dash-movie-poster">
                  <Link to={`/movie/${rec.movieId}`}><img
                    src={POSTER_PATH_BASE_URL + rec.posterUrl}
                    alt="movie poster"
                  />
                  </Link>
                </section>
                <section className="dash-container">
                <section className="dash-rec-user">
                <h3><Link to={`/user/${rec.userId.id}`}>{rec.userId.username}</Link></h3></section>
                <section className="dash-movie-title">
                <h3><Link to={`/movie/${rec.movieId}`}>{rec.title}</Link></h3></section>
                <section className="dash-recommend-desc">
                  <p>{rec.recDesc}</p>
                </section>
                </section>
              </section>
            </li>
          );
        });
      }

    return (
      <section className="dashboard-container">
        <section className="myRecommended">

        <section className="recommended-list">
        <section className="profileButton">
            <LinkButton to='/profile' className='profileBtn'>My Recomendations</LinkButton>
            </section>
            <section className="recommendButton">
        <LinkButton to='/recommend' className='recBtn'>+ Recommend</LinkButton>
        </section>
          <section className="recommendation-header">
            <h2>Recent Activity:</h2>
          </section>
          <ul className="recent-activity">{recs}</ul>
        </section>
        </section>
      </section>
    );
  }
}

Это плагин для бесконечной прокрутки, который я искал для использования https://github.com/ankeetmaini/react-infinite-scroll-component

Это то, что github показывает на документах

<InfiniteScroll
 dataLength={items.length} //This is important field to render the next data
 next={fetchData}
 hasMore={true}
 loader={<h4>Loading...</h4>}
 endMessage={
<p style={{textAlign: 'center'}}>
  <b>Yay! You have seen it all</b>
</p>
}
// below props only if you need pull down functionality
refreshFunction={this.refresh}
pullDownToRefresh
pullDownToRefreshContent={
<h3 style={{textAlign: 'center'}}>&#8595; Pull down to refresh</h3>
}
releaseToRefreshContent={
<h3 style={{textAlign: 'center'}}>&#8593; Release to refresh</h3>
}>
{items}
</InfiniteScroll>

Так что на самом деле я просто ищу толчок в правильном направлении, с чего начать с того, как определить длину для моих «recs» и что делать со «следующей» частью. Если у кого-то есть более простой способ добавить бесконечный свиток, то я все уши.

Так что мне сказали, что мне нужно провести рефакторинг. Я как бы потерялся в том, что мне нужно, чтобы сделать рефакторинг, чтобы это работало.