首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >为规模设计ngrx商店

为规模设计ngrx商店
EN

Stack Overflow用户
提问于 2017-02-07 12:17:21
回答 1查看 683关注 0票数 3

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

我有一种车站和变电所。当一个变电所在主屏幕上扩展时,我会显示它的变电站,每次只能扩展一个变电站。

因此,想到这一点,我让我的应用程序状态就像

代码语言:javascript
运行
复制
export interface AppState {
  public stations: { [id: string] : Station };
  public selectedStation: string;
  public substations: { [id: string] : SubStation };
}

因此,基本上,每次更改selectedStation时,通过加载操作来重置来自indexeddb的数据的变电站也是如此。但是,我得到了一个要求将一个变电站移动到另一个需要加载目标站的变电站的要求;现在,更容易的事情是添加

代码语言:javascript
运行
复制
public targetSubstations: { [id: string] : SubStation };

但这似乎是不正确的,似乎不是很好的规模,如果我需要加载4台变电站呢?那么我是否一直在添加targetSubstations1...4

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

代码语言:javascript
运行
复制
type SubstationHierarchy = {
  [stationId: string]: {
    [substationId: string]: Substation
  }
}
public substations: SubstationHierarchy;

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

请记住,对于ngrx存储可以消耗多少内存,我还没有做过任何适当的压力测试,并且正在为移动开发什么是设计存储的最推荐的方法。

编辑

因此,我们使用pouchdb异步地将数据同步到indexeddb,您可以这样想,就像websocket到indexeddb连接一样。

对于最初的需求,一个站有多个变电站。用户只能在主屏幕上一次查看一个站点(以及它的分站)

基于此,我将我的AppState构建成这样

代码语言:javascript
运行
复制
export interface AppState {
  public stations: { [id: string] : Station };
  public selectedStation: string;
  public substations: { [id: string] : SubStation };
}

每次更换selectedStation时,我也会为该站更换变电站。这在大多数情况下都很好。

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

这样我就可以把我的名字改成

代码语言:javascript
运行
复制
export interface AppState {
  public stations: { [id: string] : Station };
  public selectedStation: string;
  public substations: { [id: string] : SubStation };
  public targetStation: string;
  public targetSubstations: { [id: string] : SubStation };
}

现在,如果我需要允许将变电站复制到两个独立的目标,这将需要我按照

代码语言:javascript
运行
复制
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 };
}

我想到的一个选择是像这样构造substations

代码语言:javascript
运行
复制
type SubstationHierarchy = {
  [stationId: string]: {
    [substationId: string]: Substation
  }
}

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

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

EN

回答 1

Stack Overflow用户

发布于 2017-02-07 13:56:58

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

我会做这样的事情:

代码语言:javascript
运行
复制
export interface AppState {
  public stations: { [id: string] : Station }; // all stations
  public selectedStation: string;
  public substations: { [id: string] : SubStation }; // all substations
}

车站在哪里:

代码语言:javascript
运行
复制
export class Station {
   id: string;
   ...
   subStationIds?: string[];
}

然后,当您需要加载一个站点时,您将使用一个选择器将这个站点与它的子站组合在一起,并且在此时加载存储中的Substations,如果它们不存在的话。

当涉及到indexeddb和性能时,我认为它将取决于数据集的大小、缓存的大小等等。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/42089715

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档