我正在将ngrx store用于复杂的商店结构,如代码所示:
model.ts
export interface ITableState {
tables: ITables,
selectedTableId: number
}
export interface ITables {
[id: number]: ITable
}
export interface ITable {
menus: IMenus,
selectedMenuId: string
}
export interface IMenus {
dishId: number,
dishName: string
}
reducer.ts
case tables.ActionTypes.ADD_MENU: {
var menuToAdd = <IAddMenu>action.payload;
return {
...state,
tables: {
...state.tables,
[menuToAdd.tableId]: {
...state.tables[menuToAdd.tableId],
menus: {
...state.tables[menuToAdd.tableId].menus,
[menuToAdd.menuId]: menuToAdd.menu
}
}
}
}
}
我正在按以下方式订阅这家商店:
export const getTableStructureState = (state: State) => state.table;
public tableStructureState$ = this.appState$.select(store.getTableStructureState);
this.tableSandbox.tableStructureState$.subscribe(tableDataState => {
console.log(tableDataState.tables[tableDataState.selectedTableId].menus)
});
因此,在执行动作ADD_MENU时,我将获得商店中的所有菜单。 但是我的问题是
如果假设我添加了两个菜单,然后又添加了第三个菜单, 有什么方法可以让我知道最后一个菜单 添加。或简单来说就是状态发生了什么变化。
我已经搜索了很多,但是没有任何解决方案。 请让我知道是否可能。 谢谢您的帮助。
答案 0 :(得分:0)
例如,您可以将lastChange
属性或更改历史记录保存在商店中。
然后创建一个选择器,返回最后的更改。
这样,您将使用功能强大的NgRx。
export interface ITableState {
tables: ITables,
selectedTableId: number,
lastChange: IAddMenu
}
case tables.ActionTypes.ADD_MENU: {
var menuToAdd = <IAddMenu>action.payload;
// what was the previous change ?
const previousChange = state.lastChange;
if (previousChange.xxxxx) {
// do something depending on last change...
...
}
return {
...state,
tables: {
...
},
lastChange: action.payload // store new last change
}
}
希望这会对您有所帮助。