Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.10.2019, 19:03
Интересующийся
Отправить личное сообщение для darktowerk56c Посмотреть профиль Найти все сообщения от darktowerk56c
 
Регистрация: 08.03.2019
Сообщений: 10

Как сделать бесконечный скролл (redux)?
В продолжение темы:
https://javascript.ru/forum/dom-wind...a-react-j.html
Всем привет, подскажите, пожалуйста, как реализовать следующее:
При инициализации компонента у меня происходит 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)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать обработку динамически созданной формы через ajax? Wimko AJAX и COMET 4 08.10.2019 16:37
Как правильно сделать бесконечный скролл с автоматической загрузкой контента (React.j darktowerk56c Элементы интерфейса 1 07.10.2019 15:56
Как сделать калькулятор и с чего начать? A.P. Yellowman Общие вопросы Javascript 3 15.11.2013 19:32
Js scrollpane, постоянно виден скролл, как убрать? metaller92 jQuery 0 17.07.2013 10:23
Как сделать реакцию на изменение любого элемента формы. Mik Events/DOM/Window 3 28.07.2011 07:52