減速機構成的最佳實踐

Question

這是我對redux的第一個應用。我在之前針對每個頁面模式都遵循單個縮減器，但隨着應用程序複雜性的增加，我發現需要將其分解爲子縮減器。所以我已經完成了我的功課，並且已經通過了redux上指定的示例，並且我認爲我目前的情況允許我使用selectors，但我不確定構成我的縮減器的最佳實踐是什麼。

此外，我所遵循的方案是每頁一個智能組件，其他組件僅僅是將任何傳遞給它們的SFC都吐出。 頁面頂部有註冊表單，並有異步操作。底部顯示一個數組及其後端調用。

所以，這是我的頁面初始狀態：

const initialState = { 
    isFetching: false, 
    isCreating: false, 
    isDeleting: false, // Delete object from the bottom part 
    formStatus: '', // Displays status of the top part of backend call 
    blockStatus: '', // Status for the bottom part. GroupsList 
    statusType: '', 
    groupsList: [] // Fetch list for the bottom part 
}; 

另外，我必須保持一種過濾列表後它從groupsList到後端。在這裏使用選擇器會是一個好例子嗎？

此外，還有另一個調用，從頁面的底部開始，從列表中的每個對象開始，並且它將獲取更多列表，我將在groupsList的每個對象中追加這些列表。因此，對於潛在的情況並記住建議將狀態保持正常化，分解我的減速器有什麼好的做法？

編輯： 我相信我的信息缺少一些關鍵點。因此，這部分的應用程序，它分爲兩部分。因此，我已將此組件連接到名爲GroupsPage的商店。 GroupsPage還有兩個組件GroupsForm和GroupsBlock。

• GroupsForm有一堆文本字段，允許用戶創建一個新的 組和創建成功將它加入到GroupsBlock組列表的數組 。 GroupsBlock還有一個 Table組件，它顯示我在頁面加載時從 API中獲取的組列表​​。組中的每一行都有兩個圖標。一個用於編輯組信息和其他用於刪除組的 。

刪除和其他一切都很簡單。併發症是當編輯按鈕觸發時。在點擊編輯按鈕時，有一個API調用來獲取一些可用的組屬性，我可以通過模式將拖放拖放到我的組列表中，並將更新後的組列表發佈到後端。

所以我減速器組成是這樣的（詳細）：

const initialState = { 
      isCreating: false, 
      isUpdatingContainersGroup: false, 
      isFetchingGroups: false, 
      isFetchingGroupHosts: false, 
      isDeleting: false, 
      didCreate: false, 
      didDelete: false, 
      didUpdateContainersGroup: false, 
      didFetchGroups: false, 
      didFetchGroupHosts: false 
      formStatus: '', 
      blockStatus: '', 
      statusType: '' 
      groupsList: [properties: [{}...{}]], 
      availableProperties: [{}.. {}], 
      newProperties: [{}... {}] // Have to maintain an array for new properties added. To post updated data 
       }; 

所以，我個人認爲這是所有漂亮搞砸了，我需要某種子減速，可能選擇以及和需要在整個應用中實現它以保持一致性。

重要我在整個應用程序中遵循相同的模式。每一頁都有一個表格和一個塊。而且對於每一頁我都有一個連接組件，其他所有內部組件都只是一個SFC。

Answer 1

願意幫助更多，但我仍然在黑暗中的幾件事情。而且由於我沒有50的聲望，我無法評論:)你可以製作應用程序的用戶故事嗎？讓我瞭解它的作用，它爲什麼這樣做，以及國家的意義。什麼需要成爲選擇者？什麼是不斷計算？我有一種感覺，你不需要用你提供的信息來分解你的減速器，但是我想在我的意見是做什麼/不做什麼之前，對這個應用有一個更好的瞭解。

我會編輯這個答案，一旦你迴應，而實際上回答你的問題。謝謝！

編輯：感謝您更新和添加信息到您的問題，幫助了很多。

在點擊編輯按鈕有一個API調用來取，我可以拖動ñ通過一個模式到我的 組列表下降，將進一步發佈更新組列表到後端的一些可用的 組屬性。

爲什麼這是複雜的部分？什麼是複雜的呢？什麼部分給你帶來麻煩？

隨着您的應用程序的數據流，我真的看不到分割你的reducer或使用像Reselect之類的東西。你計算哪些東西需要記憶？

我認爲你的組件設置方式很理智，但是你的redux存儲區的形狀對於應用程序目前的工作似乎有點多毛。對於前綴爲is或did的所有屬性;他們有什麼用途？是否有一部分UI監聽所有這些？如果它只是傳達給用戶的信息，你可能希望這樣的一個比較通用的動作：

{ type: 'APP_STATUS', info: { type: 'success', details: 'Created group' } } 

可以使用info對象的type財產，但是你想樣式的消息。我用這種方式取得了很多成功，而不是在州內有20個屬性來描述每一件小事。

EDIT 2

晴是的，但我有這將需要採取 現有嵌套的數組，並運用一些 手術後吐出一些數據計算。然而，我想知道atm的是，因爲我有 列表並添加更多的對象到列表中，我是否需要使這個 以任何形式規範化，或者繼續遵循相同的模式並嵌套它？

這在很大程度上取決於你。至少你可以嵌套更好，但是對象數組沒有任何問題。

此外，我最近更新了我的減速機有三個主要對象。 groupsUi，groupsMessages和groupsStore。並且每個對象基本上都是一個子縮減器。這似乎是一個很好的方式來保持我的減速機清潔和可管理，或者有任何其他方式來更好地管理這個 ？

你的意思是你已經更新了你的狀態以擁有三個主要對象？在分解你的減員時，重要的是要知道國家的哪個部分需要了解國家的其他部分。如果事情能夠被限制，而不需要了解其他州的情況，那麼你就沒事。

老實說，我相信你在「有我自己的決定」部分的應用程序。我幾個月前在這裏，我總覺得我的問題有一個明確的答案。我星期五下午經歷了一次重構，並通過了三個獨立的redux包，其中包括Reselect。我全部實施了，並得出結論說他們沒有幫助我。

這一切都是關於什麼幫助你和你的應用程序在這個時候。想想過去，現在，以及未來的未來。你只是分配和移動物體和數組，或者你真的需要計算一些東西嗎？您的應用是否如此組織以至於您可以擁有三個單獨的縮減器，還是您需要具有單一級別的全局狀態和單個縮減器？這些只是你可以回答的問題。

我很抱歉我沒有直接回答你在做什麼，但我相信你在正確的軌道上。正確的代碼，測試它，重構它，重複。如果你不斷質疑你的應用程序的內容和原因，你會做得很好。