在終極版

Question

過濾大動態存儲

我的終極版店看起來是這樣的：

threads: [ {id: 1, board: 1}, ...], posts: [ {id: 1, thread: 1}, ...]

查看板將新增20個線程商店。並且線程的每個頁面將向商店添加20個帖子。

除此之外，每秒都會自動發佈新帖子和線索。

這使得董事會的代碼確實是這樣的：

threads.filter(thread => thread.boardId == props.params.boardId)

所以每次訪問車上時間將被過濾上百個線程。每個線程將通過每個頁面的數千個帖子進行過濾。

這會發生多大的性能問題，我該如何最好地避免它們？

我看着reselect，但似乎它將不得不重新計算每個視圖，因爲過濾器無論如何改變。

Answer 1

現在，讓我們假設您將會忽略reselect，直到您需要爲止。當您縮放時，它是一個方便的工具，但可以在需要時稍後展開，而不會有太多麻煩。

一個相當有用的方法（被提取到一個同樣有用的庫中，名爲normalizr）是對象數組集合的規範化。考慮到你在你的問題中描述的狀態，你應該肯定檢查它背後的邏輯。這樣做會爲您的商店收藏提供替代結構，該替代結構適用於選擇個別元素，同時不會影響的顯着過濾的效果。

騰起權，你的狀態可能可能最終看起來像：

boards: { 
    entities: { 
     board0: { id: "board0", threads: [ thread2, thread4, ...], data: ... }, 
     board1: { id: "board1", threads: [ thread0, thread3, ...], data: ... }, 
    }, 
    ids: [ board0, board1, ... ], 
}, 
threads: { 
    entities: { 
     thread0: { id: "thread0", posts: [ post0, post4, ... ], data: ... }, 
     thread1: { id: "thread1", posts: [ post2, post3, ... ], data: ... }, 
    }, 
    ids: [ thread0, thread1, ... ], 
}, 
posts: { 
    entities: { 
     post0: { id: "post0", data: ... }, 
     post1: { id: "post1", data: ... }, 
    }, 
    ids: [ post0, post1, ... ], 
}, 

這適用於一堆理由。首先，傳入的帖子和線程通過動作添加到狀態，這意味着您可以很容易地將它們標準化爲，因爲它們在中。不要將完整的線程對象直接放入threads陣列，而是將其添加到threads.entities.<threadId>並使用它的ID更新boards.<currentBoardId>.threads陣列。傳入的post對象也是如此。就這樣，它正常化了。

現在，當涉及到顯示組件時，每個board都有一個非常輕量級的列表，名爲threads。而不是一個長度爲boards * threads的數組上的過濾器，您可以通過僅在該電路板上可見的線程ID數組映射一個映射，並且具有固有快速的字典查找。

線程可見板：

const boardThreads = boards.entities[props.params.boardId].threads 
    .map(threadId => threads.entities[threadId] 

帖子所選主題：

const threadPosts = threads.entities[selectedThreadId].posts 
    .map(postId => posts.entities[postId]) 

爲每個集合額外ids場是沒有必要的，但我覺得它有用。例如，列出所有板：

const allBoards = boards.ids.map(id => boards.entities[id]) 

這可能，但是，僅僅是使用Object.keys功能，而不是完成。直到開發。

應該說這是一個簡單的數組過濾器，可能需要考慮在狀態中添加新對象。然而，我提供的三個例子包括沒有數組過濾無論如何，存儲中使用的所有數組只是ID數組（通常是非常簡單的字符串）。另外，這確保了與實體相關聯的數據僅在一個地方（collection.entities）中被存儲在中，即使在其增長時也保持狀態爲精益和一致。