如何为具有 list/detail 视图和分页的应用程序选择 Redux 状态形状？

Question

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

我正在考虑两种方法以及两者的组合。

共享数据集

我导航到 /list，我所有的用户都是从 api 下载的，存储在 redux 存储中，在键 users 下，我还添加了一些 [=13] =] 和 users_limit 只呈现列表的一部分
然后我导航到 /detail/<id>，并使用 <id> 作为 val 存储 currently_selected_user...这意味着我将能够通过这样的方式获取我的用户数据 users.find(res => res.id === currently_selected_user)
更新也很容易，因为我只处理一个数据集和指向它的详细信息
添加新用户也很容易，同样只需使用相同的用户列表

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

分离数据集

我导航到 /list，而不是从 api 下载我的所有用户，我只下载了几个，具体取决于我的 users_per_page 和 [=22] =] 将设置为，我可能会将数据存储为 users_currently_visible
然后我导航到 /detail/<id>，将 currently_selected_user 存储为 <id> 作为 val...而不是搜索 users_currently_visible 我只是从 api..
关于更新，我不会以任何方式更新users_currently_visible
我也不会添加

我认为这里可能存在的问题是，在访问 /list 时，我将不得不再次从 api 下载数据，因为它可能与数据库，我也可能不必要地详细下载用户数据，因为它们可能顺便已经在我的 users_currently_visible

中

某种科学怪人的恶作剧

我详细说，我做的和分离数据集一样，但不是直接从api下载用户数据，我首先检查：
- 我有没有users_currently_visible
- 如果是这样，他们之间是否有一个用户使用我的id？如果两者都为真，则我将其用作我的用户数据，否则我将调用 api
同样发生在更新时，我检查我的用户是否存在于 users_currently_visible 如果是，我也更新那个列表，如果不是我什么也不做

这可能会奏效，但我真的觉得这不是正确的方法。我可能还需要在访问 /list 时下载新的 users_currently_visible 列表，因为我可能添加了一个新列表..

有粉丝最喜欢的方法吗？...我相信每个 redux 用户都一定遇到过同样的事情。

谢谢！

Answer 1

请参阅 Redux 存储库中的 “real world” example。
它显示了这个问题的解决方案。

您的状态形状应如下所示：

{
  entities: {
    users: {
      1: { id: 1, name: 'Dan' },
      42: { id: 42, name: 'Mary' }
    }
  },
  visibleUsers: {
    ids: [1, 42],
    isFetching: false,
    offset: 0
  }
}

请注意，我正在分别存储 entities（ID -> 对象映射）和 visibleUsers（具有分页状态和 ID 的当前可见用户的描述）。

这似乎与您的“共享数据集”方法相似。但是我不认为你列出的缺点是这种方法固有的真正问题。一起来看看吧。

Now the problem I have with this approach is that when then list of users gets huge(say millions), it might take a while to download

你不需要全部下载！将所有下载的实体合并到 entities 并不意味着您应该查询所有实体。 entities 应该包含 到目前为止 下载的所有实体——而不是世界上的所有实体。相反，您只会根据分页信息下载当前显示的内容。

when I navigate directly to /detail/, I wouldn't yet have all of my users downloaded, so to get data for just the one, I'm gonna have to download them all. Millions of users just to edit one.

不，您只需要其中一个。响应操作将触发，负责 entities 的 reducer 会将 这个单一实体 合并到现有状态中。仅仅因为 state.entities.users 可能包含多个用户并不意味着您需要下载所有用户。将 entities 视为没有的缓存。

最后，我将再次引导您访问 Redux 存储库中的 “real world” example。它准确地展示了如何为分页信息和实体缓存编写一个 reducer，以及如何使用 normalizr 规范化 API 响应中的 JSON，以便reducer 很容易以统一的方式从服务器操作中提取信息。

Answer 2

我之前也用过normalizr方法来标准化实体，但问题是这需要手动工作。

如果你了解 GraphQL 世界中的 Apollo，你可能知道它支持自动规范化，因此给定 object 的数据不会存储在多个地方。感谢他们还支持自动更新，如果您的服务器以具有相同 ID 但更新属性的 object 响应，Apollo 将识别它并在多个地方更新此 object。

但是，为什么这种奢侈只为 GraphQL 保留？由于这个原因，我实现了 redux-requests 库，它支持任何 API、REST、GraphQL、Firebase 等的自动规范化。它是如何工作的？假设您有一个图书清单和详细的端点。要与他们交流，您只需像这样发送 Redux 操作：

const fetchBooks = () => ({
  type: FETCH_BOOKS,
  request: { url: '/books' },
  meta: { normalize: true },
});

const fetchBook = id => ({
  type: FETCH_BOOK,
  request: { url: `/books/${id}` },
  meta: { normalize: true },
})

现在，要在这两个地方更新一本书的标题，我们只需要做：

const updateBookTitle = (id, newTitle) => ({
  type: UPDATE_BOOK_TITLE,
  request: { url: `books/${id}`, method: 'PATCH', data: { newTitle } },
  meta: { normalize: true },
})

如果您对这种方法感兴趣，可以阅读更多相关内容 here

如何为具有 list/detail 视图和分页的应用程序选择 Redux 状态形状？

How to choose the Redux state shape for an app with list/detail views and pagination?

javascript

redux

ngrx

共享数据集

分离数据集

某种科学怪人的恶作剧