假设您正在创建一个显示有关电影数据的应用,您可以使用以下格式从服务器获取这些数据:
{ movies: [], actors: [], directors: [], years: [] }
不同的数组通过id相互关联。换句话说,电影中的对象如下所示:
{title: 'The Shining', cast: [`837392010`, `363893920` ...], ...}
在演员数组中,每个id都是对actors数组中actor的引用。
您按原样将数据放在redux存储中,但不同的组件需要以不同的方式使用它。例如,一个组件需要列出杰克尼科尔森在20世纪70年代所有的电影,即使年代阵列没有直接链接到演员。它只链接到电影,电影本身链接到演员。因此,在组件可以呈现之前,它需要运行一堆数据转换。
另一个组件列出了Martin Scorsese和Robert DiNero合作的所有时间,另一个列出了所有电影中带有“Fire”的电影,另一个列出了Tom Hanks在1990年到2000年之间的所有电影......
产品经理计划一直添加和删除这样的任意显示,因此,日期将在应用程序中使用,就像可查询的数据库一样。具体的查询会经常更改。
我们还要说变换必须在客户端完成。服务器唯一的功能是以上面的规范化形式发送数据。
构建这样的应用程序的最佳方法是什么,以便它可扩展且易于更新?我可以想到几种方法:
在reducer中执行所有映射。缺点是它们的减速器会变得臃肿。他们需要以大量不同的形式缓存相同的数据。
将原始的规范化数据存储在reducer中,并使用控制器组件(高级组件)将其映射到子项所需的任何形式。我并不为此疯狂,因为它以业务逻辑来填充视图。当然,这假设您将高级组件视为视图。
在connect,mapStateToProps函数中映射。每个高级组件都会连接到商店,但在获得它的道具之前,它们会通过连接转换为适当的格式。
????