Currently I am trying to build an Angular + NgRX 8 application with the new NgRX creator functions. But when I am building this for production, there appears the following error:
Function calls are not supported in decorators but 'createReducer' was called in 'reducers'.
In development mode there is no problem at all.
The request reducer looks like
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))
);
and is composed in an index.ts file with other reducers
export const reducers = {
requests: reducer
// [...]
}
and the StoreModule is imported with the reducers map like this
@NgModule({
imports: [
CommonModule,
StoreModule.forFeature('requests', reducers),
EffectsModule.forFeature(effects),
// [...]
]
})
export class RequestsModule {}
Do you have any idea what's going on? Thanks and cheers!
You need to wrap your reducer as function call like this:
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);
}
See the official doc -
https://ngrx.io/guide/store/reducers#creating-the-reducer-function