Javascript 如何为具有列表/详细视图和分页的应用程序选择Redux状态形状？_Javascript_Redux_Ngrx

Javascript 如何为具有列表/详细视图和分页的应用程序选择Redux状态形状？

javascript redux

Javascript 如何为具有列表/详细视图和分页的应用程序选择Redux状态形状？,javascript,redux,ngrx,Javascript,Redux,Ngrx,假设我的数据库中有许多条目（比如用户）。我还有两条路线，一条用于列表，另一条用于详细信息（您可以在其中编辑条目）。现在，我正在努力研究如何处理数据结构我正在考虑两种方法，并将两者结合起来共享数据集我导航到/list，我的所有用户都是从存储在redux store中的api a下载的，在键users下，我还添加了某种users\u offset和users\u limit来只渲染列表的一部分然后我导航到/detail/，并将当前选定的用户与存储为值。。。这意味着我将能够通过类似以下内容获

假设我的数据库中有许多条目（比如用户）。我还有两条路线，一条用于列表，另一条用于详细信息（您可以在其中编辑条目）。现在，我正在努力研究如何处理数据结构

我正在考虑两种方法，并将两者结合起来

共享数据集

我导航到
```
/list
```
，我的所有用户都是从存储在redux store中的api a下载的，在键
```
users
```
下，我还添加了某种
```
users\u offset
```
和
```
users\u limit
```
来只渲染列表的一部分

然后我导航到

/detail/

，并将

当前选定的用户与
存储为值。。。这意味着我将能够通过类似以下内容获取用户的数据users.find（res=>res.id==当前选中的用户）


更新也会很简单，因为我只使用一个数据集和指向它的细节
添加新用户也很容易，同样，只需处理相同的用户列表即可


现在，这种方法的问题是，当用户列表变得庞大（比如数百万）时，下载可能需要一段时间。而且，当我直接导航到/detail/
时，我还没有下载所有的用户，所以为了获得我所需要的数据，我必须首先下载整个内容。数百万用户只是为了编辑一个
分离数据集

我导航到/list
，而不是从api下载所有用户，我只下载其中的几个，这取决于我的用户/u页面
和用户/u当前页面
将设置为什么，我可能会将数据存储为用户/u当前可见
然后我导航到/detail/
，以
作为值存储当前选定的用户
，而不是搜索当前可见的用户
，我只是从api下载用户数据
更新时，我不会以任何方式更新当前可见的用户

我也不会补充

我认为这里可能存在的问题是，在访问/list
时，我必须再次从api下载数据，因为它可能与数据库中的数据不同步，我也可能不必要地下载用户的详细数据，因为他们可能已经在我的用户\u当前可见的
某种弗兰肯斯坦式的恶作剧

I detail，我的操作与在单独的数据集中相同，但不是直接从api下载用户数据，而是首先检查：

我是否有任何用户\u当前可见
如果是的话，他们之间是否有使用我的id的用户？
如果两者都是真的，那么我将其用作我的用户数据，否则我将进行api调用

更新时也会发生同样的情况，我会检查我的用户是否存在于users\u current\u visible
之间，如果存在，我也会更新该列表，如果不存在，我什么也不做

这可能会起作用，但感觉不太合适。在访问/list
时，我可能还需要下载当前可见的用户的新列表，因为我可能已经添加了一个新列表
有没有粉丝最喜欢的方式？。。。我相信每个redux用户都会遇到同样的问题
谢谢
 请咨询Redux回购。

它正好说明了这个问题的解决方法
您的状态形状应如下所示：
{
  entities: {
    users: {
      1: { id: 1, name: 'Dan' },
      42: { id: 42, name: 'Mary' }
    }
  },
  visibleUsers: {
    ids: [1, 42],
    isFetching: false,
    offset: 0
  }
}

注意：我分别存储实体
（ID->对象映射）和可见用户
（当前可见用户的分页状态和ID描述）
这似乎类似于您的“共享数据集”方法。然而，我不认为您列出的缺点是这种方法固有的真正问题。我们来看看
现在，这种方法的问题是，当用户列表变得庞大（比如数百万）时，下载可能需要一段时间
你不需要下载所有的文件！将所有下载的实体合并到实体
并不意味着您应该查询所有实体。实体
应包含迄今为止下载的所有实体——而不是世界上所有的实体。相反，您只需要根据分页信息下载当前显示的内容
当我直接导航到/detail/时，我还没有下载所有的用户，所以为了只获得一个用户的数据，我必须下载所有用户。数百万用户只是为了编辑一个
不，你只需要一个。响应操作将启动，负责实体的reducer将此单个实体合并到现有状态。仅仅因为state.entities.users
可能包含多个用户，并不意味着您需要下载所有用户。将实体
视为不必填充的缓存

最后，我将再次向您介绍从Redux repo到。它准确地展示了如何为分页信息和实体缓存编写一个缩减器，这样简化器就可以方便地以统一的方式从服务器操作中提取信息。
我以前也使用了normalizer
方法来规范化实体，但问题是这需要手动操作
如果您知道GraphQL世界中的Apollo，您可能知道它支持自动归一化，因此给定对象的数据不会存储在多个位置。Thx表示，它们还支持自动更新，如果您的服务器使用具有相同id但具有更新属性的对象进行响应，Apollo将识别该对象并在多个位置更新该对象
然而，为什么这种奢侈应该只保留给GraphQL？由于这个原因，我实现了库，wh