Redux:每条记录一个表格,可能有数千条记录

Question

场景:我有一个资产列表<AssetList />.当用户向下滚动到列表底部时,我的应用程序将延迟加载其余资产.因此,根据用户向下滚动的距离,可以加载数百个(如果不是数千个)资产.

问题:单击每个资产<Asset />将展开它并允许用户编辑其字段(名称,内容,..)过渡应该是无缝的.在我看来,每个资产都需要是一种形式.我关注的是1)方法和2)表现.

方法:我在这里采用的方法是每个记录使用一个表格redux-form.有没有其他替代方案可以强制执行通量架构？这是个常见的问题吗？

这里另一种可能的方法是修改状态树,并且每个资产列表都有一个表单:

{
   assets: {..}, 
   assetForm: {..} 
} 

然后单击一个<Asset />将触发相应的操作,该操作将级联到将更新assetForm状态的reducer .

表现:迄今为止我最关心的问题.我不介意页面上的大量表单,但我担心的是每个表单都与redux存储缩减器相关联(或者至少我认为像redux-form这样的工具).换句话说,可能有成千上万的减速器会影响性能吗？

如果我的假设不正确,我道歉.我反应和减少相对较新.

Answer 1

我认为你对一个相当常见的用例提出了有效的担忧.为了解决您的一些问题,我认为您的方法是有效的,除非您可能需要稍微调整一下以避免创建这么多表单.我没有亲自使用过,redux-form所以我会让那些有更多经验的人添加更多的答案或评论,但从更抽象的角度来看,你应该只有一个表单,当用户点击一个Asset,因此,我建议只渲染Asset单击时形成.这样,您将只拥有用户需要的多个表单,远远少于每个表单Asset.

至于商店的管理,如果你必须初始化一个表单Asset,再次没有特定的redux-form经验,你不能确保你有一个相当简单的状态结构,只有在表单初始化时才附加到它？也就是说,考虑一个名为var的状态var assetForms,它是一个对象,其中每个键是唯一的id,Asset值是另一个具有表单数据的对象.这样,您只能保留尽可能多的状态对象Assets.

希望能够解决一些混乱,但如果您需要更多细节,请随意扩展您的问题.