Question

我尝试使用Redux构建一个复杂的全动态应用。我的意思是我的应用程序有很多动态生成的表单，其中包含生成的字段 - 即时组件。我想在我的Redux商店中存储有关我的组件的可视数据。但是，如果不将实际数据与可视化组件数据混合，我该怎么办呢？

例如，如果我有这样的结构

Store { 
  visual: {...deeply nested visual-data-tree...}, 
  data: {...deeply-nested real-data-tree...} 
}

渲染组件很难，因为我需要首先搜索可视化数据，然后对组件进行反应＆＃34;值＆＃34;在两棵树上。

但如果有类似的结构：

Store {
  form {
    visual: {...form visual data...},
    data: {
      //Ok here the form "data" - widgets. Or it must to be visual? :)
      widget1 {
        visual: {type:"ComboBox", opened: true},
        data: 1
      }
    }
  }
}

你看到了问题，现在我在Form小部件的真实数据中有可视数据。

（表格 - 数据 - widget1 - 视觉）

真实数据中的视觉数据超出了概念。

你们如何解决混合数据的相同问题？

真的很抱歉我的英语不好。我希望我能清楚地解释这个问题。

Answer 1

这种区别不肤浅吗？我认为一个更重要的规则是该州的数据应该规范化。例如，如果您有Combobox小部件让您选择用户，那么您的数据形状最好是

{
  chosenUserId: 10, // Good!
  users: {
    10: { name: 'Alice' }
}

而不是

{
  chosenUser: { name: 'Alice' }, // Bad!
  users: {
    10: { name: 'Alice' }
}

如果数据在状态树中重复，则很难正确更新并避免不一致。

只要您保持数据标准化，我认为没有必要划分visual和data。您可能希望拥有看起来像数据库的顶级实体缓存（例如entities，其中包括users，posts或您的应用使用的任何数据对象，但除此之外，在检索相关状态时，采用任何状态感觉最舒适。

Redux数据结构

1 个答案: