使用基于反应的应用中还原和回流的核心差异是什么？

Question

最近我进行了一项关于开发电子商务网站的初步研究,发现还原和回流都来自Facebook的通量架构,而且两者都很受欢迎.我对这两者之间的区别感到困惑.

什么时候应该使用redux vs reflux,哪个在电子商务Web应用程序的开发阶段最灵活？

Answer 1

Flux,Reflux和Redux(以及许多其他类似的库)都是处理横向数据管理的不同方法.

基本的React组件可以很好地与父子关系一起使用,但是当你必须提供和更新应用程序中不直接连接的不同部分的数据时,它会变得很快.这些库提供存储和操作(以及其他机制)来维护和更新此类数据.

Flux是Facebook开发的原始解决方案(就像React一样),功能强大,但可能不是最简单或最易读的.回流的开发部分是为了使其更容易和更清晰.主要区别在于,在Reflux中,每个数据都有自己的存储和操作,这使得它非常易读且易于编写.不幸的是,Reflux不再那么积极地开发,作者正在寻找维护者.但总而言之,我认为Reflux是一种更优雅的Flux替代品.

Redux是另一种解决方案,迄今为止已成为最受欢迎的解决方案.它的优点是它为嵌套存储提供了不可变内容,因此您可以轻松实现上一个/下一个功能,并具有对商店的许多部分产生影响的横向操作.redux的缺点是它非常冗长,并且具有比Flux或Reflux更多的概念.对于相同的基本操作,它将需要更多的代码,异步实现并不是最干净的.它绝对强大且可扩展.

这是一个更广泛地讨论它的链接:http://jamesknelson.com/which-flux-implementation-should-i-use-with-react/

Answer 2

我想写另一个答案,重点关注Reflux和Redux之间的具体区别.@Mijamo进入了他们为什么起源于不同事物的核心,如果你有上下文,那么这是一个非常好的总结,但是我从这个问题中明确地从发展的角度来了解两者之间的差异.看到我如何进入并阅读所有内容,我想写一个答案.我将使用更多代码示例更新此答案.

Flux(快速概览)

在我们讨论之前,我认为我们应该记住的一件事是考虑当前的Flux以​​及它当前如何处理使用许多组件或需要管理的许多不同状态的应用程序.这是React NYC的一个非常好的演讲:解决问题的扩展流程和他们到达的解决方案与Reflux和Redux允许你做的事情相差不多,但简而言之,一个大问题是" 我们做什么当我们有一些具有某种共享状态的组件时,他们都需要牢记这些组件？我们如何处理和扩展它？ "最终这些框架得到的答案是,我们需要一个全局状态的概念.不可避免地,两个框架都引入了一些类似的概念来实现这一点,我们将在下面介绍.

因为我需要参考Flux的比较,我只想展示一个快速概述Flux如下图所示:

反流

在Reflux中,没有调度程序,View组件通过操作直接通过组件进行通信.

+---------+       +--------+       +-----------------+
¦ Actions ¦------>¦ Stores ¦------>¦ View Components ¦
+---------+       +--------+       +-----------------+
     ^                                      ¦
     +--------------------------------------+

就它如何与Flux区别开来而言,并没有太多.您仍然可以创建自己的操作并创建自己的商店,并且您仍然可以让商店听取操作.我认为最大的区别在于,为了让View组件直接向商店提交操作而不是通过调度程序,组件有一个store属性,它来自Reflux.Component而不是React.Component因为它有一种直接挂钩的方式一家商店.即这个例子

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>
    }
}

你也有能力连接到多个商店(我相信有一个支持stores带有阵列的支柱,而Reflux也附带能力编辑mapStoreToState,以防你想要具体控制商店如何将状态传递给组件.

当然,因为您使用的是Reflux附带的组件,您应该阅读他们关于Reflux Component的文档以及如何正确地制作组件

最后我要注意的是上面提到的大问题是全局状态,这是如何解决的.Reflux.GlobalState只要您在商店中设置ID,就可以为Reflux 做出贡献.上面的链接更详细地介绍了它,但是通过这个,你可以通过你分配商店的id Reflux.GlobalState.[StoreID].[property]在哪里访问它们,StoreID并且property是你想要访问的实际状态.

终极版

Redux本身改变了很多东西,也杀死了调度员的想法.在我深入研究之前,我想强调他们在文档中提到的三个原则.

1. 唯一的事实来源
2. State是只读的
3. 使用纯函数进行更改

在Redux中,实际上只有一个全局状态需要处理,这就是应用程序的全局状态(解决大问题).虽然您仍然拥有操作和存储,但存储本身只负责在全局状态树中跟踪自己的状态,允许您分派操作以更改状态树,并允许您访问状态.您还可以通过以下方式将听众放在这些商店中subscribe.

这有很大的动力进入前两个原则.在Flux甚至Reflux中,如果你想确保当你不想要的时候没有任何东西改变状态(因为从技术上讲,你可以随时访问和改变商店中的状态),你会依赖于像ImmutableJS这样的东西.确保你没有意外地改变状态.另一方面,Redux使您只能通过存储/选择器访问状态并仅通过调度操作进行更改(第三个原则).

一个有趣的事情是,虽然Reflux和Flux有行动,你会在商店里听,并确定要做什么状态更改,Redux中的商店只是发送一个带有你想要的有效负载的消息然后通过一个巨大的switch语句确定它应该用状态树做什么 - 这就是他们所说的减速器.这与Flux reduce在其商店中的表现没有任何不同,但是Redux将这个概念作为自己的东西撕掉,而你的全局状态树通过了一个rootReducer(Redux附带了一个很好的功能供你combineReducers使用rootReducer).考虑它的一个好方法是你向巨型状态树发送一个变化,然后你想要的任何变化,它会被缩减或压缩到你想要的最终状态.这实际上影响了redux如何设置很多东西,所以它告诉React如何重新渲染(假设你使用Redux和React).

Redux 的数据流在我上面提到的链接中谈得非常好,但是我还附上了一个非常好的信息图

所以核心差异确实存在

• Redux有一种完全不同的状态管理方法 - 它包含了存在全局状态的想法,并且如果你想进行更改,它不可避免地会以非常特定的方式发生(如何处理组件可以访问的状态)什么状态取决于你).
• Reflux确实试图支持组件访问多个商店的能力,而不必改变Flux最初的内容(我想反流是Flux应该是什么).
• Redux真正改变了状态树的管理方式,并为商店提供了不同的职责,并改变了状态信息映射到组件的方式,而Reflux只是简单地撕掉了中间人,这样你就可以让你的组件更容易地访问他们需要的任何商店.

希望这可以更深入地了解它们之间的核心差异.