我在我正在研究的项目中使用reactjs和flux架构。我对如何将嵌套数据正确地分解到商店以及为什么我应该将数据分成多个商店感到有些困惑。
为了解释这个问题,我将使用这个例子:
想象一下你有项目的Todo应用程序。每个项目都有任务,每个任务都可以有笔记。
应用程序使用REST api检索数据,返回以下响应:
{
projects: [
{
id: 1,
name: "Action Required",
tasks: [
{
id: 1,
name: "Go grocery shopping",
notes: [
{
id: 1,
name: "Check shop 1"
},
{
id: 2,
name: "Also check shop 2"
}
]
}
]
},
]
}
虚拟应用程序界面在左侧显示项目列表,当您选择项目时,该项目将变为活动状态,其任务将显示在右侧。单击任务时,您可以在弹出窗口中看到其注释。
我要做的是使用1个单店,"项目商店"。操作会向服务器发出请求,获取数据并指示商店使用新数据填充自己。商店在内部保存这个实体树(项目 - >任务 - >注释)。
为了能够根据选择的项目显示和隐藏任务,我还在商店中保留一个变量," activeProjectId"。基于此视图可以获取活动项目,其任务并呈现它们。
问题解决了。
然而:在网上搜索一下,看看这是否是一个很好的解决方案后,我看到很多人都说你应该为每个实体使用一个单独的商店。
这意味着: ProjectStore,TaskStore和NoteStore。为了能够管理关联,我可能还需要一个" TasksByProjectStore"和一个" NotesByTaskStore"。
有人可以解释为什么会更好吗?我唯一看到的是管理商店和数据流的大量开销。
答案 0 :(得分:10)
使用一家商店或不同商店有利弊。一些通量的实现特别有利于一家商店统治它们所有,可以说,而其他商店也促进多个商店。
一个商店或多个商店是否适合您的需求,取决于a)您的应用程序的功能,以及b)您期望的未来发展或变化。简而言之:
在你的情况下:我的赌注是一家商店更好。您有明显的父子关系,并从服务器一次获取所有项目数据。
答案稍长:
一个商店:
多个商店: