Почему useSelector возвращает разные объекты?

Question

[alex4answ]

Добрый день, не могу разобраться в проблеме и понять в чем дело.

useSelector(state => state.dashboard);
Возвращает каждый раз "новый" объект, и выполняется повторный рендер.

state.dashboard не изменяется (изменяются другие части стора, редюсеры - чистые, все как и должно быть) в redux devtool видно что dashboard не изменяется,
Dashboard в state имеет интерфейс:

interface DashboardState {
  from: Date;
  to: Date;
}

Почему селектор возвращает новый объект?
Ведь я беру значения из store, не создавая нового объекта.

Если добавить shallowEqual, то все нормально и работает как и должно, никаких ре-рендеров

Либо если возвращать не целый объект, а все его части:

const from = useSelector(state => state.dashboard.from);
const to = useSelector(state => state.dashboard.to);

Все работает, но почему state.dashboard меняется, понять я не могу

Comments

[Mikhail Osher]

Без полного куска кода не разобраться.

[alex4answ]

Mikhail Osher, Так и не смог разобраться, вот пример:

в файле src/blocks/Dashboard/index.js
беру слайс state, использую его как зависимость в useEffect но при смене темы (клик на кнопку) Еффект выполняется снова, выходит useSelector возвращает новый объект.

Посмотрите пожалуйста если есть время, уже 2-3 день голову выносит эта непонятная вещь, понять никак не могу, что происходит

Answer 1

[Corvuss]

Там по умолчанию используется вроде бы строгое равенство для сравнения, поэтому объект всегда воспринимается как новый. shallowEqual как раз в данном случае подходит.

Comments

[alex4answ]

Да, там строгое равенство, но почему объект воспринимается как новый?
если эта та же ссылка на тот же объект?

[Corvuss]

With useSelector(), returning a new object every time will always force a re-render by default.

https://react-redux.js.org/next/api/hooks#equality...

Там же ниже есть рекомендации по разным кейсам использования хука.

[alex4answ]

Corvuss, в том то и дело что я не возвращаю новый объект, новый объект имеется ввиду:

useSelector((state) => ({
  from: state.dashboard.from,
  to: state.dashboard.to,
}));

Это да, новый объект, но в моем примере я беру слайс стейта, объект не новый

[Corvuss]

Возможно из-за from и to, если там объекты Date (т.е. созданные через new Date()). Лучше хранить даты в строковом виде.