Селектор Ngrx не срабатывает, когда редуктор изменяет срез

Question

Я работаю над угловым 2 приложением, которое широко использует магазины Ngrx. Я получил приличную структуру в моих магазинах. Я использую селекторы для извлечения фрагментов состояния, и обычно все селекторы правильно запускают связанные с ними подписки. Ngrx потрясающий.

К сожалению, сегодня я вошел в новую проблему и попытался поискать решения в Интернете безуспешно. Я наконец нашел способ обойти себя, протестировав другой синтаксис, но мне любопытно, почему это происходит.

Этот селектор точно такой же, как и все мои другие селекторы:

export const getToolBars = (state: State): any => state.toolBars;
export const selectState: MemoizedSelector<object, State> = createFeatureSelector<State>('http');
export const selectToolBars: MemoizedSelector<object, any> = createSelector(selectState, getToolBars);

Проблема в том, что селектор не запускает подписку, как это должно быть при обновлении данных через редуктор.

Я нашел обходной путь для этого конкретного случая. Используя это:

export const getToolBars = (state: State): any => { return { toolBars: state.toolBars }; };

Вместо:

export const getToolBars = (state: State): any => state.toolBars;

исправляет это, но я бы предпочел, чтобы все мои геттеры выглядели одинаково, поэтому мне интересно, почему эта проблема возникает вообще?

Дополнительная информация, state.toolBars - это объект с интерфейсом

toolBars: { [name: string]: any };

Подойдут любые подсказки или ссылки. Сейчас все «работает», я только ищу способы улучшить свой набор навыков. Большое спасибо!

Изменить:

Я сделал стек, чтобы проиллюстрировать проблему.

https://stackblitz.com/edit/angular-selector-issue?file=src%2Fapp%2Froot-store%2Ftest-store%2Fselectors.ts

На этом стеке я сделал запись в консоль всякий раз, когда редуктор добавляет материал в состояние панели инструментов. Каждые две секунды в состояние добавляется новая запись.

В текущем состоянии подписка не срабатывает, когда редуктор добавляет контент.

Если в файле selectors.ts мы комментируем строку 6 и раскомментируем строку 7, это работает так же, как и в моем приложении. И мне интересно, почему обычный синтаксис не будет ...

Answer 1

Вы изменяете состояние напрямую, это проблема.

Селекторы запоминаются по умолчанию и проверяют, изменяются ли аргументы между последним вызовом и текущим вызовом. Эта проверка является простой справочной проверкой (===). Поскольку вы изменяете состояние напрямую, ссылка остается прежней.

Чтобы исправить это, вы можете сделать:

return {
        ...state,
        toolBars: {
          ...state.toolBars,
          [action.value]: action.subValue
        }
}