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

Question

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

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

共享数据集

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

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

分离数据集

• 我导航到 /list ，而不是从 api 下载我的所有用户，我只下载了几个，这取决于我的 users_per_page和 users_current_page将设置为，我可能会将数据存储为 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 之间如果是这样，我也更新那个列表，如果不是我什么都不做

这可能行得通，但我真的觉得这不是正确的方法。我可能还需要下载 users_currently_visible 的新列表参观/list ，因为我可能添加了一个新的..

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

谢谢!

Answer 1

请咨询“real world” example来自 Redux 仓库。
它显示了这个问题的解决方案。

你的状态形状应该是这样的:

{
  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.

不，您只需要其中一个。响应 Action 将触发，负责 entities 的 reducer 会将 this single entity 合并到现有状态中。仅仅因为 state.entities.users 可能包含多个用户并不意味着您需要下载所有用户。将实体想象成一个不必被填充的缓存。

---

最后，我将再次引导您前往 “real world” example来自 Redux repo 。它准确地展示了如何为分页信息和实体缓存编写一个 reducer，以及 how to normalize JSON in your API responses with normalizr这样 reducer 就可以很容易地以统一的方式从服务器操作中提取信息。