Как поменять limit для API при определенных брейкпоинтах по длине экрана?

Question

[luxurypluxury]

Есть у меня такая конструкция:

useEffect(() => {
        dispatch(fetchItems({
            sort: 'rating',
            order: 'desc',
            page: 1,
            limit
        }));
    }, [limit])

Breakpoints 1024, 600
Если больше 1024, то лимит 9; меньше 1024 - 6; меньше 600 - 2;

Answer 1

[Дарья]

Добрый день. Вам нужно знать ширину экрана, получить её можно так: window.innerWidth
Дальше можно сравнить это значение с желаемым и получить boolean значение.
Чтобы следить за изменением ширины экрана, есть такое решение:

/**
 * @example:
 * const [width, setWidth] = useState(window.innerWidth);
 * useWindowResize(setWidth);
 * */
export function useWindowResize(
  callback: (width: number) => void,
  deps: DependencyList = [],
): void {
  const makeThrottledAction = throttle(
    () => callback(window.innerWidth),
    150,
  );

  useEffect(() => {
    window.addEventListener('resize', makeThrottledAction, { passive: true });
    return () => {
      window.removeEventListener('resize', makeThrottledAction);
    };
  }, [...deps]);
}

Заметьте, я использовала функцию throttle из lodash, так как слушатель resize вызывается очень часто и может привести к проблемам с производительностью. Также, если вы не используете TS, просто удалите типы из примера.
Удачи!