Question

我正在努力使用Redux中的数据规范化概念。

例如，如果我们规范化以下数据：

{
  "id": "123",
  "author": {
    "id": "1",
    "name": "Paul"
  },
  "title": "My awesome blog post",
  "comments": [
    {
      "id": "324",
      "commenter": {
        "id": "2",
        "name": "Nicole"
      }
    }
  ]
}

到此：

{
  result: "123",
  entities: {
    "articles": { 
      "123": { 
        id: "123",
        author: "1",
        title: "My awesome blog post",
        comments: [ "324" ]
      }
    },
    "users": {
      "1": { "id": "1", "name": "Paul" },
      "2": { "id": "2", "name": "Nicole" }
    },
    "comments": {
      "324": { id: "324", "commenter": "2" }
    }
  }
}

在我的模板中，我需要遍历posts并显示post.comments，例如在Angular中 -

<ul>
  <li *ngFor="let post of posts">
    {{post.title}}
    <div *ngFor="let post of post.comments">...</div>
  </li>
</ul>

我需要进行一些转换才能找回这个结构。否则，我无法在我的页面中显示数据，那么重点是什么？

Answer 1

redux docs have a pretty detailed section on this topic但主要原因是：

这是一个令人担忧的原因有几个：


当一个数据在多个地方重复时，确保更新得当它变得更加困难。

嵌套数据意味着相应的reducer逻辑必须更嵌套或更复杂。特别是，试图深入更新   嵌套的字段可能变得非常难看。

由于不可变数据更新需要复制和更新状态树中的所有祖先，并且新对象引用将   导致连接的UI组件重新渲染，深度更新   嵌套数据对象可能会强制完全不相关的UI组件   即使他们显示的数据实际上没有改变，也要重新渲染。

从个人经验来看，我可以说第三点可以在某些情况下带来显着的性能提升。

Answer 2

既然你问过，这是一个如何查找给定帖子的评论条目的例子：

const mapState = (state, ownProps) => {
    let currentPost, postComments;

    if(ownProps.postId) {
        currentPost = state.posts[postId];

        if(currentPost) {
            const {comments : commentIds} = currentPost;
            postComments = commentIds.map(commentId => state.comments[commentId]);
        }
    }

    return {currentPost, postComments};
}

class Post extends React.Component { /* component code here */ }

export default connect(mapState)(Post);

然后将其用作<Post postId={123} />。

Redux - 规范化数据的重点是什么

2 个答案: