带分页的 NgRx 存储

Question

我试图找出当服务器响应分页时如何设计 NgRx 存储。

如果我们一次在商店中只保留一页，那么使用 NgRx 到底有什么意义呢？

如果我们为所有页面保留插槽并在第一次调用该特定页面时填充存储中的每个页面，那么如何处理每个请求可能不同的 page_size,...查询参数。

如何处理 NgRx 中的过滤和排序。是否值得保留带有太多查询参数的响应？

我当前的界面就像

res : {
    pagination: {
        page: 1,
        page_size: 25,
        total_items: 10000,
        total_pages: 400
    },
    data: [array of 25 objects]
}

Answer 1

您好，我会尽力一一回答您的问题，但您走在正确的道路上

如果我们一次在商店中只保留一页，那么使用 NgRx 到底有什么意义呢？ 即使只是一个页面，在商店中拥有响应的主要原因是在效果或其他组件或服务中使用该搜索结果或其中的一部分，例如，如果您有多行选择，您将拥有一个选择器，返回您存储的列表中的选定内容以及处理它们的操作，另一种情况是用于创建报告的导出按钮，或者也适合缓存，因此如果您的搜索位于选项卡内，如果您切换到另一个并返回，您可以从商店收集所有数据，而不用再次执行。

它有很多用途，根据我的经验，它可以让你的生活更轻松地将它存储起来，但是，是的，你可以完美地将它作为组件中的本地状态，但在这个时代，随着应用程序的发展，我已经这样做了可能会变得复杂，因为越来越多的与其相关的逻辑进入该组件。ngrx 的主要目标之一是将您的代码分割成更容易扩展、维护和测试的片段，组件中的所有逻辑都可以工作，但维护和测试它会更困难，具体取决于您的情况有多复杂。

如果我们为所有页面保留插槽并在第一次调用该特定页面时填充存储中的每个页面，那么如何处理 page_size，...每个请求可能不同的查询参数。

因此，如果您想缓存所有结果，请将它们全部存储在一个数组中，并有一个选择器，通过切片该大数组返回当前页面，其中起始位置为 currentPage* pageSize，最后位置为 currentPage* pageSize + pageSize，每个当查询参数更改时，您必须执行新的搜索并再次存储它，除非搜索结果足够小并且您可以进行内存中搜索，为此，它将再次成为根据查询过滤主数组的选择器参数

如何处理 NgRx 中的过滤和排序。是否值得保留带有太多查询参数的响应？

因此，这取决于总集是否很小，那么您可以在内存中进行排序，如果您正在缓存整个结果，则可以进行排序，就像由更改主数组的列触发的 SortAction 一样，如果内存中有一个查询参数过滤主数组的选择器。

现在，如果搜索太大，通常最好由后端完成搜索，并且如果他们进行搜索，则还必须进行排序，因此现在任何排序或查询参数更改都将触发执行搜索的新操作，并且结果是缓存，在这里您可以存储一页或请求 3 页，并使用切片选择器返回您需要的页面，或者如果该页面不在缓存中则返回一个标志，以便您可以触发另一个查询。

另外，根据分页控件，您可以实现更聪明的缓存，如果您可以按照我之前描述的方式向前跳转 x 个页面，那么这是最好的方法，但是如果您有分页，它们只能转到下一个和上一个，例如使用cdk 虚拟滚动，然后每次获得结果时，您都可以将其附加到当前结果，因此向后返回全部是缓存，假设您请求 3 页，则仅前进 2 页。

如果您想知道为什么我总是提到缓存 3 页，有研究表明，在分页搜索中，通常超过 90% 的用户不会浏览 3 页，但这可能不适用于您。另外，如果你多次实现这个，你会注意到一些逻辑可以被提取到函数中，比如对数组中对象的字段进行排序，或者页面的切片，我一直计划创建类似于 ngrx 实体的东西，但是更注重搜索排序和分页，但还没有做到。希望这可以帮助。

Answer 2

不确定存储pageSize是否有意义，我们可以从当前页面的对象数量中获取它。您可以将页面标识符的实际数据存储在单独的属性中，并将所有提取的数据存储在另一个属性中，并且可以根据需要使用keys属性控制元素的顺序。返回包含现有数据的页面后，只需更新日期即可同步。

你储存

export interface State {
  page: number;
  totalPages: number;
  totalItems: number;
  keys: string[];
  data: {
    [id: string]: DataInterface;
  };
}

使用选择器获取数据

export const getCurrentPageDataState = createSelector(getDataState, state => state.keys.map(key => state.data[key]);