可观察的流-一对多与多对一

Question

当项目可以存在于不同模块中时，如何存储项目的列表？

对项目

一个状态或对项目多个状态？ 我假设会有很多不同的模块来存储项目，并且这些模块越多，我越想离开一种状态

一种状态

class Item {
  id: number;
  name: string;
  location: "equipment" | "magazine" | "shop"  // | and other in future...
}

class AppState {
  items: Item[];
}

const getItems = (store: Store): Observable<Item[]> => {
  return store.select((appStore: AppStore) => appStore.items);
}

const getItemsInEquipment = (store: Store): Observable<Item[]> => {
  const items$: Observable<Item[]> = getItems(store);
  return items$.pipe(
    map(items => items.filter(item => item.location === "equipment"))
  );
}

const getItemsInMagazine = (store: Store): Observable<Item[]> => {
  const items$: Observable<Item[]> = getItems(store);
  return items$.pipe(
    map(items => items.filter(item => item.location === "magazine"))
  );
}

const getItemsInShop = (store: Store): Observable<Item[]> => {
  const items$: Observable<Item[]> = getItems(store);
  return items$.pipe(
    map(items => items.filter(item => item.location === "shop"))
  );
}

或...

多种状态

class Item {
  id: number;
  name: string;
}

class AppState {
  itemsInEquipment: Item[];
  itemsInMagazine: Item[];
  itemsInShop: Item[];
  // | and other in future...
}

const getItemsInEquipment = (store: Store): Observable<Item[]> => {
  return store.select((appStore: AppStore) => appStore.itemsInEquipment);
}

const getItemsInMagazine = (store: Store): Observable<Item[]> => {
  return store.select((appStore: AppStore) => appStore.itemsInMagazine);
}

const getItemsInShop = (store: Store): Observable<Item[]> => {
  return store.select((appStore: AppStore) => appStore.itemsInShop);
}

const getItems = (store: Store): Observable<Item[]> => {
  const itemsInEquipment$: Observable<Item[]> = getItemsInEquipment(store);
  const itemsInMagazine$:  Observable<Item[]> = getItemsInMagazine(store);
  const itemsInShop$:      Observable<Item[]> = getItemsInShop(store);
  return combineLatest([itemsInEquipment$, itemsInMagazine$, itemsInShop$]);
}

两种方法的优缺点是什么？

Answer 1

我建议采用另一种方法。例如，在NgRx中，我们将为所有std::map设置一个Entity状态，然后在每个列表中简单地存储Items的ID数组。 NGXS实验室有一个实体状态适配器，可能值得尝试。

基本上，您将所有Items存储在一个对象中，其中的键是每个Items的{​​{1}}字段：

id

这允许直接查找，并防止由于Array操作导致的性能损失。

然后，每个Item，itemEntities: { itemId1: Item, itemId2: Item, itemId3: Item } 等都是itemsInEquipment的简单数组，允许您从Entity状态中获取它们。