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/

我想写另一个答案,重点是Reflux和Redux之间的具体区别@Mijamo深入探讨了为什么它们起源于不同的事物,如果你有背景的话,这是一个很好的总结,但我提出这个问题是为了从发展的角度具体了解两者之间的区别。考虑到我刚刚进去读了所有的东西,我想写一个答案。我将用更多的代码示例更新这个答案。

通量(快速概述)

在我们开始讨论之前,我认为我们应该记住的一件事是考虑当前的Flux,以及它当前如何处理具有许多组件或需要管理的许多不同状态的应用程序的扩展。这是一个相当好的 talk at React NYC: Scaling Flux 这就是问题所在,他们得出的解决方案与Reflux和Redux允许你做的事情相差不远,但简而言之,一个大问题是“ 当我们的组件都有一些共享状态,它们都需要记住时,我们该怎么办?我们如何处理和扩展它? “最终,许多这些框架得出的答案是,我们需要这种全球状态的概念。不可避免地,这两个框架都引入了一些类似的概念来实现这一点,我们将在下面进行讨论。

因为我需要参考Flux的比较,所以我只想展示一个 quick overview way Flux works 如下图所示:

回流

在Reflux中,没有调度程序,视图组件通过动作直接通过组件进行通信。

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

就它与Flux的区别而言,没有太多。你仍然可以创建自己的动作,创建自己的商店,你仍然可以让你的商店监听动作。我认为最大的区别是,为了让View组件直接向存储提交操作,而不是通过分派器,components有一个存储属性,该属性来自 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>
    }
}

你也有能力进入多个商店(我相信有一个道具叫做 stores 它需要一个数组,Reflux也附带了编辑功能 mapStoreToState 如果您想具体控制商店如何将状态传递给组件。

当然,因为您正在使用Reflux附带的组件,所以您可能应该阅读 documentation on Reflux Component 以及如何正确制作组件

我要注意的最后一件事是,上面我提到了一个大问题,那就是全球状态,这是如何解决的。回流确实具有 Reflux.GlobalState 只要您在Stores上设置id,就可以对其进行贡献。上面的链接详细介绍了它,但有了它,您可以通过 Reflux.GlobalState.[StoreID].[property] 哪里 StoreID 是您分配给商店的id property 是您要访问的实际状态。

重做(Redux)

Redux本身改变了很多事情,也扼杀了调度器的想法。在我深入研究之前,我想强调一下 three principles 他们在文档中提到。

1. 单一真相来源
2. 状态为只读
3. 使用纯函数进行更改

在Redux中,实际上只有一个全局状态需要处理,那就是应用程序的全局状态(解决大问题)。虽然您仍然有操作和存储,但存储本身只是负责在全局状态树中跟踪自己的状态,允许您调度操作以更改状态树,并允许您访问状态。您还可以通过 subscribe .

这其中的一个主要动机是前两个原则。在Flux甚至Reflux中,如果你想确保没有什么东西在你不想改变的时候改变了状态(因为技术上你可以随时访问和改变商店中的状态),你可以依赖于这样的东西 ImmutableJS 以确保你没有意外地改变状态。另一方面,Redux使得您只能通过存储/选择器访问状态,并且只能通过调度操作进行更改(第三条原则)。

需要注意的一件有趣的事情是,虽然Reflux和Flux有一些动作,你可以在存储区中监听并确定要做什么状态更改,但Redux中的存储区只需发送一条带有你想要的有效载荷的消息,然后通过一个巨大的switch语句来确定它应该对状态树做什么——这就是他们所说的 减速器 .这与Flux没有什么不同 reduce 但Redux将这个概念撕成了自己的东西,您的全局状态树将通过 rootReducer (Redux为您提供了一个很好的功能 combineReducers 并制作一个 根减速机 ). 考虑这个问题的一个好方法是,将一个更改发送到巨型状态树,然后无论您想要什么更改,它都会被缩减或压缩到您想要的最终状态。这实际上影响了redux如何设置很多东西,因此它告诉React如何重新渲染(假设您正在使用redux和React)。

这个 data flow 在我上面提到的链接中,Redux的讨论非常好,但我也附上了一个非常好的信息图

所以核心差异是

• Redux对状态管理有一种完全不同的方法——它接受了这样一种观点,即存在一个全局状态,如果你想进行更改,就必须在那里进行 以非常具体的方式(如何处理哪些组件可以访问哪些状态取决于您)。
• Reflux确实试图支持让组件能够访问多个商店,而无需对Flux最初的功能做太多更改 (我认为回流是Flux应该有的)。
• Redux确实改变了状态树的管理方式 存储不同的职责,并更改状态信息的方式 被映射到组件,而Reflux只是将 中间人,这样你就可以让你的组件访问任何商店 他们需要更容易地做到这一点。

希望这能让我们更深入地了解它们之间的核心差异。