Angular2 with Redux - DOM調整

Question

私はAngular2とReduxで新しいプロジェクトを開始しています。

状態が変更された場合、新しいオブジェクトが作成され、すべてのDOMが再び再描画されます。 アクションが入力要素によって送出された場合、フォーカスが失われます。私は、現象を再現するサンプルplunkをフォークしてきました
：本当のアプリで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ディレクティブの機能を使用する必要があります。したがって、DOMを再びレンダリングしないようにAngularに伝えることができます。 これは私のような無知の開発者のためのパフォーマンスのトラップすることができます！ 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のデモです