最近,我对开发一个Electron 商务网站进行了初步研究,发现redux和reflux都来自Facebook上的flux architecture,而且都很受欢迎.我对两者的区别感到困惑.
我应该在什么时候使用redux和Reflection,在Electron 商务web应用程序的开发阶段,哪种方法最灵活?
最近,我对开发一个Electron 商务网站进行了初步研究,发现redux和reflux都来自Facebook上的flux architecture,而且都很受欢迎.我对两者的区别感到困惑.
我应该在什么时候使用redux和Reflection,在Electron 商务web应用程序的开发阶段,哪种方法最灵活?
我想写另一个答案,重点是反流和Redux之间的具体区别@Mijamo探讨了它们为何起源于不同事物的核心,如果你有背景的话,这是一个非常好的总结,但我来问这个问题是为了从发展的Angular 具体了解两者之间的区别.看到我刚刚进go 读了所有的东西,我想写一个答案.我将用更多的代码示例更新这个答案.
在讨论这个问题之前,我认为我们应该记住的一件事是,考虑当前的流量,以及它当前如何处理需要管理的具有许多组件或许多不同状态的应用程序的扩展.这是一个很好的talk at React NYC: Scaling Flux个问题,他们得出的解决方案与Reflux和Redux允许你做的事情相差不远,但简而言之,一个大问题是"What do we do when we have components that have some shared state that they all need to keep in mind of? How do we handle and scale that?".很多框架最终得出的答案是我们需要一个全球国家的概念.不可避免地,这两个框架都引入了一些类似的概念来实现这一点,我们将在下面进行讨论.
因为我需要参考通量的比较,我只想展示一个quick overview way Flux works,如下图:
在Reflow中,没有dispatcher,视图组件通过动作直接通过组件进行通信.
+---------+ +--------+ +-----------------+
¦ Actions ¦------>¦ Stores ¦------>¦ View Components ¦
+---------+ +--------+ +-----------------+
^ ¦
+--------------------------------------+
就它与流量的区别而言,没有太多区别.你仍然可以创建自己的行动和store ,你仍然可以让store 倾听行动.我认为最大的区别在于,为了让视图组件直接向存储提交操作,而不是通过调度器,组件有一个存储属性,该属性是从Reflux.Component
扩展而来的,而不是从React.Component
扩展而来,因此它可以直接连接到存储.i、 e.这个例子
class MyComponent extends Reflux.Component
{
constructor(props)
{
super(props);
this.state = {}; // our store will add its own state to the component's
this.store = StatusStore; // <- just assign the store class itself
}
render()
{
var flag = this.state.flag; // <- flag is mixed in from the StatusStore
return <div>User is {flag}</div>
}
}
您还可以连接到多个存储(我相信有一个props 叫做stores
,它接受一个数组,如果您想具体控制存储如何将状态传递给组件,还可以附带edit mapStoreToState
.
当然,因为你使用的是回流随附的组件,你可能应该阅读他们的documentation on Reflux Component,以及如何正确制作组件
我要注意的最后一件事是,我在上面提到了一个大问题,那就是全球国家,以及这个问题是如何解决的.回流确实有一个Reflux.GlobalState
,只要你在你的store 里设置ID就可以贡献.上面的链接更详细,但有了它,你可以通过Reflux.GlobalState.[StoreID].[property]
访问它们,其中StoreID
是你分配给store 的id,property
是你想要访问的实际状态.
Redux本身改变了很多事情,也扼杀了调度员的 idea .在我深入讨论之前,我想强调一下他们在文档中提到的three principles个.
在Redux中,实际上只有一个全局状态需要处理,那就是应用程序的全局状态(解决大问题).虽然仍有操作和存储,但存储本身只负责在全局状态树中跟踪自己的状态,允许您调度操作以更改状态树,并允许您访问状态.你也可以通过subscribe
在这些store 里放置听众.
这一点的主要动机在于前两个原则.在流量甚至回流中,如果你想确保在你不想的情况下没有任何东西在改变状态(因为从技术上讲,你可以随时访问和更改store 中的状态),你就需要依靠ImmutableJS之类的东西来确保你没有意外地改变状态.另一方面,Redux使之成为只能通过存储/ Select 器访问状态,并且只能通过调度操作进行更改(第三个原则).
值得注意的一件有趣的事情是,当回流和流量发生变化时,你会在store 里倾听并决定状态变化的动作,Redux中的存储只需发送一条带有所需负载的消息,然后通过一个巨大的switch语句来确定它应该对状态树做什么——这就是他们所说的reducer.这和Fluxstore 里有reduce
个没有什么不同,但Redux将这个概念作为自己的东西剥离出来,并且你的全局状态树经过rootReducer
(Redux附带了一个很好的函数,可以让你达到combineReducers
,并生成rootReducer
).思考这个问题的一个好方法是,向巨型状态树发送一个更改,然后,无论您想要什么更改,它都会被缩减或压缩到您想要的最终状态.这实际上会影响redux设置很多东西的方式,因此它会告诉React如何重新加载(假设您将redux与React一起使用).
在我上面提到的链接中,Redux的data flow条被讨论得非常好,但我也附上了一张非常好的信息图表
所以核心差异真的很重要
希望这能让我们更深入地了解它们之间的核心差异.