当不同组件依赖于同一实体列表时,如何正确管理规范化数据的删除?

时间:2016-10-06 10:27:57

标签: reactjs redux react-redux

让我们说:

  • 您应用中可用的所有图书的分页列表。您在BooksList组件中包含该内容。
  • TopBooksList组件中应用的热门书籍列表。
  • 您从rest api获取的所有数据都会被规范化并保存在Redux商店中,因此您的商店看起来像这样:

    { entities: { books: { 1: { ... }, 2: { ... }, 3: { ... }, 4: { ... }, 5: { ... } } }, topBooksList: [5, 2, 1], booksList: [1, 2, 3, 4, 5] }

  • 用户通过点击5组件

  • 中图书上的删除按钮来删除图书BooksList

每次发生删除时,都会从实体列表和该组件的结果列表中删除相应的实体。

0。处理页面上有其他组件引用刚删除的实体这一事实的最佳方法是什么?

1。您是否尝试通过在处理该类数据的每个reducer中为删除操作添加switch语句来协调组件? 1.1 如果是这样,如果您希望始终确保保持同步最终受该删除影响的组件,例如示例中的TopBooksList组件。通过删除书籍5,您最终得到topBooksList长度2,您需要它的长度为3.您是否以某种方式将其标记为脏并重新获取数据?当页面上相关组件的数量增加时,这种策略是否会变得乏味?

2。有不同的,更简单的策略吗?

1 个答案:

答案 0 :(得分:1)

您应该在处理该书的每个reducer中添加switch个案例。在那里你做了保持一切顺序所必需的(保持参照完整性,确保顶部列表长3等)。

但是,如果这涉及从后端获取数据,则应将其放在deleteBook的异步操作创建者中。

原因是减速剂应该始终是纯净的,这意味着它们不会产生副作用。

在您的情况下,我可能会有更长的topBooksList,因此每次删除图书时都无需提取。您无需全部显示它们。

  

当相关的数量没有时,这个策略是否会变得乏味   页面上的组件会增长吗?

是的,它确实变得单调乏味。试试Redux-OrmRedux-Schema(免责声明:由我撰写)。