javascript - 非标准化数据如何导致 React Redux 出现问题？

Question

查看 reddit 文档 example来自 redux，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'
        }
      ]
    }
  }
}

In this example, we store the received items together with the pagination information. However, this approach won’t work well if you have nested entities referencing each other, or if you let the user edit items. Imagine the user wants to edit a fetched post, but this post is duplicated in several places in the state tree. This would be really painful to implement.

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

Answer 1

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

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

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

假设第 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' 下同一帖子的标题，但缺乏对我们状态的完整搜索，我们没有办法知道这一点。因此，我们要么进行成本高昂的搜索，要么引入数据完整性问题。

标准化后，这种状态看起来像:

{
  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 的详细信息仅存在于一个位置，因此可以在一个位置对其进行编辑并应用于可能存在的每个引用。

当然，也可以使用对象引用来完成此操作，将相同的对象放入两个 subreddit 的数组中。然而，这与 Redux 并不是特别兼容，在 Redux 中，状态更改会返回新对象，而不是改变现有对象。使用规范化引用可以很好地处理不可变数据，这对于 Redux 状态来说是一个优势。