Как сделать пагинацию в reactjs? (без стороних библиотек для компонентов)?

Question

[rsoinvi]

Есть апиха с юзерами

Нужно сделать пагинацию на сайте но без стороних бибилотек

Как я понял нужно для начала спарсить все в хранилище и потом уже работать с ним?

Answer 1

[Антон Спирин]

Как я понял нужно для начала спарсить все в хранилище и потом уже работать с ним?

Вы все неправильно поняли. Пагинация должна быть на стороне сервера, а параметры поддерживаться API.
Пример запроса:
GET '/api/users?limit=20&sort=name&page=3
Пример ответа:

{
  users: [ ... ],
  page: 3,
  limit: 20,
  quantity: 450,
}

По данным о странице, общем количестве пользователей и лимите строите пагинатор на клиенте.

Comments

[rsoinvi]

у меня тестовое сделать пагинацию ( без стороних либ для компонентов) Так же нужно чтобы был урл на каждую пагинацию и при перезагрузки, контент должен оставаться таким же

И все это только методами react/redux

[Антон Спирин]

rsoinvi, она особо ничем не будет отличаться от пагинации без использования react/redux, за исключением того, что вместо html у вас jsx, а данные сервера будут храниться в store redux.

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

Придется добавить в проект react-router. Читаете при загрузке страницы query параметры и передаете в запрос. По клику на пагинатор обновляете url и через методы жизненного цикла отправляете запрос.

[Максим]

Добавлю, что можно сделать пагинацию и без реакт-роутера, просто дольше будет. Для тествого может и требуется такая "самоделка". Уточните у тех, кто выдал задание нужно с роутером сделать или без. Если без, то можно все необходимые данные получить из window.location

rsoinvi