Question

这是一个普遍的ngrx / rxjs问题。我有三个数据阵列：

项目
待办事项
事件

目前我将它们全部放在一个名为data的reducer中。

const INITIAL_STATE: State = {
    projects: [],
    todos: [],
    events: []
};

我通过自定义选择器

订阅属性

export const getProjects = createSelector(getDataState, fromData.getProjects);
export const getTodos = createSelector(getDataState, fromData.getTodos);

所以我有一个组件

store.select(fromRoot.getProjects).subscribe()

如果我理解正确的话，如果整个减速器有任何变化，每次项目的价值都会触发。

因此，todos可能会有10次更改，项目仍会触发相同值的10倍，可能会在订阅中触发不必要的10次函数。

除了为每个属性创建一个单独的reducer之外，还有其他方法可以避免吗？

Answer 1

你试过吗？因为，答案是否定的，只有在状态getProjects切片发生变化时才会触发。

另外，您可能希望将组件拆分为智能/哑组件，并使用async管道将数据绑定到哑组件。这样你根本不会订阅商店，因为async管道会为你做这件事。

然后在你的智能组件中写下：

this.propertyX$ = this.store(yourReducer.yourReducerStateProperty);

并在您的智能组件html中绑定到您的哑组件：

<dumb-component [propertyX]=propertyX$ | async> </dumb-component>

Answer 2

一种方法是将它们分成不同的reducer 另一种方法是创建一个自定义选择器，如下面的

this.foo=store.select('somereducer').pluck('yourtargetobject').distinctUntilChanged()

如果你需要比较对象中的值来区分对象是否发生了变化，你可以使用comparer

/* With comparer */
var source = Rx.Observable.of({value: 42}, {value: 42}, {value: 24}, 
{value: 24})
  .distinctUntilChanged(function (x) { return x.value; }, function 
(a,b) { return a !== b; });

redux和ngrx - 通过同一个reducer

2 个答案: