Всем привет, пытаюсь сделать правильную работу фильтра товаров по цене. Решил использовать nouislider для построения всей этой системы, хотя как я понял можно использовать обычный input
При изменении ползунка происходит запрос к бд, и там уже ищет цену товаров в указанном диапазоне с помощью between, то есть происходит фильтрация при любом изменении положения ползунка, но проблема в том что все происходит так медленно и мне страшно представить что будет если товаров будет условно дофига), если рассмотреть работу фильтра цен у ozon, то там все работает как ясно солнышко, можете пожалуйста объяснить как можно правильней реализовать данную задачу
Если вы делаете прямые запросы в БД, то это будет медленно (так как вы совершаете за каждое изменение любого фильтра новый прямой запрос).
Для подобного решения используют JSON, то есть, как только пользователь зашел в каталог (выбрал например "Ноутбуки"), то в этот момент запрашиваются все данные единоразово (все товары, что есть в таблице "Ноутбуки" внутри БД) средствами API.
На front-end вы уже обрабатываете только полученный JSON для отрисовки требуемого числа товаров на странице и манипуляции с фильтрами.
Александр Шипин, у меня есть api для получения товара, я делаю запрос получаю данные с бд посредством этого api, в react при первой отрисовку делаю запрос в useEffect за получение данных, дальше заношу в redux, ну так же у меня есть useEffect который делает запрос за отфильтрованными товарами при изменение значение ползунков в nouislider, то есть обращаюсь к бд не на прямую, а используя свое api, я получаю все данные в правильном виде, просто запрос идет медленно к бд
evgeniy2024, ваш useEffect, который фильтрует товары по каждому изменению slider, не должен делать никаких более запросов, он занимается только фильтрацией товаров, которые вы изначально получили.
цепочка выглядит так:
1. Пользователь зашел в каталог -> front-end рисует ему категории товара (без запроса к БД)
2. Пользователь выбирает категорию -> front-end делает единственный запрос в БД и получает список товаров из таблицы нужной категории и рисует товары с пагинацией и прочими плюшками
3. Пользователь начинает фильтровать по цене -> front-end обрабатывает список товаров, фильтруя товары от и до (Без запроса к БД совсем, так как список мы уже получили во втором пункте). Тут никакого API, только чистый useEffect, реагирующий на изменение ползунков slider, где реализована подобная функция
let filterByPrice = (from, to) => {
let filter = itemsArray.filter(item => {
if (item.price > from && item.price < to) {
return item;
}
})
return filter;
}
Александр Шипин, понял, спасибо
А вот если допустим товаров будет очень много, скажем больше 100000, как с этим будет справляться функция фильтрации?
просто хочется сделать максимально оптимизированный сайт)
Простой