Redux-Angle2 with DOM reconcililing

Question

Angular2 및 Redux으로 새 프로젝트를 시작합니다.

상태가으로 변경되면 새 개체가 만들어지고 Angular는 모든 DOM을 다시 그립니다. 작업이 입력 요소에 의해 전달 된 경우 포커스가으로 손실됩니다.
동작을 재현하기 위해 샘플 코드를 포크했습니다. http://plnkr.co/yb53ij

실제 앱에서는 양식 API에서 ".debounceTime()"을 사용했지만 사용자 환경에는 좋지 않습니다. 이 문제를 피할 수있는 방법이 있습니까?

감속기 코드 :

export const todos = (state = [{text: 'Edit my input...'}], {type, payload}) => { 
    switch(type){ 
    case ADD_TODO: ... 
    case UPDATE_TODO: ... 
    case COMPLETE_TODO: ... 
    case DELETE_TODO: ... 
    case 'REPEAT_TODO': 
     // Creates new state: 
     return state.map(todo => { 
     return todo.id !== payload.todo.id ? 
      todo : 
      Object.assign({}, todo, {times: payload.times}) 
     }); 
    default: 
     return state; 
    } 

감사합니다!

Answer 1

이 문제를 해결하려면 trackBy*ngFor 지시어 기능을 사용해야합니다. 그래서 Angular에 DOM을 다시 렌더링하지 말라고 말할 수 있습니다. 저와 같은 정보가없는 개발자를위한 성능 트랩이 될 수 있습니다! http://plnkr.co/1ffRPD6F1vHw0EmHh5er

= P 여기

@Component({ 
    selector: 'todo-list', 
    template: ` 
    <div> 
     <todo-list-item 
     *ngFor="#todo of todos; trackBy:custom" 
     ... 
     ></todo-list-item> 
    </div> 
    `, 
    directives: [TodoListItem] 
}) 
export class TodoList { 
    ... 

    custom(index,item){ 
    return index; 
    } 
} 

는 작업 plunker 데모 인