Как сделать api пагинацию в react?

Question

[mr jeery]

Добрый день.
Изучаю реакт и столкнулся со следующей задачей:
У меня есть .json файл с api - огромным массивом городов.
Нужно выводить по 10 городов на страницу и сделать пагинацию.
Но делать единственный fetch ко всему массиву и присваивать к state все города, не вариант из-за объемов, как мне кажется.
Нужно сначала загрузить первые 10 элементов, после нажатия на "загрузить еще" - делать запрос на следующие 20 элементов и таким образом пополнять state.
нашел такой пример, используя гугл с фразой "api pagination"
gaearon.github.io/flux-react-router-example/#
Но он мне кажется слишком сложным и запутанным.

Подскажите рецепт или поделитесь какой-нибудь статьей или ссылкой на github, которая поможет осуществить задуманное.

Comments

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

API сами писали или используете публичный? Если писали сами, то реализована ли пагинация на сервере? Если публичный, киньте ссылку на документацию по этому API.

[mr jeery]

Антон Спирин, API публичный, bulk.openweathermap.org/sample - ссылка на скачку API списков городов. которые нужны, чтобы получить id и узнавать погоду уже с помощью https://openweathermap.org/current#current_JSON

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

mr jeery, так. Вы что-то явно путаете. REST API это интерфейс взаимодействия сервера с клиентом посредством http запросов. А то что вы скинули это ссылка на архив с json файлом. Вы данные из этого файла как до клиента доставлять собираетесь? Для этого вам нужен сервер с API, на котором к тому же придется реализовать пагинацию или скачать готовый модуль пагинации.

Для Weather приложения хорошо бы подошел react-google-autocomplete.
Не понимаю зачем вам отдавать клиенту список всех городов. Искать в нем что-либо будет не очень удобно.

[mr jeery]

Антон Спирин, да, действительно запутал вас и себя с терминологией. Я хочу скачать этот файл себе и уже взаимодействовать с ним. Мне нужен сервер с API и пагинацией. Что почитать ? Можете в этом помочь-посоветовать ? Мне нужен какой-то JSON парсер специальный для файла большого, наверное?

Уже не цель мною руководит, потому что столкнулся с "испытанием" и хочу разобраться...
Не понимаю чем мне может помочь react-google-autocomplete, гугл не предоставляет Weather API, а пользуется тем, что я скинул

[Виталий Яковенко]

Сделайте сервер на micro например, в котором по параметрам offset/page и limit отдавайте города.
В простейшем виде это:

const sortedCities = JSON.parse(fs.readFileSync('cities.json', 'utf-8')).sort()
export default async (req,res) => sortedCities.slice(offset, limit)