Когда нужно использовать reselect?

Question

[Vadim Stepanenko]

привет!
разбираюсь с reselect и столкнулся с вопросом - в каких случаях нужно создавать селектор createSelector?

понятно, что для useSelector((state) => state.settings.form) createSelector использовать не надо. в доке говорится что createSelector нужно использовать для computed данных (filter, map, reduce и тд)

а вот например такой селектор (state) => state.settings[CONST_SECTION].list является ли computed и нужно ли для него создавать селектор? Или если вместо CONST_SECTION передается пропс?

Answer 1

[Макс]

Реселект нужен в тех случаях, когда в профайлере видно, что компонент перерисовывается, не смотря на то что данные в компонент не изменились.

Примеры того, когда это может быть: функция внутри useSelector создает и возвращает новый объект/массив. Функция (state) => state.settings[CONST_SECTION].list таковой не является

Comments

[Vadim Stepanenko]

Подскажите плиз, имеется такие селекторы:

const selectActiveCategoryId = (state) => state.globals.activeCategory;
const selectCategories = (state) => state.globals.categories;

const selectActiveCategoryData = createSelector(
    [selectCategories, selectActiveCategoryId],
    (categories, activeCategoryId) => {
        console.log('rer');
        return categories.find((item) => item.id === activeCategoryId);
    }
);

в компоненте:

const category = useSelector((state) => selectActiveCategoryData(state));

но при изменении других других данных (не selectActiveCategoryId и не selectCategories) console.log в selectActiveCategoryData все равно выводится, значит вычисление по новой осуществляется. С чем это может быть связано?

[Макс]

А перерисовка компонента происходит? Повторение вычислений этого еще не значит. Я на память не помню, что там написано в доках, насколько вычисления в селекторе ленивы.

[Vadim Stepanenko]

Макс, разобрался, косяк был у меня :)

[Alexandroppolus]

Vadim Stepanenko,

useSelector((state) => selectActiveCategoryData(state));

лучше написать
useSelector(selectActiveCategoryData);
не будет лишнего вызова селектора