ngrx/store에서 항목을 변경할 때 항목이 다시 렌더링됩니까

관찰 가능 항목에 todos bund 목록이있는 경우 todos 중 하나를 변경하면 모든 항목이 다시 렌더링됩니까?ngrx/store에서 항목을 변경할 때 항목이 다시 렌더링됩니까

2017-01-17 Martin Andersen

는 당신이 데모와 Plunkr을 게시 할 수있는 경우, – Maxime

더 나은 ... 당신을 도울 어려울 것 나는 확실히 당신에게 :) – Maxime

을 경우 할 수 있습니다 도움이되기를 바랍니다 나는 그 코드를 가지고 자기 자신을 볼 수 있었다. (- : 나는 반응이 새로운/변경된 아이템을 그릴 뿐이라는 것을 알고있다. 그러나 Angular는 똑같이 할 수 있는가?) –

각도 2와 ngrx/store로 작성된 todo 플 런커가 있습니다. 변경된 항목 만 렌더링되는 웹 브라우저 devtools에서 쉽게 볼 수 있습니다. 따라서 각도와 반응은 동일합니다. 각도 V2에서

"plnkr.co/edit/Hb4pJP3jGtOp6b7JubzS?p=preview"

출처

2017-01-17 23:02:18

우리는 구성 요소 상태 보존 형 (스마트)와 Statless의 2 개 종류가있다. 수단 (벙어리)

상태 : 일이 어떻게 진행되는지에 관심이 있습니다.

Stateless : 사물의 모양과 관련이 있습니다.

ChangeDetectionStrategy :

당신이 당신의 구성 요소에 어떤 전략을 정의하지 않습니다

의 ChangeDetection이는 항상 "다시 실행"이 구성 요소. 전략 OnPush의 경우 입력 내용이 변경되면 업데이트 만되지만이 경우에는 문자열, 객체가 아닌 수 또는 배열과 같은 Immutables에서만 작동합니다.

그래서 ngrx/저장 및 ES6 당신은 불변의 배열 (안 유일한 방법)

case ADD_TODO: 
return [...state, action.payload]; 
case UPDATE_TODO: 
return state.map(todo => todo.id === action.payload.id ? action.payload : todo);

등을 만들 수 있습니다 그럼 당신은 구성 요소, 수행 할 작업 및 할 일을 만듭니다이 구성 요소

<todos [todos]="todosNgRx$ | async"></todos>

것 todos 목록을 가져 와서 두 번째 구성 요소 인 Todo를 다시 렌더링하십시오.

<todo *ngFor="let todo of todos" [todo] = "todo"></todo>

이 구성 요소는 벙어리이며 데이터 만 표시합니다.
ChangeDetectionStrategy.OnPush를 제공하여 할 일이 업데이트 될 때 업데이트 만 허용해야합니다. 그리고 새로운 todo를 추가하면 ngFor는 새로운 구성 요소 Todo를 표시하고 목록의 나머지 부분은 업데이트되지 않습니다.

는 코드없이

출처

2017-01-20 22:33:42

ngrx/store에서 항목을 변경할 때 항목이 다시 렌더링됩니까

답변

관련 문제