geo*_*ydv 10 javascript flux reactjs reactjs-flux
我在我正在研究的项目中使用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"
}
]
}
]
},
]
}
Run Code Online (Sandbox Code Playgroud)
虚拟应用程序的界面在左侧显示项目列表,当您选择项目时,该项目将变为活动状态,其任务将显示在右侧.单击任务时,您可以在弹出窗口中查看其注释.
我要做的是使用1个单独的商店,即"Project Store".操作会向服务器发出请求,获取数据并指示商店使用新数据填充自己.商店在内部保存这个实体树(项目 - >任务 - >注释).
为了能够根据选择的项目显示和隐藏任务,我还在商店中保留一个变量"activeProjectId".基于此视图可以获取活动项目,其任务并呈现它们.
问题解决了.
但是:在网上搜索一下以确定这是一个很好的解决方案后,我看到很多人都说你应该为每个实体使用一个单独的商店.
这意味着:ProjectStore,TaskStore和NoteStore.为了能够管理关联,我可能还需要一个"TasksByProjectStore"和一个"NotesByTaskStore".
有人可以解释为什么这会更好吗?我唯一看到的是管理商店和数据流的大量开销.
win*_*elt 10
使用一家商店或不同商店有利弊.一些通量的实现特别有利于一家商店统治它们所有,可以说,而其他商店也促进多个商店.
无论是一家商店还是多家商店都能满足您的需求,取决于a)您的应用程序的功能,以及b)您期望的未来发展或变化.简而言之:
在你的情况下:我的赌注是一家商店更好.您有明显的父子关系,并从服务器一次获取所有项目数据.
更长的答案:
一家商店:
多家商店:
| 归档时间: |
|
| 查看次数: |
981 次 |
| 最近记录: |