如何使用 @ngrx/store 通过 ID 存储同一状态的多个版本？

Question

我正在 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 {
  selectedId: string;
}

然后我们可以创建将使用这两种状态的选择器：

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

export const getAccountState = createFeatureSelector<AccountState>('account');

export const getTabState = createSelector(getAccountState, (state: AccountState) => state.tab);

export const getAccountSearchState = createSelector(getAccountState, (state: AccountState) => state.search);

export const getAccounts = createSelector(getTabState, getAccountSearchState, (tab, search) => search.states[tab.selectedId].accounts);

当用户单击不同的选项卡时，我们必须发出一个会更改所选选项卡 ID 的事件，这需要通过让每个功能中的选项卡缩减器查找操作并更新功能状态来处理，以便它知道当前选项卡。这意味着对于我们所有的功能，我们都需要有这种结构——当我真的想以某种方式抽象出来的时候。我只是不知道如何才能做到这一点。我也不想将选定的选项卡 ID 存储在每个功能存储中 - 相反，它将处于根状态，但我不完全确定如何将该值传递给功能状态以返回正确的数据。

任何人都有更好的方法来解决这个问题？

谢谢，

担

Answer 1

我的想法是让选项卡组件向其后代提供自己的存储切片，以便选项卡内的组件可以注入该切片，而无需关心其他选项卡是否存在。

我习惯于使用ngrx/storevia ng-app-state（我写的），所以我的示例代码将使用它，但它只是一个包装器，ngrx/store所以你应该能够在没有它的情况下使用相同的概念。

@Injectable()
export class TabStore extends AppStore<TabState> implements OnDestroy {
  constructor(store: Store<any>) {
    super(store, uniqueId('tabState'), new TabState());
  }

  ngOnDestroy() {
    this.delete(); // when the tab is destroyed, clean up the store
  }
}

@Component({providers: [TabStore]})
export class TabComponent {
  constructor(tabStore: TabStore) {
    // tabStore holds state that is unique to me
  }
}

@Component()
export class ChildOfTabComponent {
  constructor(tabStore: TabStore) {
    // I can also access the same store from descendants
  }
}

uniqueId只有一种方法可以为每个选项卡的状态生成唯一的根级密钥。它位于underscore、lodash、 和 在我的例子中micro-dash- 但任何为每个选项卡生成唯一密钥的方法都可以。