Question

基本上我正在试图找出使用Angular + Redux (ng-redux)来处理复选框的最佳方法。

我有一个TODO列表，并希望能够选中/取消选中一个复选框（将TODO标记为已完成/撤消）。

该应用程序运行正常，但每当我想使用Chrome Redux DevTools跳过/跳过changeTodoDone action我无法跳过/跳过后跳转到(states are equal)

这是我的模板：

<div>
  <input [(ngModel)]="msg" type="text">
  <button (click)="addTodo()">add</button>
</div>
<div *ngFor="let iTodo of iTodos$ | async; let idx = index;">
  <span class="msg">{{iTodo.msg}}</span>
  <input type="checkbox" [ngModel]="iTodo.done" (ngModelChange)="changeTodoDone($event, idx)">
  <button (click)="removeTodo(idx)">remove</button>
</div>

在我的component.ts文件中我有：

@select() readonly iTodos$: Observable<ITodo[]>;

...

changeTodoDone($event, idx: number) {
  this.ngRedux.dispatch(this.actions.changeTodoDone($event, idx));
}

在我的store.ts文件中我有：

function changeTodoDone(ilastState: IAppState, done: boolean, idxTodo: number): IAppState {
  const iTodos = ilastState.iTodos.map((todo, idx) => {
    if (idxTodo === idx) {
      todo.done = done;
    }
    return todo;
  });
  return { iTodos: iTodos };
}

export function rootReducer(lastState: IAppState, action: ITodoAction): IAppState {
  switch (action.type) {
    case CounterActions.CHANGE_TODO_DONE: return changeTodoDone(lastState, action.done, action.idx);
    case CounterActions.ADD_TODO: return addTodo(lastState, action.text);
    case CounterActions.REMOVE_TODO: return removeTodo(lastState, action.idx);
  }

  // We don't care about any other actions right now.
  return lastState;
}

感谢。

使用Angular和Redux处理复选框的正确方法（ng-redux TODO app）

0 个答案: