reactjs - 如何使用 Normalizr 扁平化 Redux 状态中的多对多关系？

Question

设想

我们有一个映射以下关系的数据库：

• Atag有很多campaigns
• Acampaign有很多tags
• campaigns和之间的关系tags由称为 a 的关联实体表示campaign_tag
• campaign_tag实体有一个priority属性

问题

当我们的关联实体没有唯一的 ID/值时，我们如何实现normalizr （或任何类似的库）来生成一个扁平的应用程序状态来解释我们的关联实体？

笔记/杂项想法

我见过的其他示例仅映射了原始实体，并且似乎更适合一对多或一对一的关系。他们通常会生成如下状态树：

{
  entities: {
    campaigns: {
      '1': { id: 1, name: 'Ace', tags: [1, 2, 3] },
      ...
    },
    tags: {
      '1': { id: 1, name: 'Example Tag', campaigns: [1, 2, 3] },
      ...
    }
  },
  ...
}

我们的关联实体会进入那个entities组吗？我们应该只添加唯一的 ID 吗？这似乎适得其反。扁平化这种关系是否合适？

任何帮助表示赞赏，谢谢。

Answer 1

场景：

1. 您控制 API：我将发送如下对象：

   campaigns: [{
     id: <id>,
     name: <name>,
   }],
   tags: [{ id: <id>, name: <name> }],
   campaign_tags: [{campaign_id, tag_id, priority}]
   

   因此，这将易于管理并避免信息重复。当你使用 redux connect 挂载你的组件时，你可以创建一个选择器来填充你的活动标签以添加到组件的属性中。

2. 您无法控制 API。在这种情况下，我需要知道你从服务器得到什么类型的响应，以便推荐一些东西。