redux 当NgRx中状态的其他部分发生更改时,会触发数组订阅

ibps3vxo  于 2023-11-19  发布在  其他
关注(0)|答案(2)|浏览(92)

我有locationsactiveLocationsIds数组。locations数组包含所有位置,activeLocationsIds包含活动位置的ID(不是对象,只有ID为1..1且ID为locations)。
每当状态的其他部分发生变化时,例如selectedOrder,activeLocationsIds的订阅就会被触发。
这是我的状态:

export interface ICustomerHierarchyState {
    locations: ILocation[],
    activeLocationsIds: string[];
    selectedOrder: number;
}

字符串
这些是用于获取activeLocations的选择器:

export const getActiveLocationsIds = createSelector(
    getCustomerHierarchyState,
    state => state.activeLocationsIds
)

export const getActiveLocations = createSelector(
    getCustomerHierarchyState,
    getActiveLocationsIds ,
    (state, getActiveLocationsIds ) => state.locations.filter(x => getActiveLocationsIds.includes(x.locationId)) ?? []
)


这是activeLocationsIds reducer:

on(CustomerHierarchyPageActions.setActiveLocations, (state, action): ICustomerHierarchyState => {
        return {
            ...state,
            activeLocationsIds: action.locationsIds
        }
    })


下面是activeLocationsIds操作:

export const setActiveLocations = createAction(
    '[Customer-Hierarchy Page] Set ActiveLocations',
    props<{ locationsIds: string[] }>()
)


另外,这里是清除selectedOrder的减速器:

on(CustomerHierarchyPageActions.clearSelectedOrder, (state): ICustomerHierarchyState => {
        return {
            ...state,
            selectedOrder: -1
        }
    })


最后是getActiveLocations订阅:

this.subscriptions.add(
      this.store.select(getActiveLocations)
        .subscribe(
          activeLocations => {
            this.activeLocations = activeLocations;
          }
        ));


每当我调度一个不同的操作(例如this.store.dispatch(CustomerHierarchyPageActions.clearSelectedOrder());)时,就会触发对activeLocations的订阅。
为什么会这样?
在我的reducer中,我只更新selectedOrder(到-1值),所以我不知道为什么getActiveLocations订阅被触发。

ne5o7dgx

ne5o7dgx1#

答案:Ngrx selector not triggering when the reducer alters the slice
这个检查是一个简单的引用检查(=)。
您正在创建一个新对象,这意味着一个新引用

更新:

最简单的解决方案是使用distinctuntilchanged运算符和自定义比较器(https://www.learnrxjs.io/learn-rxjs/operators/filtering/distinctuntilchanged)。

oug3syen

oug3syen2#

这可能与你在reducer中直接将action payload分配给activeLocationIds的方式有关-你应该复制一个副本:

on(CustomerHierarchyPageActions.setActiveLocations, (state, action): ICustomerHierarchyState => {
  return {
    ...state,
    activeLocationsIds: [...action.locationsIds]
  }
})

字符串

相关问题