爲什麼在助焊劑應用架構中每個實體使用一個商店？

Question

我在正在使用的項目中使用reactjs和flux架構。對於如何正確地將嵌套數據分解到商店以及爲什麼我應該將數據分成多個商店，我感到有點困惑。

要解釋這個問題，我會用這個例子：

想象一下，你有項目的Todo應用。每個項目都有任務，每個任務都可以有筆記。

該應用程序使用REST API來獲取數據，返回以下響應：

{ 
    projects: [ 
     { 
      id: 1, 
      name: "Action Required", 
      tasks: [ 
       { 
        id: 1, 
        name: "Go grocery shopping", 
        notes: [ 
         { 
          id: 1, 
          name: "Check shop 1" 
         }, 
         { 
          id: 2, 
          name: "Also check shop 2" 
         } 
        ] 
       } 
      ] 
     }, 
    ] 
} 

假想應用程序的界面顯示在左邊的項目列表，當你選擇一個項目，該項目被激活其任務顯示在右側。當你點擊一個任務時，你可以在彈出窗口中看到它的註釋。

我會做的是使用1單店，「項目店」。一個動作完成對服務器的請求，獲取數據並指示商店填充新數據。商店內部保存這個實體樹（項目 - >任務 - >註釋）。

爲了能夠根據選擇哪個項目來顯示和隱藏任務，我還會在商店中保存一個變量「activeProjectId」。基於該視圖可以獲得活動項目，其任務並呈現它們。

問題解決。

但是：在網上搜索了一下，看看這是否是一個好的解決方案後，我看到很多人聲稱你應該爲每個實體使用一個單獨的商店。

這將意味着： 一個ProjectStore，TaskStore和NoteStore。爲了能夠管理關聯，我可能還需要一個「TasksByProjectStore」和一個「NotesByTaskStore」。

有人可以解釋爲什麼這會更好嗎？我看到的唯一的事情是管理商店和數據流的開銷很大。

Answer 1

有專家和負責使用一家商店或不同的商店。某些助焊劑的實施明確支持一家商店統一管理他們，而另一些實施方案也促進了多家門店。

無論一家商店還是多家商店滿足您的需求，都取決於a）您的應用的功能，以及b）您期望的未來發展或變化。簡而言之：

• 一家商店是更好，如果你的關鍵問題是你的嵌套實體之間的依賴關係。並且如果您不太擔心服務器存儲組件之間的單一實體關係之間的依賴關係。一家商店很棒，例如，您想要管理項目級別的基礎任務和筆記的統計信息。許多親子關係和一體化數據獲取表單服務器都支持一種商店解決方案。
• 多個商店如果您的關鍵問題是服務器存儲組件之間的單個實體連接之間的依賴性更好。實體與實體之間的關係較弱，獨立的單一實體服務器提取並更新有利於多個商店。

在你的情況：我的賭注是一家商店更好。您有明顯的親子關係，並從服務器一次獲取所有項目數據。

的稍長的答案：

一號店：

• 大，以儘量減少管理多個門店的開銷。
• 如果您的頂視圖組件是唯一的有狀態組件，並且從商店獲取所有數據並將詳細信息分發給無狀態的孩子，那麼它可以很好地工作。
• 但是，管理實體之間依賴關係的需要並不會消失：不是在不同商店之間管理它們，而是需要在單個商店內管理它們。因此它變得更大（更多的代碼行）。
• 此外，在典型的助焊劑設置中，每個商店都會發出一個「我已更改」的事件，並將其留給組件以找出更改的內容以及是否需要頂層重新渲染。因此，如果您有許多嵌套實體，並且其中一個實體從服務器接收到許多更新，那麼您的超級商店會發出很多更改，這可能會觸發整個結構和所有組件的大量不必要更新。流量反應可以處理很多事情，細節更改更新一切都是它處理得很好，但它可能不適合每個人的需要（當我在一個項目中搞亂了狀態之間的轉換時，我不得不放棄這種方法）。

多個商店：

• 更多的開銷，是的，但對於一些項目，你得到的回報以及
• 如果你有服務器數據和組件之間的緊密耦合，與焊劑店在這兩者之間，更容易在單獨的商店中區分顧慮
• 如果例如您希望對筆記數據結構進行很多更改和更新，而不是更容易擁有一個有狀態的筆記組件，它會監聽筆記存儲，而筆記存儲又會處理來自服務器的筆記數據更新。在筆記結構中處理更改時，您可以專注於筆記存儲，而無需弄清楚某些大型超級市場內部的筆記處理方式。