当存储中的数据未更改时，订阅正在触发答案

【问题标题】：Subscribe is firing when data were not changed in store当存储中的数据未更改时，订阅正在触发
【发布时间】：2018-06-06 19:59:48
【问题描述】：

我有 Angular 5 应用程序和 ngrx。我有一组对象在存储中。当我订阅获取此数组更改事件时，即使我没有更改 state.details.selectedOptions。 我只更改了 state.details.page 并调用了订阅者.

当我将 state.details.selectedOptions 更改为纯值（字符串）时，一切都按预期工作。正如我所见，问题出在数组/嵌套元素中？

//store
const initialState = {
  page: null,
  selectedOptions: []
}
// selector
export const selectedOptionsSelector =  createSelector(
  (state: any) => state.details.selectedOptions
)
// also tried such variant
export const selectedOptionsSelector = (state: any) => state.details.selectedOptions
// Component
ngOnInit() {
  this.store.select(selectedOptionsSelector).subscribe((res: any) => {
    console.log('selectedOptions', res)
  })
}

更新：

基本上在我的情况下，我在 selectedOptions 中总是有空数组，因为初始状态没有改变。我尝试在 select 中使用 distinctUntilChanged 但没有帮助

【问题讨论】：

你的描述很差，但可能是原语和实例的问题，你可能注意到"abc" === "abc"，但是["abc"] !== ["abc"]，所以基本上每次使用{...}或@987654325 @ 您正在创建一个新实例，使用 rxjs 之类的运算符 distinct 在这里可能非常有用，因为它允许比较新值和当前值，并且仅当它与使用自定义比较的前一个值不同时才发出新值功能

标签： angular ngrx reselect

【解决方案1】：

很难确定，因为您尚未添加减速器定义，但正如您所说，您总是将 selectedOptions 设置为空数组，我假设您的意思是在减速器中您有更新页面的操作，以及何时动作被调度，你修改它的状态为：

case Actions.Type.UPDATE_PAGE: {
    return {
        ...state,
        page: 'newValue',
        selectedOptions: []
    }
}

Redux 使用浅相等检查来确定状态是否已更改。正如@Roomy 所说， ["a"] === ["a"] 返回 false，因此 Redux 将在您分配新引用时将上述内容视为对 state.selectedOptions 的更改。使用 distinctUntilChanged() 并没有什么不同，因为它使用浅相等检查，因此如果您传递 2 个具有不同引用的数组，它将认为这是一个更改。

如果您只需要更新页面，则只更新页面属性并保持 selectedOptions 不变：

case Actions.Type.UPDATE_PAGE: {
    return {
        ...state,
        page: 'newValue'
    }
}

这样，组件中的观察者将不会收到有关 selectedOptions 更改的通知。

你也可以使用

case Actions.Type.UPDATE_PAGE: {
            return {
                ...state,
                page: 'newValue',
                selectedOptions: state.selectedOptions
            }
}

因为在这种情况下 selectedOptions 仍将指向相同的引用。虽然这是毫无意义的，但它有助于解释这一点。

【讨论】：