需要有關正確使用React / Redux的建議

Question

例如，在項目簡化程序中，我們的狀態為S1，如下所示：

| - Item1 - Item1.1 | - Item1.2 | - Item2 | - Item3 - Item3.1 - Item3.2 - Item3.3

每個項目都有自己的狀態屬性（打開/關閉）。 我們擁有完美呈現此狀態的組件，一切正常。

然后，我們需要在這里再添加一個抽象級別，即組。 我們將其實現為函數並獲取新狀態：

S2 = f（S1）

例如，S2看起來像這樣：

| - Group1 - Item3.1 | - Item1.2 | - Group2 - Item2

我們希望使用相同的組件進行渲染，但是Group1，Group2需要自己的狀態（open / closed屬性的值），並且根據Redux不清楚應將該狀態存儲在何處。

預先感謝您的任何想法/建議。

Answer 1

聽起來將狀態存儲為與UI相同的形狀太復雜了。 我將使用父鍵跟蹤每個項目上的父對象：

items: [
  { name: 'Item 1', parent: 'Group 2' },
  { name: 'Item 2.3', parent: 'Group 4' }
]

然后，您可以根據UI組件的名稱在UI中過濾它們。 給定一個稱為'Group 2'的組件，您可以使用filter查找所需的組件：

items.filter(item => item.parent === 'Group 2')

當然，這只是偽偽代碼。 您可以設置一個帶項目的無狀態組件和一個可以在任何地方重用的父名稱。

讓我知道我是否為您指明正確的方向！