使用 createReducer 函数时为生产构建 angular+ngrx 8 时出错

Posted 2023-02-23

【中文标题】使用 createReducer 函数时为生产构建 angular+ngrx 8 时出错

【英文标题】：Error building angular+ngrx 8 for production when using createReducer function

【发布时间】：2019-11-21 09:40:23

【问题描述】：

目前我正在尝试使用新的 NgRX creator 函数构建一个 Angular + NgRX 8 应用程序。但是当我为生产构建它时，会出现以下错误：

装饰器不支持函数调用，但在“reducers”中调用了“createReducer”。

在开发模式下完全没有问题。

请求reducer看起来像

export interface State extends EntityState<Request> 
  loading: boolean;
  error: any;

export const initialState = adapter.getInitialState(
  loading: false,
  error: null
);

export const reducer = createReducer(
  initialState,
  on(RequestsActions.loadRequestsSuccess, (state,  requests ) => adapter.addAll(requests, ...state, loading: false)),
  on(RequestsActions.loadRequestsFailed, (state,  error ) => (...state, error, loading: false)),
  on(RequestsActions.deleteRequestSuccess, (state,  id ) => adapter.removeOne(id, state))
);

并与其他 reducer 组成一个 index.ts 文件

export const reducers = 
  requests: reducer
  // [...]

StoreModule 像这样使用 reducers 映射导入

@NgModule(
  imports: [
    CommonModule,
    StoreModule.forFeature('requests', reducers),
    EffectsModule.forFeature(effects),
    // [...]
  ]
)
export class RequestsModule 

你知道发生了什么吗？谢谢和欢呼！

【参考方案1】：

你需要将你的 reducer 包装成这样的函数调用：

const yourReducer = createReducer(
  initialState,
  on(RequestsActions.loadRequestsSuccess, (state,  requests ) => adapter.addAll(requests, ...state, loading: false)),
  on(RequestsActions.loadRequestsFailed, (state,  error ) => (...state, error, loading: false)),
  on(RequestsActions.deleteRequestSuccess, (state,  id ) => adapter.removeOne(id, state))
);

export function reducer(state: State | undefined, action: Action) 
  return yourReducer(state, action);

查看官方文档 -

https://ngrx.io/guide/store/reducers#creating-the-reducer-function

【讨论】：

这也适用于许多其他问题。本质上，如果您的函数上没有“导出函数”，AOT 编译器将无法运行它。