Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/450.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 为什么在flux应用程序体系结构中每个实体使用一个存储?_Javascript_Reactjs_Reactjs Flux_Flux - Fatal编程技术网

Javascript 为什么在flux应用程序体系结构中每个实体使用一个存储?

Javascript 为什么在flux应用程序体系结构中每个实体使用一个存储?,javascript,reactjs,reactjs-flux,flux,Javascript,Reactjs,Reactjs Flux,Flux,我正在一个项目中使用reactjs和flux架构。我对如何将嵌套数据正确地分解到存储中以及为什么要将数据分解到多个存储中感到困惑 为了解释这个问题,我将使用以下示例: 想象一个有项目的Todo应用程序。每个项目都有任务,每个任务都可以有注释 应用程序使用REST api检索数据,并返回以下响应: { projects: [ { id: 1, name: "Action Required", tas

我正在一个项目中使用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"
                        }
                    ]
                }
            ]
        },
    ]
}
虚拟应用程序的界面在左侧显示项目列表,当您选择一个项目时,该项目变为活动项目,其任务显示在右侧。单击任务时,可以在弹出窗口中看到其注释

我要做的是使用一个单独的商店,即“项目商店”。一个操作向服务器发出请求,获取数据并指示存储用新数据填充自身。存储在内部保存此实体树(项目->任务->注释)

为了能够根据选择的项目显示和隐藏任务,我还需要在存储中保留一个变量“activeProjectId”。基于此,视图可以获取活动项目及其任务并进行渲染

问题解决了

然而:在网上搜索了一下,看看这是否是一个好的解决方案后,我看到很多人说你应该为每个实体使用一个单独的商店

这意味着: ProjectStore、TaskStore和NoteStore。为了能够管理关联,我可能还需要一个“TasksByProjectStore”和一个“NotesByTaskStore”


有人能解释一下为什么这样更好吗?我唯一看到的是在管理存储和数据流方面的大量开销。

使用一个存储或不同的存储有利弊。可以说,flux的一些实现特别支持一个存储来管理所有存储,而其他实现也支持多个存储

一个商店或多个商店是否适合您的需要,取决于a)您的应用程序的功能,以及b)您预期的未来发展或变化。简言之:

  • 如果关键问题是嵌套实体之间的依赖关系,则最好使用一个存储。而且,若您不太担心单个实体之间的依赖关系,那个么服务器存储组件之间的关系。如果您想在项目级别管理关于底层任务和注释的统计信息,那么一个存储区是非常好的。许多父子关系和一体式数据获取表单服务器都支持一个存储解决方案
  • 如果您主要关心的是服务器存储组件之间的单个实体连接之间的依赖关系,则多个存储会更好。弱的实体到实体关系和独立的单个实体服务器获取和更新有利于多个存储
在你的情况下:我打赌一家店更好。您具有明显的父子关系,并且一次从服务器获取所有项目数据

较长的答案是:

一家商店:

  • 最大限度地减少管理多个商店的开销
  • 如果您的top view组件是唯一有状态的组件,并且从存储中获取所有数据,并将详细信息分发给无状态的子级,那么它工作得很好
  • 然而,管理实体之间的依赖关系的需要并不是简单地消失:您需要在单个存储中管理实体,而不是在不同存储之间管理实体。因此会变得更大(更多的代码行)
  • 此外,在典型的flux设置中,每个存储都会发出一个“我已更改”事件,并让组件自行确定更改了什么以及是否需要重新渲染。因此,如果您有许多嵌套实体,并且其中一个实体从服务器接收到许多更新,那么您的超级商店将发出许多更改,这可能会触发整个结构和所有组件的大量不必要的更新。Flux react可以处理很多事情,而细节更改更新一切都是它能够很好地处理的,但它可能不适合每个人的需要(当它破坏了一个项目中状态之间的转换时,我不得不放弃这种方法)
多个商店:

  • 更多的开销,是的,但是对于一些项目,你也会得到回报
  • 如果您在服务器数据和组件之间有紧密的耦合,并且中间有flux存储,那么在单独的存储中分离关注点就更容易了
  • 例如,如果您希望notes数据结构发生许多更改和更新,则更容易为notes提供一个有状态组件,该组件侦听notes存储,进而处理来自服务器的notes数据更新。在处理notes结构中的更改时,您可以只关注notes store,而不必了解在某个大型超市中如何处理notes

我今天意识到我从未对你的答案发表过评论。谢谢,我最终使用了一个商店,因为应用程序不是很复杂。