I would like to add a reducer enhancer or meta reducer for a specific store slice. I've implemented a function that takes in a reducer and enables undo / redo functionality. It currently looks like this:
export const adminReducers: ActionReducerMap<AdminFeatureState> = {
admin: admin.reducer,
dynamicForm: undoable(dynamicForm.reducer, DynamicFormActionTypes.UNDO, DynamicFormActionTypes.REDO, [
DynamicFormActionTypes.SELECTED_DYNAMIC_CONTROLS_CHANGED,
DynamicFormActionTypes.CHANGE_GROUP,
DynamicFormActionTypes.RESET,
DynamicFormActionTypes.ADD_PAGE,
DynamicFormActionTypes.REMOVE_PAGE,
DynamicFormActionTypes.REORDER_GROUPS,
DynamicFormActionTypes.SAVE_EDIT_CONTROL
])
};
export function undoable<T>(reducer: ActionReducer<any>, undoActionType: string, redoActionType: string, recordedActions: string[]): ActionReducer<any> {
// Call the reducer with empty action to populate the initial state
const initialState: UndoableState<T> = {
past: [],
present: reducer(undefined, { type: 'INIT' }),
future: []
};
// Return a reducer that handles undo and redo
return function (state = initialState, action) {
...
};
}
Everything works great except when I build for production I get the following error:
Error during template compile of 'AdminModule'
Function calls are not supported in decorators but 'undoable' was called in 'adminReducers'
'adminReducers' calls 'undoable' at src\app\core\containers\admin\admin-feature.reducers.ts(11,29).
The only other way I have seen you can enhance an existing reducer is using meta-reducers but those get called for every reducer function, not just a specific one such as the 'dynamicForm' in this case.
After some digging in the docs I found the solution here:
https://github.com/ngrx/platform/blob/master/docs/store/api.md#feature-module-reducers-and-aot
You can simply wrap 'adminReducers' in combineReducers like so:
const adminReducers: ActionReducerMap<AdminFeatureState> = {
admin: admin.reducer,
dynamicForm: undoable(dynamicForm.reducer, DynamicFormActionTypes.UNDO, DynamicFormActionTypes.REDO, [
DynamicFormActionTypes.SELECTED_DYNAMIC_CONTROLS_CHANGED,
DynamicFormActionTypes.CHANGE_GROUP,
DynamicFormActionTypes.RESET,
DynamicFormActionTypes.ADD_PAGE,
DynamicFormActionTypes.REMOVE_PAGE,
DynamicFormActionTypes.REORDER_GROUPS,
DynamicFormActionTypes.SAVE_EDIT_CONTROL
])
};
const adminMetaReducer = combineReducers(adminReducers);
export function enhancedAdminReducers(state, action) {
return adminMetaReducer(state, action);
}
Then import that into your module
StoreModule.forFeature(ADMIN_FEATURE, enhancedAdminReducers),
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.