Redux 数据结构

Question

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

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

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

很难渲染组件，因为我需要先搜索视觉数据，然后在两棵树中反应组件 "value"。

但是如果有类似这样的结构：

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
      }
    }
  }
}

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

(表单 - 数据 - 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 数据结构

Redux data structuring

javascript

architecture

hierarchical-data

flux

redux