[英]How to make a “reducer enhancer” for Angular ngrx store for undo / redo
我想為特定的商店切片添加reducer Enhancer或meta reducer。 我已經實現了一個接收reducer並啟用撤消/重做功能的函數。 它目前看起來像這樣:
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) {
...
};
}
一切都很好,除非我為生產而構建時出現以下錯誤:
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).
我看到你可以增強現有reducer的唯一另一種方法是使用meta-reducers,但是每個reducer函數調用它們,而不僅僅是特定的一個,例如本例中的'dynamicForm'。
在對文檔進行了一些挖掘之后,我在這里找到了解決方案:
https://github.com/ngrx/platform/blob/master/docs/store/api.md#feature-module-reducers-and-aot
你可以簡單地在combineReducers中包裝'adminReducers',如下所示:
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);
}
然后將其導入您的模塊
StoreModule.forFeature(ADMIN_FEATURE, enhancedAdminReducers),
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.