如何使用规范化数据正确管理状态

Question

假设我正在对我的应用程序的数据进行标准化，最终得到的状态形状如下所示：

{ 
    entities: { profiles: { 1: {...}, ...}, roles: {...}, ... },
    profileList: [1, 2, 3],
    roleList: [1, 2, 3],
    profile: [2],
    ...
}

现在，假设我有一个配置文件列表视图，其中列出了所有配置文件。如果我添加一个新的配置文件，我希望更改立即反映在UI中，因此我需要在profileList reducer中处理ADD_PROFILE操作，并在entities in状态的正确部分中进行处理。

如何管理这些更改的最佳实践是什么？

一方面，我可以创建胖操作和一个简单的实体缩减程序，它只是将操作响应合并到实体中。我喜欢这一点，因为我只能专注于非实体缩减。我不喜欢这样，因为这样看起来我的行为和减法都依赖于对状态的了解。

另一方面，我可以创建单独的缩减程序并将它们组合在一起：

const reducer = combineReducers({
  entities: combineReducers({
    profiles,
    roles
  }),
  profileList,
  roleList,
  profile,
});

我喜欢这样，因为我知道只有简化者才知道状态的形状。我不喜欢它，因为它使我的生活更加困难：-当添加一个新的配置文件时，我必须在profiles reducer和profileList reducer中管理它。-这使得使用这种方法组织代码变得更加困难。

有没有更好的选择？

Answer 1

一般建议的做法是使用“选择器”函数在操作创建器和mapState函数中隐藏商店形状的状态。至于如何拆分逻辑的问题，没有一个单一的答案-做对你更好的。

Redux常见问题解答涵盖了这个问题：Where should my "business logic" live?

此外，为了处理规范化数据，我强烈推荐使用(redux-orm)库，它在Redux存储中的规范化数据上放置了一个非常好的模型类型外观，包括管理实体类型之间的关系。