ngrx 存储带有有效负载的操作，导致内容负载逐渐恶化

Question

TLDR；将操作分派到商店会导致来自 http 请求的内容加载出现显着的增量缺陷。请求本身，如果不涉及存储逻辑，或者不涉及将 http 请求的内容纳入自身，则无论事后是否对数据进行了任何操作（没有与指定类型匹配的缩减器），都不会导致任何问题。也使用 ngrx/entity 框架。我似乎无法找到一种方法来阻止这种性能缺陷，并且应用程序将因此在给定时间后崩溃。

用于测试事物并查看瓶颈出现位置的函数显示执行获取的操作是最昂贵的部分，以及在随后的图像中看到的瀑布。

  @Effect()
  getAllClusterInfo: Observable<Action> = this.actions$
  .ofType<actions.GetAllClusterInfoObjectsAction>(actions.GET_ALL_CLUSTER_INFO_OBJECTS)
  .do(_ => console.log(_))
  .switchMap(() => {
     const str = `Info: ${Math.round(Math.random() * 10000)}`;
     console.time('Full ' + str)
     console.time('Get ' + str)
     return this.service$.getAllClusterInfoObjects().do(_ => console.timeEnd('Get ' + str))
       .map(info => new actions.GetAllClusterInfoObjectsSuccessAction(info)).do(_ => console.timeEnd('Full ' + str))
       .catch(err => of(new actions.GetAllClusterInfoObjectsFailAction(err)));
   });

我已经在我的应用程序上设置了一个中央存储实例，在此之前它可以正常工作，并且大部分时间仍然如此。即将出现的问题是，在定时循环中从系统获取数据，并触发两个操作，加载内容所需的时间量，基于 Chrome- 的瀑布视图DevTools，越来越高，并且越来越高到加载操作实际上可能由于处理它所花费的时间而导致应用程序崩溃的程度。

我做了一些小测试，以验证当前发生的情况，但似乎找不到解决问题的方法。问题不在于从服务器本身加载内容，而是两次调用，除了 store/actions 逻辑之外，这两次调用都在 <300 毫秒内完成。

我创建了一个不向商店本身写入任何内容的虚拟操作，因为将这些内容写入商店的时间不到一毫秒，用 console.time 观察到，我知道它不是最佳工具异步环境，但使用 chrome 性能监视器进行了验证。这个动作可以接受一个有效负载，当给定 http 请求结果的有效负载时，将执行 below.If 我从触发的虚拟操作中删除有效负载，然后行为与制作大致相同纯 html 调用。通过使用服务 class 发出 http 请求，然后再次调用虚拟操作，在向其提供有效负载后，它不会以任何方式尝试改变存储，这会导致同样的性能下降，但不会由于我认为问题是正在发生的动作的同步性 dispatched.Here 是两种情况，所以很糟糕，第一种情况是调用动作，带有有效负载，但没有 reducer 处理它的类型（应该我假设基本上被忽略了。）第二，使用空负载调度操作，这同样不应该做任何事情。

Answer 1

原来罪魁祸首是使用了 DevTools 模块。答案是通过更多抽查生成的测试和这张票获得的，以获得更好的解释。

ngrx 存储带有有效负载的操作，导致内容负载逐渐恶化

ngrx store actions with payloads causing content load to get progressively worse

angular

ngrx-store

ngrx-effects