时间戳

首页 > 解决方案 > Ngrx Store：执行某些操作后，有什么方法可以获取状态差异

angular - Ngrx Store：执行某些操作后，有什么方法可以获取状态差异

问题描述

我正在使用 ngrx store 来构建复杂的存储结构，如代码所示：

模型.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
}

减速器.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 操作时，我得到了商店中的所有菜单。 但我的问题是

如果假设我添加了两个菜单，然后我又添加了第三个菜单，有什么方法可以让我知道最后添加的菜单是哪个。或者简单地说，状态发生了什么变化。

我已经搜索了很多，但没有得到任何解决方案。请让我知道它是否可能。提前感谢您的帮助。

标签： angularngrx-store

解决方案

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
  }
}

希望这会帮助你。

推荐阅读