2017-10-01 6 views
0

이것은 일반적인 ngrx/rxjs 질문입니다. 현재 내가 데이터라는 단일 감속기에 모두가redux와 ngrx - 동일한 감속기의 변경을 통해 불필요한 값 실행 방지

  • 프로젝트
  • 할 일
  • 이벤트

: 나는 3 데이터 배열을 가지고있다. 내가 제대로 이해하면 내가 그래서 구성 요소에

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

와 함께 사용자 지정 선택기를 통해 속성에 가입

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

나는이 값마다 실행됩니다,

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

이 전체 감속기에 변화가 있었다면 프로젝트를

그래서 todos가 10 번 변경 될 수 있었고 프로젝트는 여전히 동일한 값의 10 배를 발사 할 수 있었으며 잠재적으로 구독 내 기능을 불필요하게 10 번 트리거 할 수있었습니다.

각 속성마다 별도의 감속기를 만드는 것 외에는 다른 방법으로이를 피할 수 있습니까?

답변

1

테스트를 해 보셨습니까? 왜냐하면, 대답은 아니오입니다, 이것은 변화가 일어날 때만 발생합니다 getProjects 상태의 슬라이스.

또한, 구성 요소를 스마트/멍청한 구성 요소로 분할하고 async 파이프를 사용하여 바보 구성 요소에 데이터를 바인딩 할 수 있습니다. 그런 식으로 당신은 async 파이프가 당신을 위해 그 일을하기 때문에 가게에 전혀 가입하지 않습니다.

는 스마트 구성 요소에 그냥 쓰기 :

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

및 스마트 구성 요소

당신이 당신의 바보 같은 구성 요소에 바인딩 HTML : 할

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

0

한 가지 방법 즉 다른 감속기로 분할하려면 또 다른 방법은 아래에있는 것과 같은 사용자 지정 선택기를 작성하는 것입니다.

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

당신이 개체의 변경 여부를 구분하기 위해 객체의 값을 비교해야하는 경우, 당신은 비교 자 사용할 수 있습니다

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