角度ngrx图表/表格数据

Question

我有一个 angular 5 应用程序，其中包含一个用于我的小部件的 ngrx 商店，这些小部件与后端 (socket.io) 一起存储。 这就是我的小部件的外观。

widgets: {
      1: {
        id: 1,
        type: 'datatable',
        startDate: startDate,
        endDate: endDate,
        dataStream: ''
      },
      2: {
        id: 2,
        type: 'chart',
        startDate: startDate,
        endDate: endDate,
        dataStream: ''
      }
    }

每个小部件都有一个开始日期和一个结束日期。我已经有了一些用于加载、添加和更新我的 ngrx 商店和组件中的小部件的效果和操作。 组件是基于此小部件创建的，可以是图表或数据表。每个小部件都应该从后端获取数据流（列、行、数据点）。

我的问题是如何使用 ngrx 实现这一点？我应该将完整的数据对象从后端加载到小部件项还是从我的ngrx 商店获取基于小部件的数据的最佳方法。

Answer 1

@Peter，感谢您的澄清。有多种方法可以做到这一点，但是，根据您提供的信息，我相信在小部件和小部件（许多数据流行）的上下文中，商店状态名义上将由两个切片组成（即两组减速器)--1: 浅小部件对象数组的存储切片，其中每个对象的 datastream = null 属性，2: 当前正在查看的数据流的存储切片/已编辑（带有小部件标识符/引用），它本身是一个行对象数组。我已经对下面的每个场景进行了伪化——我确信有更多或替代/更好的变化。我假设您了解 ngrx 商店的反应式调度->动作->效果->减少流程，并且不会对此进行过多详细说明。我还假设您自己或您的第 3 方组件的视图在提供对象 Widget 或数据流行的新副本时得到更新/changeDetected（即：changeDetection: ChangeDetectionStrategy.OnPush）。

1. 存储切片：小部件（即：store.select('widgets')...)：此存储切片是一个“浅”（datastream = null）小部件对象数组。包含这些的 Angular 组件将调度一个 'GET_SHALLOW_WIDGETS' 动作以在实例化时水合存储切片。我认为您提到的“网格”组件将处理显示此存储切片/数组，并且还可以与存储交互以进行 CRUD 操作，例如“UPDATE_SHALLOW_WIDGET”、“ADD_SHALLOW_WIDGET”、“DELETE_SHALLOW_WIDGET”等。

2. Store slice：Widget Datastream In View（即：store.select('datastreamInView')...）：这个store slice 是正在查看/编辑的一个widget 对象数据流。它是一个 'widgetRow' 对象的数组，其中每个对象代表数据表中的一行（对于特定的小部件），这些对象可能由 ngx-datatable 管理，并希望是 'changeDetectable'。一旦打开了一个浅小部件（上面的“1”），包含您的 ngx-datatable 的 angular 组件将调度一个“GET_WIDGET_DATA”操作来水合 widgetRow 对象数组（切片：视图中的小部件数据流），其中每个对象都将用于填充您的 ngx 数据表行。这里有几种内存管理选择：

   2A：允许浏览器管理内存堆并向服务器请求小部件数据流的所有数据。这不一定是离谱的。您可能会发现浏览器可以轻松处理 200MB（或更多）的数据。如果您检索到的数据的钟形曲线在该范围内，我相信值得一试。如果您不相信：

   2B：允许 ngx-datatable 管理内存和 push/pop 数组以滚动到行的视图之外。这显然需要存储/后端协调。换句话说，调度“GET_PARTIAL_WIDGET_DATA”并将标识符传递给上一次调度“GET_PARTIAL_WIDGET_DATA”操作时检索到的“最后”行。 Twitter 和 Facebook 使用类似的机制。在这种情况下，“数据流”存储切片在任何给定时间仅包含数据流的子集。注意：由于您正在维护一个数组，如果您弹出数组的顶部元素，则会返回一个新数组，并且您可能会出现严重闪烁。希望您的 ngx-datatable 能够很好地管理这一点，您不必担心它。否则，您需要确保以一种不会导致新数组变异的方式编写 pop。没那么难...在 SO 中有很多 examples。

   2C：按照您的建议自行管理平滑滚动，这是 2B 的一种变体，以防 ngx-datatable 不提供此功能。

最后，由于您的视图可以通过服务器 socket.io 触发器更新，根据服务器发送的数据，这里有几个需要考虑的场景：

1. 服务器发送“WIDGET_UPDATED”：此服务器消息包含一个小部件标识符，仅此而已。如果 msg 中的小部件不是您正在编辑的小部件，则什么也不做。另一方面，如果它是您正在编辑的那个，您可以允许用户通过“SUBMIT_WIDGET_DATA”存储操作（乐观地）调度他们最新的小部件编辑，而无需通知他们。您还可以通知用户并允许他们放弃编辑并发出“GET_WIDGET_DATA”来更新他们的数据表视图。
2. 服务器发送“WIDGET_ROWS_UPDATED”：此服务器消息更细化，包含已针对小部件标识符更新的行数组。如果 msg 中的小部件不是您正在编辑的小部件，则什么也不做。另一方面，如果它是您正在编辑的那个，那么触发器将分派一个“UPDATE_WIDGET_ROWS”，这最终将导致减速器在该数据流数组中找到这些行对象，使用新数据删除并恢复它们并触发更改检测用于 ngx-datatable 中的相关行。
3. 等等……

我希望这会有所帮助。