标准化REST API的redux状态

Question

考虑以下受Reddit启发的架构

我正在开发用于管理用户，帖子和评论的管理GUI（在此处为实际域）。 React应用程序具有不同的路由（导航选项卡）：

• 用户列出用户及其帖子和评论
• 帖子以列出带有评论（包括原始用户）的帖子

两条路线都允许编辑列出的实体。

我已经定义了以下REST端点

/users
/users/{id}/posts
/users/{id}/
/posts
/posts/{id}/comments

在这种情况下，我应该如何调整Redux状态？我应该

A）只是将不同的实体类型保留在按ID分组的自己的子树中？在那种情况下，检索所有帖子或为用户检索帖子实际上将在同一子树上进行。 React组件会过滤此子树以检索其合适的道具。

B）使树的形状更细，以适合路线使用？例如，组帖子按ID路由帖子，而用户按用户ID路由帖子？这种解决方案将导致一些重复，直到花费额外的精力使事情正常化。

Answer 1

这取决于您正在构建的应用程序的复杂性。您是否经过了https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape？

从API端点看来，帖子和用户之间是相当分开的，而评论位于帖子的上下文中。如果是这样，则此redux状态可能是一个好的开始：

{
  entities: {
    posts: {
      [postId1]: [
        // comments
      ],
      ...
    },
    users: {
      [userId]: {
        posts: [postId1, postId2, ...]
      },
      ...
    }
  },
  ui: {
    screen1: {
      fetchedPosts: [postId1, postId2],
      fetchedUsers: [userId10, userId11]
    }
  }
}

entities用作获取数据的本地数据库，而ui保留要为特定组件呈现的实体的ID。当组件进行提取时，响应数据存储在相关实体中，而ids也存储在组件的redux状态中。然后，在组件的render方法中，在两者之间进行匹配。

使用此模式，您可以有一个单一的事实来源，可以在组件之间共享实体，进行分页，保留数据。 example这是实现细节的好方法