json - 规范化 REST API 的 redux 状态

问题描述

考虑以下受 Reddit 启发的架构

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

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

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

我已经定义了以下 REST 端点

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

在这种情况下，我应该如何塑造 Redux 状态？我是不是该

A) 简单地将不同的实体类型保留在按 id 分组的自己的子树中？在这种情况下，检索所有帖子或检索用户的帖子实际上将在同一子树上操作。React 组件会过滤这个子树来检索它适合的 props。

B）使树更细粒度地与路线一起使用？例如，组帖子按 id 路由帖子，用户按用户 id 路由帖子？这种解决方案会导致一些冗余的重复，直到使用额外的努力来使事情正常化。

标签： jsonreactjsrestweb-servicesredux

这取决于您正在构建的应用程序的复杂性。您是否查看了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 以呈现特定组件。当组件进行 fetch 时，响应数据存储在相关实体中，而 ids 也存储在组件的 redux 状态中。然后在组件的 render 方法中，在两者之间进行匹配。

使用这种模式，你有一个单一的事实来源，可以在组件之间共享实体，进行分页，持久化数据。这是实现细节的一个很好的例子

json - 规范化 REST API 的 redux 状态

问题描述

解决方案

推荐阅读