Angular2 与 Redux - DOM 协调

Question

我正在 Angular2 and Redux 开始一个新项目。

作为不可变对象，当状态改变时，我们创建一个新对象，Angular重新绘制所有DOM。如果操作是由输入元素调度的，焦点将丢失。
我已经分叉了一个示例 plunk 来重现该行为：http://plnkr.co/yb53ij

在实际应用中，我使用了表单API中的“.debounceTime()”，但这对用户体验来说似乎不太好。有办法避免这种情况，或者我遗漏了什么？

reducer代码：

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

为了解决这个问题，我们需要使用*ngFor指令的trackBy功能。所以我们可以告诉 Angular 不再渲染 DOM。对于像我这样不知情的开发人员来说，这可能是一个性能陷阱！ =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 演示：http://plnkr.co/1ffRPD6F1vHw0EmHh5er

Angular2 与 Redux - DOM 协调

Angular2 with Redux - DOM reconciling

immutability

redux

ngrx

angular