为什么在 flux 应用程序架构中每个实体使用一个商店?
Why use one store per entity in the flux application architecture?
我在我正在处理的项目中使用了 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"
}
]
}
]
},
]
}
虚构应用程序的界面在左侧显示项目列表,当您 select 一个项目时,该项目将变为活动状态,其任务将显示在右侧。单击任务时,您可以在弹出窗口中看到它的注释。
我会做的是使用 1 个商店,"Project Store"。一个动作向服务器发出请求,获取数据并指示商店用新数据填充自己。商店在内部保存这个实体树(项目 -> 任务 -> 注释)。
为了能够根据 select 编辑的项目显示和隐藏任务,我还会在商店中保留一个变量,"activeProjectId"。基于此,视图可以获得活动项目、其任务并呈现它们。
问题已解决。
但是:在网上搜索了一下这是否是一个好的解决方案后,我看到很多人说您应该为每个实体使用一个单独的商店。
这意味着:
ProjectStore、TaskStore 和 NoteStore。为了能够管理关联,我可能还需要一个 "TasksByProjectStore" 和一个 "NotesByTaskStore".
有人可以解释一下为什么这样会更好吗?我唯一看到的是管理商店和数据流的大量开销。
使用一家商店或不同商店各有利弊。一些 flux 的实现特别倾向于一个商店来统治它们,可以这么说,而其他的也有利于多个商店。
是一个商店还是多个商店满足您的需求,取决于 a) 您的应用程序的用途,以及 b) 您期望的未来发展或变化。简而言之:
如果您主要关心的是嵌套实体之间的依赖关系,- 一个商店 更好。如果您不太担心服务器-存储-组件之间的单个实体关系之间的依赖关系。一家商店很棒,例如您想在项目级别管理有关基础任务和注释的统计信息。许多类似父子的关系和多合一的数据从服务器获取都倾向于一个存储解决方案。
- 多个商店 如果您主要关心的是服务器-商店-组件之间的单个实体连接之间的依赖关系,则更好。弱的实体到实体关系和独立的单一实体服务器获取和更新有利于多个商店。
在您的情况下:我敢打赌,一家商店更好。你有明显的父子关系,并一次从服务器获取所有项目数据。
稍长的答案:
一家店:
- 非常适合最大限度地减少管理多个商店的开销。
- 如果您的顶视图组件是唯一的有状态组件,并且从商店获取所有数据,并将详细信息分发给无状态子组件,则效果很好。
- 但是,管理实体之间依赖关系的需求并没有简单地消失:您需要在单个商店内管理它们,而不是在不同商店之间管理它们。因此它变得更大(更多代码行)。
- 此外,在典型的通量设置中,每个商店都会发出一个 'I have changed' 事件,并将其留给组件来确定发生了什么变化以及它们是否需要重新渲染。因此,如果您有许多嵌套实体,并且其中一个实体从服务器接收到许多更新,那么您的超级商店会发出许多更改,这可能会触发整个结构和所有组件的大量不必要的更新。 Flux-react 可以处理很多,细节-更改-更新-一切都是它处理得很好的,但它可能不适合每个人的需要(我不得不放弃这种方法,因为它搞砸了我在一个项目中的状态之间的转换)。
多家商店:
- 更多开销,是的,但对于某些项目,您也会得到 returns
- 如果您在服务器数据和组件之间有紧密的耦合,并且在两者之间有 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"
}
]
}
]
},
]
}
虚构应用程序的界面在左侧显示项目列表,当您 select 一个项目时,该项目将变为活动状态,其任务将显示在右侧。单击任务时,您可以在弹出窗口中看到它的注释。
我会做的是使用 1 个商店,"Project Store"。一个动作向服务器发出请求,获取数据并指示商店用新数据填充自己。商店在内部保存这个实体树(项目 -> 任务 -> 注释)。
为了能够根据 select 编辑的项目显示和隐藏任务,我还会在商店中保留一个变量,"activeProjectId"。基于此,视图可以获得活动项目、其任务并呈现它们。
问题已解决。
但是:在网上搜索了一下这是否是一个好的解决方案后,我看到很多人说您应该为每个实体使用一个单独的商店。
这意味着: ProjectStore、TaskStore 和 NoteStore。为了能够管理关联,我可能还需要一个 "TasksByProjectStore" 和一个 "NotesByTaskStore".
有人可以解释一下为什么这样会更好吗?我唯一看到的是管理商店和数据流的大量开销。
使用一家商店或不同商店各有利弊。一些 flux 的实现特别倾向于一个商店来统治它们,可以这么说,而其他的也有利于多个商店。
是一个商店还是多个商店满足您的需求,取决于 a) 您的应用程序的用途,以及 b) 您期望的未来发展或变化。简而言之:
-
如果您主要关心的是嵌套实体之间的依赖关系,
- 一个商店 更好。如果您不太担心服务器-存储-组件之间的单个实体关系之间的依赖关系。一家商店很棒,例如您想在项目级别管理有关基础任务和注释的统计信息。许多类似父子的关系和多合一的数据从服务器获取都倾向于一个存储解决方案。
- 多个商店 如果您主要关心的是服务器-商店-组件之间的单个实体连接之间的依赖关系,则更好。弱的实体到实体关系和独立的单一实体服务器获取和更新有利于多个商店。
在您的情况下:我敢打赌,一家商店更好。你有明显的父子关系,并一次从服务器获取所有项目数据。
稍长的答案:
一家店:
- 非常适合最大限度地减少管理多个商店的开销。
- 如果您的顶视图组件是唯一的有状态组件,并且从商店获取所有数据,并将详细信息分发给无状态子组件,则效果很好。
- 但是,管理实体之间依赖关系的需求并没有简单地消失:您需要在单个商店内管理它们,而不是在不同商店之间管理它们。因此它变得更大(更多代码行)。
- 此外,在典型的通量设置中,每个商店都会发出一个 'I have changed' 事件,并将其留给组件来确定发生了什么变化以及它们是否需要重新渲染。因此,如果您有许多嵌套实体,并且其中一个实体从服务器接收到许多更新,那么您的超级商店会发出许多更改,这可能会触发整个结构和所有组件的大量不必要的更新。 Flux-react 可以处理很多,细节-更改-更新-一切都是它处理得很好的,但它可能不适合每个人的需要(我不得不放弃这种方法,因为它搞砸了我在一个项目中的状态之间的转换)。
多家商店:
- 更多开销,是的,但对于某些项目,您也会得到 returns
- 如果您在服务器数据和组件之间有紧密的耦合,并且在两者之间有 flux 存储,则更容易在单独的存储中分离关注点
- 如果例如您期望对笔记数据结构进行许多更改和更新,而不是拥有一个有状态的笔记组件,它监听笔记存储,反过来处理来自服务器的笔记数据更新。在处理笔记结构的变化时,您可以只关注笔记存储,而无需弄清楚笔记在大型超市中是如何处理的。