常见建议是保持状态最小化并使用memoized选择器(如重选lib)来获取派生数据。我知道有些情况下将它放入商店是合适的。我的应用程序中有很多派生数据,生成起来有些昂贵,但由于其使用方式的性质,没有必要经常生成它。在什么时候数据太复杂,不适合选择器,应该放入商店?
更多详情:
我有时间序列数据,我运行一些计算来生成数据的派生“视图”。每个视图中的记录都是根据之前的所有记录计算出来的。
提供一个更具体,有点人为的例子:
目前我在没有redux的indexedDB中进行此操作。
我有一个纯表用户输入的主表:
type Earnings = {
id: number;
time: Date;
amount: number;
category: 'A' | 'B' | 'C' | 'D';
};
当Earnings
数据发生变化时,我有一堆钩子会生成“查看”表。
type EarningsByDay = {
id: number;
date: Date; // only used to date part
amountTotal: number;
maxToDate: number;
};
type EarningsByDateAndCategory = {
id: number;
date: Date; // only used to date part
category: 'A' | 'B' | 'C' | 'D';
amountTotal: number;
maxToDate: number;
};
在上面的视图中,maxToDate
的{{1}}是通过查找EarningsByDay
小于日期的所有amountTotal
条记录中的最大EarningsByDay
来计算的当前项目。同样适用于date
。
如果用户过去编辑/删除/插入收入,则需要重新生成之后的所有派生数据。但是,这种情况很少见,并且大多数情况下用户将按时间顺序添加EarningsByDateAndCategory
条记录(这意味着我所要做的就是搜索过去的记录以找到最大值)。
作为我计划迁移到redux的一部分,我计划只在indexedDB中存储Earnings
个记录,并在启动时将它们全部加载到商店中(一年数据约5,000条记录)。然后我会使用选择器来导出“视图”。
我担心的是,这太重了,不适合选择者。另外,重新选择memoizes的方式,我会在追加记录时重新生成所有派生数据。
答案 0 :(得分:0)
我一直在使用问题中描述的重新选择,到目前为止还没有任何问题。最大的缺点是状态的形状主要由一个主选择器定义而不是存储中的内容,这使得调试工具不那么有用。但是,我发现这是调试工具的限制,而不是如上所述使用选择器的限制。调试时有一个选择器的树视图会很好。由于代码最终变得更简单,更容易理解并且更容易测试,所以我可以进行权衡。
更新:看起来有一些工作可以让调试选择器更容易:https://github.com/reactjs/reselect/issues/279