Рефакторинг redux useSelector в отдельный хук

Вопрос или проблема

  const summary = useSelector((state) => state.deliveryOI.summary);

import { useSelector } from "react-redux";

const useOISelector = () => {
  const currentOption = useSelector((state) => state.deliveryOI.currentOption);
  const currentTableRowIndex = useSelector(
    (state) => state.deliveryOI.currentTableRowIndex
  );
  const deliveryDates = useSelector((state) => state.deliveryOI.deliveryDates);
  const isConfirmationError = useSelector(
    (state) => state.deliveryOI.isConfirmationError
  );
  const isCutOffTime = useSelector((state) => state.deliveryOI.isCutOffTime);
  const summary = useSelector((state) => state.deliveryOI.summary);
  const tableRows = useSelector((state) => state.deliveryOI.tableRows);
  const tabsForm = useSelector((state) => state.deliveryOI.tabsForm);

  return {
    currentOption,
    deliveryDates,
    isConfirmationError,
    isCutOffTime,
    summary,
    tableRows,
    tabsForm,
    currentTableRowIndex,
  };
};

export default useOISelector;

  const { tableRows, isCutOffTime, currentTableRowIndex } = useOISelector();

Ответ или решение

Рефакторинг useSelector Redux в отдельный хук: подробный разбор

В современных приложениях, основанных на React и Redux, управление состоянием является одной из ключевых задач. Ваша задача — оптимизировать использование useSelector для повышения читаемости кода и улучшения его структуры. Ваше предложение создать отдельный хук для выбора значений из Redux-хранилища является разумным, но давайте рассмотрим его более подробно с точки зрения производительности и практичности.

1. Что такое useSelector и зачем он нужен?

useSelector — это хук, предоставляемый библиотекой react-redux, который позволяет вам извлекать данные из Redux-хранилища. На первом этапе его использования, особенно в небольших компонентах, он работает отлично. Однако, по мере увеличения числа компонентов и вызовов useSelector, код может стать трудным для восприятия и сопровождения.

2. Преимущества создания отдельного хука

1. Читаемость кода: С дополнительным хуком, который инкапсулирует всю логику извлечения данных, вы снижаете количество повторяющегося кода. Это помогает в масштабировании приложения, поскольку вы можете достичь более чистой структуры.

2. Упрощение изменения логики доступа к состоянию: При необходимости изменить способ выбора состояния (например, добавить кэширование или обработку ошибок), вам нужно будет изменить только один файл, а не каждый компонент, использующий useSelector.

3. Деструктуризация возвратов: Вы можете удобно деструктурировать необходимые значения в компоненте, что делает код более лаконичным и понятным.

3. Потенциальные проблемы с производительностью

1. Множественные вызовы useSelector: В вашем предложении вы используете несколько вызовов useSelector, что может стать проблемой с производительностью. Каждый вызов создает отдельный подписчик, который будет отслеживать изменения в состоянии. Это означает, что если любое из выбранных значений изменится, все компоненты, использующие useOISelector, будут повторно рендериться.

2. Оптимизация через одиночный вызов: Чтобы избежать этой проблемы, вы можете воспользоваться одним вызовом useSelector и затем выделить необходимые значения из полученного состояния. Это улучшит производительность и уменьшит количество повторных рендеров.

4. Пример оптимизированного хука

Вот пример того, как вы можете изменить ваш хук для улучшения производительности:

import { useSelector } from 'react-redux';

const useOISelector = () => {
  const {
    currentOption, 
    currentTableRowIndex, 
    deliveryDates, 
    isConfirmationError,
    isCutOffTime, 
    summary, 
    tableRows, 
    tabsForm
  } = useSelector((state) => state.deliveryOI);

  return {
    currentOption,
    deliveryDates,
    isConfirmationError,
    isCutOffTime,
    summary,
    tableRows,
    tabsForm,
    currentTableRowIndex,
  };
};

export default useOISelector;

5. Применение в компоненте

Теперь вы можете использовать свой новый хук следующим образом:

const { tableRows, isCutOffTime, currentTableRowIndex } = useOISelector();

Заключение

Рефакторинг useSelector в отдельный хук может значительно улучшить читаемость кода. Тем не менее, важно учитывать производительность. Оптимизация через комбинирование вызовов — лучший способ минимизировать ненужные рендеры и поддерживать ваше приложение быстрым и отзывчивым. Всегда тестируйте производительность и поведение вашего приложения после внесения изменений, чтобы убедиться, что вы достигаете желаемых результатов.