当不同的组件依赖同一个实体列表时,如何正确管理规范化数据的删除?
How does one properly manage delete of normalized data when different components rely on the same entity list?
假设您有:
- 您的应用中所有可用图书的分页列表。您将其包含在
BooksList
组件中。
TopBooksList
组件中您应用中的热门图书列表。
你从 rest api 中获取的所有这些数据都会被规范化并保存在你的 Redux 商店中,所以你的商店看起来像这样:
{
entities: {
books: {
1: { ... },
2: { ... },
3: { ... },
4: { ... },
5: { ... }
}
},
topBooksList: [5, 2, 1],
booksList: [1, 2, 3, 4, 5]
}
用户通过单击 BooksList
组件中图书上的删除按钮删除图书 5
每次发生删除时,都会从实体列表和该组件的结果列表中删除相应的实体。
0.如果页面上还有其他组件引用刚刚删除的实体,那么最好的处理方法是什么?
1. 您是否尝试通过在处理此类数据的每个减速器中为删除操作添加 switch 语句来协调组件? 1.1 如果是这样,如果您希望始终确保同步最终受该删除影响的组件,如示例中的 TopBooksList
组件,该怎么办。通过删除书籍 5
,您最终得到长度为 2
的 topBooksList
,您需要它的长度为 3。您是否以某种方式将其标记为脏并重新获取数据?当页面上相关组件的数量增加时,这种策略不会变得乏味吗?
2.是否有不同的、更简单的策略?
你应该在处理这本书的每个 reducer 中添加 switch
个案例。在那里你做必要的事情来保持一切有序(保持参照完整性,确保顶部列表是 3 长,等等)。
但是,如果这涉及从后端获取数据,那么这应该放在 deleteBook
的异步操作创建器中。
原因是 reducer 应该始终是纯的,这意味着它们不能有副作用。
在您的情况下,我可能需要更长的时间 topBooksList
,因此无需在每次删除图书时都获取。您不需要全部显示它们。
Doesn't this strategy get tedious when the number of related
components on the page grows?
是的,它确实很乏味。尝试 Redux-Orm or Redux-Schema(免责声明:由我编写)。
假设您有:
- 您的应用中所有可用图书的分页列表。您将其包含在
BooksList
组件中。 TopBooksList
组件中您应用中的热门图书列表。你从 rest api 中获取的所有这些数据都会被规范化并保存在你的 Redux 商店中,所以你的商店看起来像这样:
{ entities: { books: { 1: { ... }, 2: { ... }, 3: { ... }, 4: { ... }, 5: { ... } } }, topBooksList: [5, 2, 1], booksList: [1, 2, 3, 4, 5] }
用户通过单击
BooksList
组件中图书上的删除按钮删除图书5
每次发生删除时,都会从实体列表和该组件的结果列表中删除相应的实体。
0.如果页面上还有其他组件引用刚刚删除的实体,那么最好的处理方法是什么?
1. 您是否尝试通过在处理此类数据的每个减速器中为删除操作添加 switch 语句来协调组件? 1.1 如果是这样,如果您希望始终确保同步最终受该删除影响的组件,如示例中的 TopBooksList
组件,该怎么办。通过删除书籍 5
,您最终得到长度为 2
的 topBooksList
,您需要它的长度为 3。您是否以某种方式将其标记为脏并重新获取数据?当页面上相关组件的数量增加时,这种策略不会变得乏味吗?
2.是否有不同的、更简单的策略?
你应该在处理这本书的每个 reducer 中添加 switch
个案例。在那里你做必要的事情来保持一切有序(保持参照完整性,确保顶部列表是 3 长,等等)。
但是,如果这涉及从后端获取数据,那么这应该放在 deleteBook
的异步操作创建器中。
原因是 reducer 应该始终是纯的,这意味着它们不能有副作用。
在您的情况下,我可能需要更长的时间 topBooksList
,因此无需在每次删除图书时都获取。您不需要全部显示它们。
Doesn't this strategy get tedious when the number of related components on the page grows?
是的,它确实很乏味。尝试 Redux-Orm or Redux-Schema(免责声明:由我编写)。