Question

我的应用程序基于最新版本的Angular，Immutable.js，NgRx; 我想利用NGRX的createFeatureSelector和createSelector。但是，我似乎只能按字符串选择商店的各个部分。我已经删除了相关的代码（我认为）。我还在下面添加了一个说明问题的plunker链接。

当应用程序引导时，它会抛出Uncaught TypeError: <CLASS> is not a constructor的错误。

我尝试过的事情以及由此产生的症状：

如果我将违规行为移动到initialState文件中，其中reducer将获得默认状态，则错误将移至构造链中的下一个类。在下面的示例中，CopyRollbackState（下面的代码）是一个包含两个子类CopyRollbackRemovables$和CopyRollbackConfirm$的类;如果我将第一个复制到initialState文件中，则错误将移至第二个。
如果我用不可变映射替换顶级类CopyRollbackState，则应用程序无法以相同的错误运行。
如果我从状态init中删除所有硬类，例如使用immutable.fromJS()方法，错误消失了。但是，我想在商店中使用实际的类。

感谢您的帮助。

e.g。

/** provider.ts */

// this works 
this.copyRollbackRemovables$ = this._store.select('copyRollbackRemovables');

// this fails with the below error
// this is one of the methods of ngrx i want to use !!
this.copyRollbackRemovables$ = this._store.pipe(select(_RootReducer.getRollbackRemovables));

_

/** _RootReducer.ts */

export const appState: ActionReducerMap<AppState> = {
    ...
    copyRollbackRemovables: fromCopyRollback.copyRollbackEntitiesReducer,
    ...
}

export const getRollbackRemovables = 
    createFeatureSelector<CopyRollbackRemovables$>('copyRollbackRemovables');

_

/** fromCopyRollback.ts reducer */

export function copyRollbackEntitiesReducer(
  state: any = initialState.get('copyRollbackEntities'),
  action: Action
): CopyRollbackRemovables$ {
  switch (action.type) {

    default:
      break;
  }
  return state;
}

_

/** model.ts */

const copyRollbackStateRecord = Record({
  copyRollbackEntities: null,
  copyRollBackConfirm: null,
});

interface ICopyRollbackState {
  copyRollbackEntities: CRM.ICopyRollbackRemovables$,
  copyRollBackConfirm: CRM.ICopyRollbackConfirm$
}

export class CopyRollbackState extends copyRollbackStateRecord implements ICopyRollbackState {
  copyRollbackEntities: CRM.CopyRollbackRemovables$;
  copyRollBackConfirm: CRM.CopyRollbackConfirm$;
  constructor(config: ICopyRollbackState) {
    super(Object.assign({}, config, {
      copyRollbackEntities: config.copyRollbackEntities && new CRM.CopyRollbackRemovables$(config.copyRollbackEntities),
      copyRollBackConfirm: config.copyRollBackConfirm && new CRM.CopyRollbackConfirm$(config.copyRollBackConfirm)
    }));
  };
}

export const initialState: CopyRollbackState = new CopyRollbackState({
  copyRollbackEntities: {
    meta: {
      loading: false
    },
    byBatchId: Map({})
  },
  copyRollBackConfirm: {
    meta: {
      loading: false
    },
    data: {
      templateItemIds: [],
      rollBackConfirmer: false,
      rollBackReason: ''
    }
  }
});

// CRM.ts, similar extend and interface as above class
export class CopyRollbackRemovables$ extends copyRollbackRemovablesRecord$ implements ICopyRollbackRemovables$ {
  meta: IPagedMeta;
  byBatchId: Map<string, List<CopyRollback>>;
  constructor(config: ICopyRollbackRemovables$) {
    super(Object.assign({}, config, {
      meta: config.meta && new PagedMeta(config.meta),
      byBatchId: config.byBatchId && Map(config.byBatchId)
    }));
  }
}

以下是错误中引用的已转换代码。

var CopyRollbackState = (function (_super) {
    __extends(CopyRollbackState, _super);
    function CopyRollbackState(config) {
        return _super.call(this, Object.assign({}, config, {
            copyRollbackEntities: config.copyRollbackEntities && new CRM.CopyRollbackRemovables$(config.copyRollbackEntities),
            copyRollBackConfirm: config.copyRollBackConfirm && new CRM.CopyRollbackConfirm$(config.copyRollBackConfirm)
        })) || this;
    }
    ;
    return CopyRollbackState;
}(copyRollbackStateRecord));

我已经构建了一个bare minimum Plunker来显示错误。当插头加载时，您可以在控制台中看到错误。对于我的应用程序，该错误会阻止应用程序加载。

Answer 1

我解决此问题的方法是将所有Class定义移动到单个文件中。在我的例子中，我在* .store.ts文件中有类定义，它依赖于* .model.ts文件中的类定义。将所有定义移动到两者之一解决了问题。

仍然不确定实际问题在哪里。也许DI很难找到正确的课程。

将createFeatureSelector与类一起使用时，ngrx / store会引发运行时错误

1 个答案: