小编Dan*_*nuk的帖子

我正在 Nx 工作区中使用 Angular 5 和 @ngrx/store 开发企业应用程序。

我们的应用程序的要求之一是支持打开多个选项卡——这意味着从我们的侧边菜单中，用户可以选择多个功能或相同的功能，并在我们的应用程序中的单独选项卡中打开它们。我们需要能够分离这些选项卡的状态，因为用户可以在应该完全独立的多个选项卡中打开相同类型的搜索。例如，他们可以打开“帐户搜索”选项卡并按帐户 ID 123456 进行搜索，然后在另一个“帐户搜索”选项卡中搜索 234567。显然我们不希望一个选项卡中的状态与另一个选项卡冲突。

我不确定最好的方法是什么。我们的帐户搜索子功能的示例状态类似于

libs/accounts/src/search/+state/search.reducer.ts

export interface AccountSearchState {
  accounts: { [id: string]: Account };
  metadata: Metadata;
  ids: string[];
  loading: boolean;
  query: AccountQuery;
  ...
}

它上面有一个顶级功能状态，例如：

libs/accounts/src/+state/index.ts

export interface AccountState {
  search: fromSearch.AccountSearchState
  ...
}

我能想到的一种解决方案是将上述子功能状态存储在选项卡 ID 下。

libs/accounts/src/search/+state/search.reducer.ts

export interface AccountSearchState {
  states: { [id: string]: SubState }
}

libs/accounts/src/+state/index.ts

export interface AccountState {
  search: fromSearch.AccountSearchState
  tab: fromTabs.TabState
  ...
}

.. 这将需要一个单独的 TabState 可以在我们所有的功能模块中使用，并且至少包含以下内容：

libs/tabs/src/+state/index.ts

export interface TabState { …