我创建了一个函数,该函数生成动态的切换用例函数语句。
export function generateReducer(initialState, reducerName: ReducerName, adapter: EntityAdapter<any>): (state, initialState) => IState {
reducerName.plural = reducerName.plural ? reducerName.plural : reducerName.singular + 's';
return function (state = initialState, action: any): IState {
switch (action.type) {
case `[${reducerName.plural} Section] Load Statistics ${reducerName.singular}`:
case `[${reducerName.plural} Section] Load Details ${reducerName.singular}`:
case `[${reducerName.plural} Section] Load ${reducerName.plural}`:
{
return { ...state, loading: true, loaded: false };
}
...
}
并像这样使用
导出常量适配器:EntityAdapter = createEntityAdapter();
export const initialState: State = adapter.getInitialState({
loaded: false,
loading: false,
selectedId: null
});
export const reducer = generateReducer(initialState, { singular: 'Skill' }, adapter);
当使用
ng-serve
(不是AOT)运行项目时,一切正常,当尝试使用ng build --prod
进行生产生产时,出现以下错误src \ app \ skills \ skills.module.ts(46,45)中的错误:模板期间出错
不支持编译“ SkillsModule”功能调用
装饰器,但在'reducers'中调用了'generateReducer'
“减速器”参考“减速器”
'reducers'引用src \ app \ skills \ store \ reducers \ index.ts(18,13)上的'reducer'
'reducer'在src \ app \ skills \ store \ reducers \ skills.reducer.ts(26,24)处调用'generateReducer'。
试图找到解决此问题的任何方法,但似乎我需要以某种方式将其提供给编译器,以便他可以告诉其编译时函数以生成代码。关于如何处理此类问题的任何想法?
编辑:
添加了一个stackblitz存储库以显示错误,
https://stackblitz.com/edit/reducer-factory-ngrx
下载应用程序,更新package.json devDependencies“ @ angular / cli”:“ ^ 1.6.0”,
并尝试运行'ng build --prod'
最佳答案
尝试添加“ reducer.ts”:
export const reducer = generateReducer(initialState, { singular: 'Skill' }, adapter);
import { ActionReducerMap } from '@ngrx/store';
import { InjectionToken } from '@angular/core';
// register reducer token
export const reducerToken = new InjectionToken<ActionReducerMap<State>>(
'Registered Reducers'
);
Object.assign(reducerToken, reducer);
export function getReducers() {
return reducer;
}
并在app.module.ts上:
import { reducerToken, getReducers } from './reducer';
@NgModule({
imports: [
BrowserModule,
FormsModule,
StoreModule.forRoot(reducerToken)
],
declarations: [AppComponent, HelloComponent],
providers: [
{
provide: reducerToken,
useFactory: getReducers
}
],
bootstrap: [AppComponent]
})
这样对我有用...
希望能帮助到你