假设您正在制作一个显示电影数据的应用程序,这些数据是您从服务器以这种格式获取的:
{ movies: [], actors: [], directors: [], years: [] }
不同的数组通过 id 相互关联。换句话说,电影中的对象看起来像这样:
{title: 'The Shining', cast: [`837392010`, `363893920` ...], ...}
cast 数组中的每个 id 都是对 actor 数组中某个演员的引用。
您将数据按原样放在 redux 存储中,但不同的组件需要以不同的任意方式使用它。例如,一个组件需要列出杰克·尼科尔森在 1970 年代出演的所有电影,即使年份数组没有直接链接到演员。它只是链接到电影,而电影本身又链接到演员。所以在组件可以渲染之前,它需要运行一堆数据转换。
另一个组件列出了马丁·斯科塞斯和罗伯特·迪尼罗合作的所有时间,另一个列出了标题中带有“火”的所有电影,另一个列出了汤姆·汉克斯在 1990 年至 2000 年之间拍摄的所有电影……
产品经理计划随时添加和删除这样的任意显示,因此在应用程序中将使用日期,就像可查询的数据库一样。特定查询将经常更改。
我们还假设必须在客户端上完成转换。服务器的唯一能力是以上面的规范化形式发送数据。
构建这样的应用程序以使其具有可扩展性和易于更新的最佳方式是什么?我可以想到几种方法:
在 reducer 中进行所有映射。缺点是它们的减速器会变得臃肿。他们将需要以大量不同的形式缓存相同的数据。
将原始的、标准化的数据存储在 reducer 中,并使用控制器组件(高级组件)将其映射到其孩子需要的任何形式。我对此并不疯狂,因为它在视图中散布着业务逻辑。当然,这假设您将高级组件视为视图。
在 connect、mapStateToProps 函数中映射。每个高级组件都会连接到 store,但在它得到它的 props 之前,它们会通过连接转换为适当的格式。
???