Вы устали писать сложный и избыточный код в своем приложении Redux? Случается ли вам, что вам приходится пересчитывать одни и те же значения снова и снова, даже если базовые данные не изменились? Если да, то пришло время повысить уровень вашей игры Redux с помощью библиотеки createSelectorот Reselect!

Reselect — это мощная библиотека, которая помогает оптимизировать селекторы Redux, запоминая их результаты. Мемоизация — это метод, который позволяет кэшировать вычисленный вывод функции на основе ее аргументов, чтобы последующие вызовы с теми же аргументами могли быть возвращены из кеша вместо повторного вычисления результата. Это может значительно повысить производительность вашего приложения, особенно при работе со сложными и дорогостоящими селекторами.

Давайте углубимся в некоторые методы, предоставляемые библиотекой createSelectorReselect:

1. createSelector: это основной метод, предоставляемый Reselect. В качестве аргументов он принимает массив селекторов ввода и функцию результата. Селекторы входных данных отвечают за извлечение определенных частей состояния Redux, а функция результата отвечает за вычисление окончательного результата на основе результатов селекторов входных данных.

import { createSelector } from 'reselect';
const inputSelector1 = (state) => state.someProperty;
const inputSelector2 = (state) => state.anotherProperty;
const resultFunction = (property1, property2) => property1 + property2;
const mySelector = createSelector(
  inputSelector1,
  inputSelector2,
  resultFunction
);
// Usage
const result = mySelector(state);

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

2. Составление селекторов. Reselect позволяет составлять селекторы модульным и многоразовым способом. Вы можете создавать сложные селекторы, объединяя более мелкие и более целенаправленные селекторы с помощью метода createSelector.

const subSelector1 = createSelector(
  (state) => state.subProperty1,
  (subProperty1) => subProperty1 * 2
);
const subSelector2 = createSelector(
  (state) => state.subProperty2,
  (subProperty2) => subProperty2 * 3
);
const mySelector = createSelector(
  subSelector1,
  subSelector2,
  (result1, result2) => result1 + result2
);
// Usage
const result = mySelector(state);

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

import { reselect } from 'reselect';
const mySelector = reselect({
  selector1: (state) => state.property1,
  selector2: (state) => state.property2,
  resultFunc: (property1, property2) => property1 + property2
});
// Usage
const result = mySelector(state);

Используя библиотеку createSelectorReselect, вы можете оптимизировать свое приложение Redux, повысив его производительность и сократив ненужные вычисления. Так зачем ждать? Начните использовать Reselect сегодня и усовершенствуйте свои селекторы Redux!