在多個商店中將可重用組件與ReactJ和Flux一起使用

Question

在我公司，我們使用ReactJs開始了我們的第一個項目。 因為最終這可能會發展成為一個大型系統，所以我們決定使用Flux來使事情井井有條。 盡管有很多示例，但它們大多不基於復雜系統中的用法。

我們希望實現的一件事是使用類似於小部件的組件的UI。 例如，我們有一個顯示客戶信息的組件。 此小部件將在帶有發票信息的選項卡頁面上使用，也將在同一瀏覽器窗口中的帶有客戶卡的另一個選項卡頁面上使用。 還將有其他一些組件將使用此小部件。

所以我有一個React組件，應該監聽商店的change事件。 但是，此組件本身不知道要聽哪個商店，因為我可以有一個發票商店，但也可以有另一個應顯示客戶信息的商店。

我發現此問題為您提供了有關如何創建可重用組件的信息，但並未提供有關如何在多個商店中使用組件的提示。

我考慮的一件事是將存儲用作參數傳遞給可重用組件。 這是明智的做法嗎？

預先感謝您的反應！

Answer 1

一種方法是處理父組件中的所有數據檢索邏輯。 在該模型中，您的CustomerCard組件不需要知道如何檢索其數據，而是希望將其作為道具傳遞。 這是可重用性的勝利，因為CustomerCard組件不再與特定的數據檢索過程相關聯。

在您的情況下，您可以為每個商店創建一個容器組件，並且每個容器組件將在其render()方法中返回<CustomerCard customerInfo={...} />元素。