Angular ngrx/存储组织，用于对对象阵列进行多个并行更新

我在UI上有一个折叠视图中的图书卡列表，当点击图书卡（即展开）时，我们会向后端发送另外两个调用，以使用图书Id获取图书上的更多数据-比如GET/bookSummary和GET/bookTranslations。要管理图书列表的状态，我有：

interface bookState {
  books: IBook[];
  isRequesting: boolean;
  error: IError
}

我正在努力找到一个商店组织来容纳额外2个电话的状态。最大的问题是，用户可以单击以同时扩展多个图书卡，因此每个扩展都需要独立跟踪。基本上为2个调用中的每个调用创建动态状态列表：

interface bookSummaryState {
  bookId: string;
  summary: ISummary;
  isRequesting: boolean;
  error: IError
}

interface bookTranslationsState {
  bookId: string;
  translations: Translations[];
  isRequesting: boolean;
  error: IError
}

我不确定在何处以及如何容纳这样一个事实：我同时需要BookTranslationState和bookSummaryState的多个实例

非常感谢您的帮助

您可以尝试执行以下操作：

interface overallBookState {
  booksSummaryState: {
    [key: string]: bookSummaryState; 
  },
  booksTranslationState: {
    [key: string]: bookTranslationsState;
  }
}

这将使对象看起来像这样：

{
  booksSummaryState: {
    '1': {
        bookId: '1',
        summary: ...
        isRequesting: false,
        error: ....
     },
    '2': {
        bookId: '2',
        summary: ....
        isRequesting: false,
        error: ....
     }
  },
  booksTranslationState: {
    '1': {
      bookId: '1',
      translations: ....
      isRequesting: false,
      error: ...
    }, 
    '2': {
       bookId: '2',
       translations: ....
       isRequesting: fasle,
       error: ....
    }
  }
}

然后，您可以从单击的状态中读取，并从图书id中读取值