Как сделать бесконечный скролл (redux)?

Question

[darktowerk56c]

В продолжение темы:
Как правильно сделать бесконечный скролл с автоматической загрузкой контента (React.js)?
Всем привет, подскажите, пожалуйста, как реализовать следующее:
При инициализации компонента у меня происходит ajax запрос в ответе приходит массив с десятью объектами, например их 10.
Когда я скролл дойдет до низа страницы, в методе onScroll я снова сделаю ajax запрос, и из базы данных придет следующие десять записей, и так до тех пор, по не выведу все данные из БД.
Но сейчас, выходит, что при каждом запросе у меня из store приходят новые данные и при рендере я перетираю изначальный books. Как мне правильно обработать эту ситуацию?

import React, { useEffect } from 'react'
import PropTypes from 'prop-types'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { getBooks } from '../../actions/book-actions'

const Books = (props) => {

  let page = ''

  const getParam = () => {
    const param = window.location.search
      .slice(window.location.search.indexOf('?') + 1)
      .split('&')

    let result = []

    for (let i = 0; i < param.length; i++) {
      let res = param[i].split('=')

      result[res[0]] = res[1]
    }

    if (result['page']) {
      page = result['page']
    } else {
      page = '1'
    }

    return param
  }

  getParam()

  let block = false

  const onScroll = () => {
    const windowHeight = window.innerHeight
    const documentHeight = document.body.clientHeight
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop

    if (windowHeight + scrollTop >= documentHeight && !block) {
      page++

      block = true

      props.getBooks({page}) // Вернуться данные с сервера
    }
  }

  window.addEventListener('scroll', onScroll)

  useEffect(() => {
    const page = {
      page: '1'
    }

    props.getBooks(page) // Вернуться данные с сервера
  }, [])

  const {book: {books, loading}} = props
  if (loading) return <p>loading</p>

  console.log('render')

  return (
    <div className="book">

      <table className="highlight">
        <thead>
        <tr>
          <th>Имя</th>
          <th>Город</th>
          <th>Номер телефона</th>
          <th/>
        </tr>
        </thead>

        <tbody>
        {
          books &&
          books.map((book) => {
            return (
              <tr key={book.pbnum}>
                <td>{book.pbfirstName} {book.pblastName}</td>
                <td>{book.pbcity}</td>
                <td>{book.pbphoneNumber}</td>
                <td/>
                <td>
                  <Link
                    className="waves-effect waves-light btn"
                    to={`/book/${book._id}/edit?allow=true`}
                  >Редактировать</Link>
                </td>
              </tr>
            )
          })
        }
        </tbody>
      </table>
    </div>
  )
}

Books.propTypes = {
  getBooks: PropTypes.func.isRequired
}

const mapDispatchToProps = {getBooks}

const mapStateToProps = state => ({
  book: state.book
})

export default connect(mapStateToProps, mapDispatchToProps)(Books)

Answer 1

[Orbb]

сохранять предыдущий результат и добавлять к нему приходящий

я создавал в стейте prevData = [];

все приходящие тебе данные prevData.push();

в рендере просто мапишь prevData.map();

получится эффект подгрузки. Если данные просто список с некоторой инфой - до ~300 строк в рилтайме работает неплохо.

пс и не объявляй функции внутри компонентов, как это у тебя в букс сделано.

Comments

[darktowerk56c]

Примерно такая идея?

class Books extends React.Component {

  constructor(props) {
    super(props)

    this.block = false

    this.booksArr = []

    this.page = 1
  }

  componentDidMount() {

    const page = {
      page: '1'
    }

    this.props.getBooks(page)

    window.addEventListener('scroll', this.onScroll)
  }

  onScroll = () => {
    const windowHeight = window.innerHeight
    const documentHeight = document.body.clientHeight
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;

    if (windowHeight + scrollTop >= documentHeight && !this.block) {
      this.page++

      this.props.getBooks({page: this.page})
    }
  }

  render() {
    const {book: {books, loading}} = this.props
    if (loading) return <p>loading</p>

    this.booksArr = [...this.booksArr, ...books]

    return (
      <div className="book">

        <table className="highlight">
          <thead>
          <tr>
            <th>Имя</th>
            <th>Город</th>
            <th>Номер телефона</th>
            <th/>
          </tr>
          </thead>

          <tbody>
          {
            books &&
            this.booksArr.map((book) => {
              return (
                <tr key={book.pbnum}>
                  <td>{book.pbfirstName} {book.pblastName}</td>
                  <td>{book.pbcity}</td>
                  <td>{book.pbphoneNumber}</td>
                  <td/>
                  <td>
                    <Link
                      className="waves-effect waves-light btn"
                      to={`/book/${book._id}/edit?allow=true`}
                    >Редактировать</Link>
                  </td>
                </tr>
              )
            })
          }
          </tbody>
        </table>
      </div>
    )
  }
}

Books.propTypes = {
  getBooks: PropTypes.func.isRequired
}

const mapDispatchToProps = {getBooks}

const mapStateToProps = state => ({
  book: state.book
})

export default connect(mapStateToProps, mapDispatchToProps)(Books)

[Orbb]

тяжело без подсветки синтаксиса понять так ли)

1. при маунте забираем данные с апи.
2. скроллим
3. прошли определенный скролл?
4. забираем еще 10. Берем текущие данные, плюсуем к ним новые.
5. обновляем стейт через редюсер

если у вас есть редух, зачем вам аякс в компоненте?

пусть компонент следит лишь за данными и их рендером. Для подгрузки данных в стейт можно юзать мидлварь.

1. рендер - экшен getBooks() - запрос к АПИ в мидлвари - в редуксе объедините прошлый и текущий массив данных - новый стейт - ререндер. Компонент в итоге получится максимум строк в 40

[darktowerk56c]

Orbb, Спасибо.