在React和Redux的不同組件中訪問商店的相同部分

Question

我目前正在使用React和Redux構建應用程序。在應用程序的兩個單獨部分中，我想從我的商店訪問庫列表。一個人將所有的圖書館作爲一個頁面的主要內容顯示爲卡片。另一個會將這些庫顯示爲頁面特定部分內的小型下拉列表。

我到目前爲止實現的想法是使用一個更高階的組件來偵聽庫的存儲並在兩個不同的表示組件中使用它，或者使用一個表示組件作爲容器中的一個prop 。

Answer 1

我到目前爲止實現的想法是使用更高階的組件來偵聽庫的存儲並在兩個不同的表示組件中使用它，或者使用一個表示組件的樣式作爲prop容器。

這些聽起來都不是理想的解決方案。使用React與Redux的美妙之處在於它將您的演示文稿與數據分開。沒有理由不能將零件connected分配給商店。的確，這是encouraged。

例如：

// LibrariesCards.jsx 
export default connect((state) => ({ 
    libraries: state.libraries 
}))(LibrariesCards); 

// LibrariesDropdown.jsx 
export default connect((state) => ({ 
    libraries: state.libraries 
}))(LibrariesDropdown);