Reactjs Redux應該爲狀態樹中的每個對象創建子縮減器嗎？

redux應用程序據我所知，適當的方式來維護你的狀態樹是規範化它，儘可能flaten數據並使用combinereducer創建狀態樹的切片。Reactjs Redux應該爲狀態樹中的每個對象創建子縮減器嗎？

例如應用程序有職位和用戶

const rootReducer = combineReducers({ 
    user:userReducer, 
    posts:postsReducer, 
}); 
const store = createStore(rootReducer);

給出的職位數組保存所有帖子初始化，State.posts可以像

let initialState = { 
    byId:{1:{id:1,title:'post1'}}, 
    ids:[1], 
    meta_data:{unread:1,old:0} 
    }

現在，如果我們有大約10,000個職位，我們將結束與state.post.ids.length === 10000這很好，

問題是。由於我們的reducer每返回一個新狀態，所以需要更新它，例如我們需要將meta_data.unread更新爲等於0，我們將返回一個新的Post對象。

return object.assign({},state,{meta_data:{unread:0,old:1}})

它將重新呈現所有使用state.post樹的屬性的選擇器和組件！

這聽起來像一個問題吧？**所有我們想要的是更新未讀計數器.. 爲什麼重新計算的帖子的所有選擇器和組件？

所以我有這個想法，可能是state.posts也應該組成使用combineReducers，以便每個attr。的帖子應該有一個reducer它自己。

分裂postsReducer成多個

postsMainReducer, ==> deal with adding or removing posts postMeta_dataReducer, ==> deal with meta_data of posts singlePostReducer ==> Now this is dynamic !! how can i create such ??

這是正確的？，我加入超過所需的複雜性？

- >有人可以向我們展示已經運行的企業應用程序狀態樹的圖片嗎？所以我們可以從中學習如何組織國家？

來源

2016-08-28 Zalaboza

重要的是要注意Redux商店真的只有一個reducer功能。商店將當前狀態和已分派的操作傳遞給該減速器功能，並讓減速器適當地處理事情。

顯然，試圖處理單個函數中的每一個可能的動作並不能很好地擴展，僅僅是在函數大小和可讀性方面，所以將實際工作分解成單獨的函數是有意義的，水平減速機。特別是，常見的建議模式是具有獨立的子簡化器功能，負責管理特定密鑰的特定狀態片更新。 Redux附帶的combineReducers（）是實現這一點的衆多可能方法之一。同時強烈建議您保持商店狀態儘可能平坦和規範。但是，最終，您負責以任何您想要的方式組織您的減速器邏輯。

但是，即使您碰巧有許多不同的獨立子減速器，甚至具有深度嵌套狀態，減速器速度也不太可能成爲問題。 JavaScript引擎每秒能夠運行大量的函數調用，並且大多數子減法器可能只是使用switch語句並默認返回現有狀態以響應大多數操作。

如果您確實擔心減速機性能，可以使用諸如redux-ignore（https://github.com/omnidan/redux-ignore）或reduxr-scoped-reducer（https://github.com/chrisdavies/reduxr-scoped-reducer）之類的實用程序來確保只有某些減速機傾聽特定的操作。您也可以使用redux-log-slow-redurs（https://github.com/michaelcontento/redux-log-slow-reducers）來執行一些性能基準測試。

這裏有項目，我最參考 -

這些是終極版的實際用途。

下面是一些鏈接：

https://github.com/andrewngu/sound-redux

https://github.com/echenley/react-news

https://github.com/paulhoughton/remember/

https://github.com/paulhoughton/mortgage/

https://github.com/benoitvallon/react-native-nw-react-calculator

https://github.com/jfurrow/flood

https://github.com/FH-Potsdam/shifted-maps

https://github.com/quirinpa/2post

https://github.com/karlguillotte/Ctfs

https://github.com/madou/gw2armory.com

來源

2016-08-28 19:00:52

只需添加到此;真正的答案是「不做過早優化」。即使在大量數據的情況下，React和Redux也可以非常快速地運行。讓他們做好自己的工作。等到你在試圖解決問題之前見證了一個問題（並且如果你想盡早地見證它，那麼做基準測試）。 – gravityplanx

將重新渲染消耗state.post樹的任何屬性所有的選擇和部件！

這是不確定的，當商店的不相關屬性發生變化時，組件不必重新呈現。如果你的組件是PureComponent，那麼當屬性的引用（基本道具的值）等於他們最後的渲染時，它不會被重新渲染。

var foo = { a: [1, 2, 3], someCount: 1 }; 
var bar = Object.assign({}, foo, { someCount: 2 }); 
console.log(foo.a === bar.a); 
// true

在減速機返回的狀態的確將是一個新的對象，但您的帖子陣列仍將是以後分配在同一陣列（等於參考）。因此，如果您使用PureComponent，則React可以很好地處理此問題。

，你可能會在未來絆倒什麼：如果您正在使用衍生商店或多個商店中選擇導出的數據，你可以這樣參考保持不變使用reselect到memoize結果 - 沒有渲染再需要。 An article describes the problem with creating new arrays for derived or empty data in each render cycle.

來源

2017-05-23 07:11:16 oldwizard

Reactjs Redux應該爲狀態樹中的每個對象創建子縮減器嗎？

回答

相關問題