綁定反應組分Redux的狀態

I的一部分具有終極版商店，看起來像這樣：綁定反應組分Redux的狀態

{ 
    user: {}, 
    alerts: [], 
    reports: [], 
    sourses: [] 
}

對於狀態的此部分中的每一個我有一堆包裹在經由連接的容器至極反應的組分的react-redux。並具有mapStateToProps這樣

(state) => {alerts: state.alerts} 
(state, ownProps) => {alert: _.filter(state, {id: ownProps.curId})}

問題，當我如推出像CREATE_ALERT或EDIT_ALERT和Redux的狀態警報更新了一些行動，ALL反應的組分將響應這一變化甚至是那些與像不同的部分作品sources或reports。

我的問題：如何「綁定」某些組件到樹的某些部分。因此，每個容器組件只會在更新狀態更新的適當部分時更新，並忽略其他更改。

預期的行爲

調度CREATE_ALERT - >警報減速機 - >終極版存儲更新 - >ONLY警報容器組件重新渲染。

當你在改變狀態時，整個狀態變成一個新對象。然後，您的組件由此新對象（新引用）給出並重新呈現自身。

要解決此問題，您需要添加一些邏輯來比較您的組件是否獲得了具有不同值的道具（不參考）。

最簡單和最快的方法是使用React.PureComponent。您也可以覆蓋shouldComponentUpdate函數並自行處理更改。但請注意，PureComponent只適用於基元（它進行淺層比較）。

還請檢查Immutable.js它可以幫助你改變道具的引用的智能方式。

2016-11-17 10:27:56 neciu

謝謝，我會檢查出來。順便說一句，你對此有何看法？ https://www.npmjs.com/package/reselect 你有沒有與此有關的一些經驗？ – Strangerliquid

Reselect是一個很好的momoizing庫，用於選擇redux。其momoizing屬性將解決您的問題。不過，我強烈推薦使用'PureComponent'作爲開始（它已經在React中）。 – neciu

我會先試一下/我會在今天晚上進行一些測試。使用PureComponents，Selectors和ImmutableJS 並在此報告結果 – Strangerliquid

如果使用連接方法，然後通過僅選擇Redux的狀態到該組件，這將防止其它部件

的渲染

例如：

用戶組件：

const mapStateToProps = state =>({ 
    users: state.users 
    }); 

export default connect(mapStateToProps)(User)

警報成分：

const mapStateToProps = state =>({ 
    alerts: state.alerts 
    }); 

export default connect(mapStateToProps)(Alert)

2016-11-17 10:44:08 abhirathore2006

檢查了這一點：Avoid Reconciliation

這裏解釋什麼neciu說。

2016-11-19 00:07:21

使用connect創建的容器組件始終會收到有關商店所有更新的通知。

使用這些更新的責任落在接收connect組件上。它應該包含提取與其相關的數據的邏輯。

2016-11-19 02:59:33 Pineda

回答