最近,我对开发一个Electron 商务网站进行了初步研究,发现reduxreflux都来自Facebook上的flux architecture,而且都很受欢迎.我对两者的区别感到困惑.

我应该在什么时候使用redux和Reflection,在Electron 商务web应用程序的开发阶段,哪种方法最灵活?

推荐答案

我想写另一个答案,重点是反流和Redux之间的具体区别@Mijamo探讨了它们为何起源于不同事物的核心,如果你有背景的话,这是一个非常好的总结,但我来问这个问题是为了从发展的Angular 具体了解两者之间的区别.看到我刚刚进go 读了所有的东西,我想写一个答案.我将用更多的代码示例更新这个答案.

Flux (Quick overview)

在讨论这个问题之前,我认为我们应该记住的一件事是,考虑当前的流量,以及它当前如何处理需要管理的具有许多组件或许多不同状态的应用程序的扩展.这是一个很好的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,如下图:

enter image description here

Reflux

在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

Redux本身改变了很多事情,也扼杀了调度员的 idea .在我深入讨论之前,我想强调一下他们在文档中提到的three principles个.

  1. 唯一的真相来源
  2. 状态是只读的
  3. 改变是通过纯粹的功能来实现的

在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条被讨论得非常好,但我也附上了一张非常好的信息图表

enter image description here

所以核心差异真的很重要

  • Redux has a completely different approach to state management -- it embraces the idea that there is a global state and that inevitably if you wanted to make changes, it should just happen there以非常具体的方式(如何处理哪些组件可以访问哪些状态取决于您).
  • Reflux really tries to support giving components the ability to access multiple stores without having to change too much of what Flux was originally about(我想回流应该是通量).
  • Redux确实改变了状态树的管理方式,并给出了

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

Reactjs相关问答推荐

eslint -无法解析模块的路径@web3modal/ethers/react导入/no-unresolved

如何实现黑暗模式 map ?

为什么我无法访问窗口事件处理程序中的状态?

有没有办法让两个状态在两次精准渲染中更新?

TypeError:SearchProduct.get()获得了意外的关键字参数查询'

获取点击的国家/地区名称react 映射

如何使用useState响应快速/顺序状态更新

如何垂直对齐 React Bootstrap Table 行中的项目

尽管所有页面在 Reactjs 中都是公开的,但始终导航到特定页面

从 MongoDB createAt 字段中分割精确时间

Mui DataGrid 在第二页和前一页上显示项目时出现问题

画布:用鼠标绘制形状时重新绘制整个画布会导致卡顿

为什么这个 React 组件会导致无限渲染?

字段是必需的,当它没有定义时

即使配置了 webpack.config.js,html-loader 也不起作用

如何通过 React JS 中的映射将新元素添加到对象数据数组中

从其他组件切换 FieldSet

在 Formik 表单中访问子组件的值

当父组件重新渲染时做出react ,我失go 了子状态.我错过了什么?

链接的音译 Gatsby JS