2016-08-20 29 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狀態是一個優點。