javascript - React/Redux 处理双向数据

Question

我正在努力正确组织我的 Redux Store 和 React 组件，以正确处理双向嵌套数据。

假设我有一个 post 模型和一个 user 模型。让我们举一个抽象的例子:

const user = {
    "id": "1",
    "name": "user 1",
    "posts": [...] // list of post objects
}

const post = {
    "id": "1",
    "title": "post 1",
    "user": user
}

问题是我无法像这样加载这些数据，因为它会导致无限递归错误。我必须省略 user 中的 posts 或省略 posts 中的 user。

这是我理想的需要:

我需要一个post页面来显示帖子user及其所有信息(id、name)以及用户的帖子列表 code> 与帖子信息(id、标题)同时出现在同一屏幕中。

我使用 normalizr 来标准化数据。

我将如何加载数据？

Answer 1

根据 Redux 文档 (https://redux.js.org/recipes/structuring-reducers/normalizing-state-shape)，您应该避免嵌套对象。

这里的解决方案是将数据视为数据库。这意味着您应该存储 id 而不是对象。

在您的示例中:

const user = {
  "id": "1",
  "name": "user 1",
  "posts": ["1", "2", ...] // list of post objects IDs
}

const post = {
  "id": "1",
  "title": "post 1",
  "userId": "1"
}