2016-08-20 28 views
2

看着从终极版的reddit的文档example,丹说:非标准化数据如何导致反应减少问题?

{ 
    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' 
     } 
     ] 
    } 
    } 
} 

在这个例子中,我们一起存储与 分页信息的接收项目。但是,如果您的 的嵌套实体彼此相互引用,或者您让用户 编辑项目,则此方法将无法正常工作。想象一下,用户想要编辑一个提取的帖子,但是这个帖子在状态树的几个地方被复制。这将是 真的很痛苦实施。

有人可以解释他指的是什么分页信息?另外,如果用户想要编辑提取的帖子,它会是什么样子?这怎么会导致一个帖子在状态树的几个地方被复制?

回答

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)更新同一文章的标题“前端“,但缺乏对我们国家的全面搜索,我们无法知道这一点。所以我们要么进行昂贵的搜索,要么会引入数据完整性问题。

归一化,这种状态会看起来像:

{ 
    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状态是一个优点。