Как сделать Hook, для работы с query parameters?

Question

[Рустам Демонов]

Я хочу задавать query параметры из компонента в строке URL, так как логика получается большой мне хочется вынести её в отдельный хук.
Я сделал это:

import { isBrowser } from '../lib/is-browser';

export const useQueryParams = (desiredParams: string[]) => {
  const params = isBrowser() ? window.location.search : null;

  const queryParams = params ? parseQueryParams(params, desiredParams) : null;

  const changeQueryParams = (queryParams: Record<string, string>): void => {
    const params = new URLSearchParams(Object.entries(queryParams).filter(([, value]) => !!value));
    updateURL(params.toString());
  };

  return [queryParams, changeQueryParams] as const;
};

const updateURL = (param: string): void => {
  if (history.pushState) {
    const baseUrl =
      window.location.protocol + '//' + window.location.host + window.location.pathname;
    const newUrl = baseUrl + (param ? `?${param}` : '');
    history.pushState(null, '', newUrl);
  } else {
    console.warn('History API не поддерживается');
  }
};

export const parseQueryParams = (params: string, desiredParams: string[],): Record<string, string> => {
  const searchParams = new URLSearchParams(params);

  return desiredParams.reduce((acc: Record<string, string>, key) => {
    if (searchParams.has(key)) acc[key] = searchParams.get(key) as string;
    return acc;
  }, {});
};

Хуку useQueryParams при вызове передаётся массив строк, это ключи параметры которые нужны для компонента.
useQueryParams возвращает объект ключ - значение, и функцию которая будет изменять параметры.

Проблемы:
1. Как можно убрать все сайд эффекты в useEffect?
2. Как использовать хук не в одном компоненте? т.е. что-бы два компонента используя useQueryParams, не перезаписывали параметры друг друга.
3. Как вообще правильно задавать параметры в URL?

Answer 1

[Robur]

1. не понятен вопрос, какие эффекты, при вем тут useEffect? не хватает кода как вы это все используете и что за проблемы.
2. updateUrl должна сохранять все параметры которые уже были в урл, и добавлять/обновлять новые. У вас все удаляется и ставятся только переданные.
3. Золотой стандарт - использовать роутинг. Если не хотите или не подходит - то любой велосипед, ваш тоже подойдет.

4. Вы точно хотите именно url? может вам localStorage больше подойдет?

Comments

[Рустам Демонов]

В коллбэк useEffect`а убираются все сайд эффекты, ...

В моём случае это обращение к window.location.
updateURL и parseQueryParams это функции хэллперы для хука useQueryParams.

Использование хука:

const [queryParams, setQueryParams] = useQueryParams(['foo', 'bar', 'baz']) - Указываем какие нужны

// queryParams - это объект, в котором будет лежать значения по запрашиваемым ключам 
// { foo: 'param1', bar: 'param2', baz: 'param3' }

// Изменять параметры можно передав объект
changeQueryParams({ foo: 'param3', bar: 'param4', baz: 'param5' } ) // Передаём новые параметры

localStorage? Вы про что? На сайте есть форма, все фильтры записываемые в форму, я указываю в query параметры, если эту же ссылку открыть в другом браузере, откроется страница с заполненной формой.