angular - 如何使用@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

我的想法是让选项卡组件向其后代提供自己的商店切片，以便选项卡内的组件可以注入(inject)该切片而不用关心其他选项卡是否存在。

我习惯于通过 ng-app-state 使用 ngrx/store (我写的)，所以我的示例代码将使用它，但它只是 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 只有一种方法可以为每个选项卡的状态生成唯一的根级 key 。它在 underscore , lodash ，就我而言 micro-dash - 但任何为每个选项卡生成唯一 key 的方法都可以。