redux et ngrx - évitent les changements de valeur inutiles dans le même réducteur

Question

Il s'agit d'une question générale ngrx/rxjs je suppose. J'ai trois données-réseaux:

• projets
• todo
• événements

actuellement, je les ai tous dans un réducteur unique appelé données.

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

Je souscris aux propriétés par le biais d'un sélecteur personnalisé avec

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

Donc, dans un composant j'ai

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

Si je comprends bien, ce sera le feu chaque fois que la valeur des projets s'il y avait un changement dans l'ensemble du réducteur. Donc, il pourrait y avoir eu 10 changements dans les todos et les projets tireront toujours 10 fois la même valeur, ce qui pourrait déclencher inutilement des fonctions dans l'abonnement 10 fois.

Outre la création d'un réducteur séparé pour chaque propriété, existe-t-il d'autres moyens d'éviter cela?

Answer 1

avez-vous testé? parce que, la réponse est non, ceci se déclenchera seulement quand le changement se produira sur getProjects tranche de l'état.

En outre, vous pouvez diviser vos composants en composants intelligents/non intelligents et lier des données à des composants non intelligents à l'aide du canal async. De cette façon, vous ne vous abonnez pas à stocker du tout depuis async pipe fait cela pour vous.

alors dans votre composant intelligent que vous venez d'écrire:

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

et dans vos composants intelligents vous Html lier à votre composant muet:

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

Answer 2

Une façon de faire est pour les diviser en différents réducteur Une autre approche sera de créer un sélecteur personnalisé comme quelque chose ci-dessous

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

si vous avez besoin de comparer la valeur dans l'objet de distinguer si son objet a changé, vous pouvez utiliser comparateur

/* 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; });