非规范化数据如何导致 React Redux 出现问题？答案

【问题标题】：How can non-normalized data cause problems in react redux?非规范化数据如何导致 React Redux 出现问题？
【发布时间】：2016-12-27 06:07:01
【问题描述】：

查看来自 redux 的 reddit 文档 example，Dan 说：

{
  selectedSubreddit: 'frontend',
  postsBySubreddit: {
    frontend: {
      isFetching: true,
      didInvalidate: false,
      items: []
    },
    reactjs: {
      isFetching: false,
      didInvalidate: false,
      lastUpdated: 1439478405547,
      items: [
        {
          id: 42,
          title: 'Confusion about Flux and Relay'
        },
        {
          id: 500,
          title: 'Creating a Simple Application Using React JS and Flux Architecture'
        }
      ]
    }
  }
}

在本例中，我们将收到的商品与分页信息。但是，如果您有相互引用的嵌套实体，或者如果您让用户编辑项目。想象一下用户想要编辑一个获取的帖子，但是这个 post 在状态树的多个位置重复。这将是实施起来真的很痛苦。

有人可以解释他所指的分页信息是什么吗？另外，如果用户想要编辑获取的帖子，它会是什么样子？这如何导致帖子在状态树的多个位置重复？

【问题讨论】：

标签： javascript reactjs redux normalization react-redux

【解决方案1】：

我相信 lastUpdated 属性是他所指的分页数据；它可用于（取决于 API）提取自上次更新以来所做的更改。

您对规范化的困惑是可以理解的，因为他没有包含非规范化方法不好的案例示例 - 尽管在文档的下一段中，他确实提供了规范化的示例结构看起来像在需要它的情况下。

但考虑一下这种情况：我们仍在管理一个跟踪“帖子”的数据集，这些“帖子”是“subreddits”的一部分。但是现在我们允许单个帖子被“交叉发布”的可能性，并且我们将其表示为相同的单个帖子包含在它被交叉发布的每个 subreddit 对象中。

假设 42 号帖子是交叉发布的。现在非标准化状态如下所示：

{
  selectedSubreddit: 'frontend',
  postsBySubreddit: {
    frontend: {
      isFetching: true,
      didInvalidate: false,
      items: [            {
          id: 42,
          title: 'Confusion about Flux and Relay'
        }
      ]
    },
    reactjs: {
      isFetching: false,
      didInvalidate: false,
      lastUpdated: 1439478405547,
      items: [
        {
          id: 42,
          title: 'Confusion about Flux and Relay'
        },
        {
          id: 500,
          title: 'Creating a Simple Application Using React JS and Flux Architecture'
        }
      ]
    }
  }
}

现在用户正在查看 subreddit 'reactjs' 并想要编辑帖子 42 的标题。我们还应该更新 subreddit 'frontend' 下 SAME 帖子的标题，但由于没有完整搜索我们的状态，我们没有办法知道。因此，我们要么进行代价高昂的搜索，要么引入数据完整性问题。

标准化，这个状态看起来像：

{
  selectedSubreddit: 'frontend',
  posts: {
    42: {
      id: 42,
      title: 'Confusion about Flux and Relay'
    },
    500: {
      id: 500,
      title: 'Creating a Simple Application Using React JS and Flux Architecture'
    }
  },
  postsBySubreddit: {
    frontend: {
      isFetching: true,
      didInvalidate: false,
      items: [42]
    },
    reactjs: {
      isFetching: false,
      didInvalidate: false,
      lastUpdated: 1439478405547,
      items: [42,500]
    }
  }
}

以这种方式存储，帖子 42 的详细信息仅存在一个位置，因此它们可以在一个位置进行编辑并应用于可能存在的每个参考。

当然，也可以使用对象引用来实现这一点，将相同的对象放在两个子目录的数组中。但是，这与 Redux 并不是特别兼容，在 Redux 中，状态更改会返回新对象，而不是改变现有对象。使用规范化引用可以很好地处理不可变数据，这是 Redux 状态的一个优势。

【讨论】：