例如,我们的项目减速器中的状态S1如下:
| - Item1 - Item1.1
| - Item1.2
| - Item2
| - Item3 - Item3.1
- Item3.2
- Item3.3
每个项目都有自己的州财产(开放/关闭)。 我们有完美呈现此状态的组件,一切正常。
然后我们需要在这里添加一个更多的抽象级别,Groups。 我们将其实现为功能并获得新状态:
S2 = f(S1)
例如,S2,如下所示:
| - Group1 - Item3.1
| - Item1.2
| - Group2 - Item2
我们希望使用相同的组件渲染它,但Group1,Group2需要自己的状态(开放/关闭属性的值),并且不清楚应该以Redux的形式存储此状态。
提前感谢任何想法/建议。
答案 0 :(得分:0)
将状态存储为与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')
当然这只是伪代码。您可以设置一个无状态组件,该组件包含可以在任何地方重用的项目和父名称。
如果我指出你正确的方向,请告诉我!