javascript - 设计一个规模化的 ngrx 商店

Question

这个问题是关于设计 ngrx 商店的。

我有一个类型的站和变电站。当在主屏幕中展开变电站时，我会显示其变电站，并且一次只能展开一个变电站。

所以考虑到我让我的应用程序状态如下

export interface AppState {
  public stations: { [id: string] : Station };
  public selectedStation: string;
  public substations: { [id: string] : SubStation };
}

所以基本上每次 selectedStation 发生变化时，变电站都会通过加载操作更改 indexeddb 中的数据。但是然后我得到一个要求，将一个变电站移动到另一个需要加载目标站的变电站的站；现在更容易做的是添加

public targetSubstations: { [id: string] : SubStation };

但这似乎不正确，而且似乎不能很好地扩展，如果我需要加载 4 组变电站怎么办？然后我是否继续添加 targetSubstations1...4？

所以我想到的另一种选择是

type SubstationHierarchy = {
  [stationId: string]: {
    [substationId: string]: Substation
  }
}
public substations: SubstationHierarchy;

这似乎可以很好地扩展，但我担心的是，虽然我们不需要一次加载每个站点的所有变电站，但这将在用户每次扩展一个新站点时完成。因此层次结构只会增长而不会缩小。

请记住，我还没有对 ngrx 商店可以使用多少内存进行任何适当的压力测试，并且正在为移动设备开发什么是设计商店时最推荐的方法。

编辑

所以我们使用 pouchdb 将数据异步同步到 indexeddb，你可以把它想象成一个 websocket 到 indexeddb 的连接。

对于初始要求一个站有多个变电站。用户一次只能在主屏幕中查看一个站(及其子站)

基于此，我像这样构造我的 AppState

export interface AppState {
  public stations: { [id: string] : Station };
  public selectedStation: string;
  public substations: { [id: string] : SubStation };
}

每次更改 selectedStation 时，我也会更改该站的变电站。这适用于大多数情况。

当用户加载一个单独的屏幕(不是主屏幕，比方说模态)时，问题就出现了，他可以在其中将变电站从 selectedStation 移动到目标站。

所以我可以将我的 appstate 更改为

export interface AppState {
  public stations: { [id: string] : Station };
  public selectedStation: string;
  public substations: { [id: string] : SubStation };
  public targetStation: string;
  public targetSubstations: { [id: string] : SubStation };
}

现在如果我需要允许将变电站复制到两个单独的目标，这将需要我按照以下方式做一些事情

export interface AppState {
  public stations: { [id: string] : Station };
  public selectedStation: string;
  public substations: { [id: string] : SubStation };
  public target1Station: string;
  public target1Substations: { [id: string] : SubStation };
  public target2Station: string;
  public target2Substations: { [id: string] : SubStation };
}

我想到的一个选择是像这样构造变电站

type SubstationHierarchy = {
  [stationId: string]: {
    [substationId: string]: Substation
  }
}

export interface AppState {
  public stations: { [id: string] : Station };
  public selectedStation: string;
  public substations: SubstationHierarchy;
}

我现在可以在哪里存储多个站点的多个变电站。唯一的问题是我正在为移动设备开发，而使用 target1、target2 的先前方法会减少内存占用，因为我替换了变电站、target1Substations ……每次单击不同的站等。但是在新结构我不删除变电站层次结构中的任何数据。

Answer 1

我对有依赖数据的场景所做的是对其进行规范化。如果有帮助，您可以使用像 normalizr 这样的库，但基本上您是在尝试展平数据，然后在需要时将其与选择器一起拉回。

我会做类似的事情:

export interface AppState {
  public stations: { [id: string] : Station }; // all stations
  public selectedStation: string;
  public substations: { [id: string] : SubStation }; // all substations
}

车站在哪里:

export class Station {
   id: string;
   ...
   subStationIds?: string[];
}

然后，当您需要加载一个 Station 时，您将使用一个选择器将 Station 与其 Substations 结合起来，此时如果 SubStations 不存在，则加载商店中的 SubStations。

当谈到 indexeddb 和性能时，我认为这将取决于您的数据集有多大、缓存有多少等。