规范化 REST API 的 redux 状态答案

【问题标题】：Normalizing redux state for REST API规范化 REST API 的 redux 状态
【发布时间】：2019-04-18 18:23:10
【问题描述】：

考虑以下受 Reddit 启发的架构

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

用户列出用户及其帖子和 cmets
帖子列出帖子及其 cmets（都包括原始用户）

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

我已经定义了以下 REST 端点

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

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

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

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

【问题讨论】：

标签： json reactjs rest web-services redux

【解决方案1】：

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

从 API 端点来看，post 和用户似乎是完全分开的，而 cmets 则存在于 post 的上下文中。如果这是真的，那么这个 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 方法中你匹配两者。

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

【讨论】：