用ngrx reducer方法删除树形列表中的元素会导致错误

Question

我有一个树形列表，我想在其中查找并删除该列表中的一个元素，但收到一条错误消息，几乎没有帮助。

specTreeList.actions.ts

import { Action } from "@ngrx/store";

import { SpecTreeListState } from "./specTreeList.reducer";

// user actions
export const SPEC_TREE_LIST_UPDATE = "[SPEC TREE LIST] update tree list";
export const SPEC_TREE_LIST_RESET = "[SPEC TREE LIST] reset tree list";
export const SPEC_TREE_LIST_DELETE_ITEM = "[SPEC TREE LIST] delete tree list item";

export class Update implements Action {
  readonly type = SPEC_TREE_LIST_UPDATE;

  constructor(public payload: SpecTreeListState) {}
}

export class DeleteItem implements Action {
  readonly type = SPEC_TREE_LIST_DELETE_ITEM;

  constructor(public payload: string) {}
}

export class Reset implements Action {
  readonly type = SPEC_TREE_LIST_RESET;
}

export type All = Update | DeleteItem | Reset;

specTreeList.reducer.ts

import * as SpecTreeListActions from "./specTreeList.actions";

// models
import {
  FolderAndItems,
  Folder
} from "../_models/bspec/reader/folder-and-items";

export interface State {
  folderAndItems: FolderAndItems;
}

export class SpecTreeListState implements State {
  public folderAndItems: FolderAndItems;

  public constructor(data: any = {}) {
    this.folderAndItems = data.folderAndItems
      ? new FolderAndItems(data.folderAndItems)
      : new FolderAndItems();
  }
}

const initialState: SpecTreeListState = {
  folderAndItems: null
};

export type Action = SpecTreeListActions.All;

// recursive method to delete item in tree list
const deleteFolderItem = (folders: Folder[], id) => {

  console.log("delete item", folders, id);

  folders.map(f => {
    const index = f.items.findIndex(i => i.id === id);
    if (index !== -1) {
      f.items.splice(index, 1);
    }
  });
};

// reducer
export function reducer(
  state = initialState,
  action: Action
): SpecTreeListState {
  switch (action.type) {
    case SpecTreeListActions.SPEC_TREE_LIST_UPDATE:
      return new SpecTreeListState(action.payload);

    case SpecTreeListActions.SPEC_TREE_LIST_DELETE_ITEM:
      const id = action.payload;

      const folderAndItems = new FolderAndItems(state.folderAndItems);

      deleteFolderItem(folderAndItems.folders, id);

      return new SpecTreeListState({
        folderAndItems: folderAndItems
      });

    case SpecTreeListActions.SPEC_TREE_LIST_RESET:
      return initialState;

    default:
      return state;
  }
}

当我打电话时：

this._store.dispatch({
  type: SPEC_TREE_LIST_DELETE_ITEM,
  payload: 123
});

错误：

ERROR deleteFolderItem/<@http://localhost:4200/main.js:287:13
deleteFolderItem@http://localhost:4200/main.js:286:5
reducer@http://localhost:4200/main.js:303:13
combination@http://localhost:4200/vendor.js:64215:35
computeNextEntry@http://localhost:4200/vendor.js:63551:21
recomputeStates@http://localhost:4200/vendor.js:63582:15
liftReducerWith/</<@http://localhost:4200/vendor.js:63809:30
StoreDevtools/liftedStateSubscription<@http://localhost:4200/vendor.js:63874:38
./node_modules/rxjs/_esm5/internal/operators/scan.js/ScanSubscriber.prototype._tryNext@http://localhost:4200/vendor.js:74334:22
./node_modules/rxjs/_esm5/internal/operators/scan.js/ScanSubscriber.prototype._next@http://localhost:4200/vendor.js:74327:20
./node_modules/rxjs/_esm5/internal/Subscriber.js/Subscriber.prototype.next@http://localhost:4200/vendor.js:67506:13
./node_modules/rxjs/_esm5/internal/operators/withLatestFrom.js/WithLatestFromSubscriber.prototype._next@http://localhost:4200/vendor.js:76611:17
./node_modules/rxjs/_esm5/internal/Subscriber.js/Subscriber.prototype.next@http://localhost:4200/vendor.js:67506:13
./node_modules/rxjs/_esm5/internal/Notification.js/Notification.prototype.observe@http://localhost:4200/vendor.js:66778:41
./node_modules/rxjs/_esm5/internal/operators/observeOn.js/ObserveOnSubscriber.dispatch@http://localhost:4200/vendor.js:73329:9
./node_modules/rxjs/_esm5/internal/scheduler/AsyncAction.js/AsyncAction.prototype._execute@http://localhost:4200/vendor.js:76997:13
./node_modules/rxjs/_esm5/internal/scheduler/QueueAction.js/QueueAction.prototype.execute@http://localhost:4200/vendor.js:77145:13
./node_modules/rxjs/_esm5/internal/scheduler/AsyncScheduler.js/AsyncScheduler.prototype.flush@http://localhost:4200/vendor.js:77087:25
./node_modules/rxjs/_esm5/internal/scheduler/QueueAction.js/QueueAction.prototype.schedule@http://localhost:4200/vendor.js:77139:9
./node_modules/rxjs/_esm5/internal/Scheduler.js/Scheduler.prototype.schedule@http://localhost:4200/vendor.js:67196:16
./node_modules/rxjs/_esm5/internal/scheduler/AsyncScheduler.js/AsyncScheduler.prototype.schedule@http://localhost:4200/vendor.js:77075:20
./node_modules/rxjs/_esm5/internal/operators/observeOn.js/ObserveOnSubscriber.prototype.scheduleMessage@http://localhost:4200/vendor.js:73333:18
./node_modules/rxjs/_esm5/internal/operators/observeOn.js/ObserveOnSubscriber.prototype._next@http://localhost:4200/vendor.js:73336:9
./node_modules/rxjs/_esm5/internal/Subscriber.js/Subscriber.prototype.next@http://localhost:4200/vendor.js:67506:13
./node_modules/rxjs/_esm5/internal/operators/mergeMap.js/MergeMapSubscriber.prototype.notifyNext@http://localhost:4200/vendor.js:73033:9
./node_modules/rxjs/_esm5/internal/InnerSubscriber.js/InnerSubscriber.prototype._next@http://localhost:4200/vendor.js:66733:9
./node_modules/rxjs/_esm5/internal/Subscriber.js/Subscriber.prototype.next@http://localhost:4200/vendor.js:67506:13
./node_modules/rxjs/_esm5/internal/operators/map.js/MapSubscriber.prototype._next@http://localhost:4200/vendor.js:72755:9
./node_modules/rxjs/_esm5/internal/Subscriber.js/Subscriber.prototype.next@http://localhost:4200/vendor.js:67506:13
./node_modules/rxjs/_esm5/internal/operators/mergeMap.js/MergeMapSubscriber.prototype.notifyNext@http://localhost:4200/vendor.js:73033:9
./node_modules/rxjs/_esm5/internal/InnerSubscriber.js/InnerSubscriber.prototype._next@http://localhost:4200/vendor.js:66733:9
./node_modules/rxjs/_esm5/internal/Subscriber.js/Subscriber.prototype.next@http://localhost:4200/vendor.js:67506:13
./node_modules/rxjs/_esm5/internal/operators/skip.js/SkipSubscriber.prototype._next@http://localhost:4200/vendor.js:74677:13
./node_modules/rxjs/_esm5/internal/Subscriber.js/Subscriber.prototype.next@http://localhost:4200/vendor.js:67506:13
./node_modules/rxjs/_esm5/internal/Subject.js/Subject.prototype.next@http://localhost:4200/vendor.js:67272:17
./node_modules/rxjs/_esm5/internal/BehaviorSubject.js/BehaviorSubject.prototype.next@http://localhost:4200/vendor.js:66697:9
./node_modules/@ngrx/store/fesm5/store.js/ActionsSubject.prototype.next@http://localhost:4200/vendor.js:64146:9
./node_modules/@ngrx/store/fesm5/store.js/Store.prototype.dispatch@http://localhost:4200/vendor.js:64508:9
./src/app/tree/tree.component.ts/TreeComponent.prototype.deleteFolder@http://localhost:4200/main.js:994:9
View_TreeComponent_0/<@ng:///AppModule/TreeComponent.ngfactory.js:25:23
handleEvent@http://localhost:4200/vendor.js:41196:16
callWithDebugContext@http://localhost:4200/vendor.js:42289:22
debugHandleEvent@http://localhost:4200/vendor.js:41992:12
dispatchEvent@http://localhost:4200/vendor.js:38655:16
renderEventHandlerClosure/<@http://localhost:4200/vendor.js:39099:38
decoratePreventDefault/<@http://localhost:4200/vendor.js:56557:36
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invokeTask@http://localhost:4200/polyfills.js:2743:17
onInvokeTask@http://localhost:4200/vendor.js:34894:24
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invokeTask@http://localhost:4200/polyfills.js:2742:17
./node_modules/zone.js/dist/zone.js/</Zone.prototype.runTask@http://localhost:4200/polyfills.js:2510:28
./node_modules/zone.js/dist/zone.js/</ZoneTask.invokeTask@http://localhost:4200/polyfills.js:2818:24
invokeTask@http://localhost:4200/polyfills.js:3862:9
globalZoneAwareCallback@http://localhost:4200/polyfills.js:3888:17
core.js:1521