当前位置: 首页 > 面试题库 >

为什么通过Facebook Flux使用Redux?

严阳成
2023-03-14
问题内容

我已经阅读了这个答案,减少了样板,看了几个GitHub示例,甚至尝试了一点redux(待办事项应用程序)。

据我了解,与传统的MVC架构相比,官方的redux
doc动机
提供了很多优点。但是它没有提供以下问题的答案:

为什么要通过Facebook Flux使用Redux?

这仅仅是编程风格的一个问题:功能性还是非功能性? 还是问题出在redux方法之后的abilities / dev-tools中?也许缩放?还是测试?

如果我说redux对于来自功能语言的人来说是一种助益,那我对吗?

为了回答这个问题,您可以比较实现Redux在通量和Redux上的动机点的复杂性。

以下是来自官方redux
doc动机的
动机点:

  1. 处理乐观更新( 据我了解,这几乎不依赖于第5点。很难在Facebook流量中实现它吗?
  2. 在服务器上渲染( facebook流量也可以做到这一点。与redux相比有什么好处吗?
  3. 在执行路线转换之前获取数据( 为什么无法在facebook流量中实现?有什么好处?
  4. 热重载( React Hot Reload 可能实现 。为什么需要redux?
  5. 撤消/重做功能
  6. 还有其他要点吗?像坚持状态…

问题答案:

Redux作者在这里!

Redux 与Flux 没有 什么 不同。总体而言,它具有相同的架构,但是Redux可以通过使用Flux使用回调注册的功能组合来减少一些复杂性。

Redux并没有根本的区别,但是我发现它使某些抽象更容易实现,或者至少可以实现,这在Flux中很难实现。

减速机组成

以分页为例。我的Flux + React Router示例处理分页,但是该代码很糟糕。令人恐惧的原因之一是 Flux使跨商店重用功能变得不自然。
如果两个商店需要处理分页以响应不同的操作,则它们要么需要从一个公共基础商店继承(糟糕!当您使用继承时,您将自己锁定在一个特定的设计中),或者从内部商店中调用外部定义的函数。事件处理程序,需要以某种方式在Flux商店的私有状态下进行操作。整个过程都是混乱的(尽管绝对是可能的)。

另一方面,由于Redux的组成,Redux分页是很自然的。它是reducer的最下层,因此您可以编写一个reducer工厂,该工厂生成分页减速器,然后在减速器树中使用它。之所以如此简单,是因为
在Flux中存储是平坦的,但是在Redux中,reduce可以通过功能组合来嵌套,就像React组件可以嵌套一样。

此模式还启用了诸如无用户代码undo / redo之类的出色功能。
您能想象两行代码将撤消/重做插入Flux应用程序吗? 几乎不。再次使用Redux,这是归功于减速器组成模式。我需要强调一点,这没有什么新鲜的-
这是Elm Architecture所开创和详细描述的模式,它本身受Flux的影响。

服务器渲染

人们一直在使用Flux在服务器上进行渲染,但是看到我们有20个Flux库,每个库都试图使服务器渲染“更容易”,也许Flux在服务器上有一些粗糙的边缘。事实是,Facebook并没有做太多的服务器渲染,因此他们并不是很在意它,而是依靠生态系统来简化它。

在传统的Flux中,商店是单身人士。这意味着很难为服务器上的不同请求分离数据。不是没有,但是很难。这就是为什么大多数Flux库(以及新的Flux
Utils)现在建议您使用类而不是单例的原因,因此您可以根据请求实例化存储。

在Flux中仍然需要解决以下问题(您自己或在您喜欢的Flux库(例如Flummox或Alt)的帮助下):

  • 如果商店是类,那么如何根据请求使用分派器创建和销毁它们?我什么时候注册商店?
  • 如何合并来自商店的数据,然后在客户端重新补充数据?为此,我需要实现特殊方法吗?

诚然,Flux框架(不是普通的Flux)可以解决这些问题,但我发现它们过于复杂。例如,Flummox要求您在商店中实施serialize()deserialize()。Alt通过提供takeSnapshot()自动序列化JSON树中的状态来更好地解决这一问题。

Redux更进一步: 由于只有一个商店(由许多reducers管理),因此您不需要任何特殊的API来管理(重新)水化。
您不需要“刷新”或“水化”商店-
只需一个商店,您就可以读取其当前状态,或创建具有新状态的新商店。每个请求都会获得一个单独的商店实例。了解有关使用Redux进行服务器渲染的更多信息。

同样,在Flux和Redux中都有可能发生这种情况,但是Flux库通过引入大量API和约定来解决此问题,而Redux甚至不必解决它,因为在由于概念上的简单性而获得了第一名。

开发者经验

实际上,我并没有打算让Redux成为流行的Flux库-
我是在我的ReactEurope演讲中写这篇文章的,当时我正在做时光热装。我有一个主要目标:
可以即时更改减速器代码,甚至可以通过取消操作来“更改过去”,并查看状态是否正在重新计算。

我还没有看到能够执行此操作的单个Flux库。React Hot Loader也不允许您这样做-
实际上,如果您编辑Flux商店,它会中断,因为它不知道如何处理它们。

当Redux需要重新加载化简器代码时,它将调用replaceReducer(),然后应用程序将使用新代码运行。在Flux中,数据和功能在Flux存储中纠缠在一起,因此您不能“仅替换功能”。此外,您还必须以某种方式向Dispatcher重新注册新版本,而Redux甚至没有。

生态系统

Redux具有丰富而快速增长的生态系统。这是因为它提供了一些扩展点,例如中间件。它的设计考虑到了用例,例如日志记录,对Promises的支持,Observables,路由,不变性dev检查,持久性等。并非所有这些工具都将有用,但是很高兴能够使用一组可以轻松组合在一起一起工作的工具。

简单

Redux保留了Flux的所有好处(动作的记录和重放,单向数据流,相关的变异),并增加了新的好处(轻松的撤消重做,热重装),而无需引入Dispatcher和商店注册。

使其保持简单很重要,因为在实现更高级别的抽象时,它可以使您保持理智。

与大多数Flux库不同,Redux
API表面很小。如果您删除了开发人员警告,注释和健全性检查,则为99行。没有棘手的异步代码可调试。

您实际上可以阅读并了解Redux的全部内容。



 类似资料:
  • 问题内容: 我是一个相对较新的程序员,与他告诉我的一个合作伙伴交谈,他说在AJAX之前,他使用iframe来发送数据并更改内容(显然是在JavaScript的帮助下)。 我知道两者都是相似的技术,但是我没有找到描述其特征的文章, 与Iframe相比,AJAX有哪些优势? 编辑 我没有找到任何关于该技术的解释,但是我的搭档告诉我他将数据通过隐藏的iframe发布并提交iframe,听起来好像只需要刷

  • 问题内容: 据我了解,官方的redux doc动机与传统的MVC架构相比具有优势。但是它没有提供以下问题的答案: 为什么要通过Facebook Flux使用Redux? 这仅仅是编程风格的一个问题:功能性还是非功能性?还是问题出在redux方法之后的abilities / dev-tools中?也许缩放?还是测试? 如果我说redux对于来自函数式语言的人来说是一种变化,那我是对的吗? 为了回答这

  • 问题内容: 似乎Hibernate开始在3.5.5版(我们从3.2.7升级)中使用数据类型,而不是使用的属性。 这是造成问题,因为在Oracle数据类型是一个古老的过时的数据类型(参见http://www.orafaq.com/wiki/LONG不应被使用),以及表不能具有一个以上的列作为数据类型。 有谁知道为什么改变了? 我尝试将Oracle 属性设置为true(如[Hibernate>CLOB

  • 问题内容: 我只是想知道为什么我们通常在两个布尔之间使用逻辑 而不是按位,尽管它们都运行良好。 我的意思是,请看以下内容: | | 我们可以|代替使用||吗?与&和相同&&。 问题答案: 如果使用和形式,而不是这些运算符的和形式,则Java不会费心地单独评估右手操作数。 多数情况下,是否要缩短评估是一个问题。 说明短路好处的一个好方法是考虑以下示例。 正如Jeremy和Peter提到的,短路的另一

  • 我了解在lambda中捕获此(修改对象属性)的正确方法如下: 但我对我所看到的以下特点感到好奇: 我感到困惑(并希望得到回答)的奇怪之处在于,为什么以下方法有效: 以及为什么我无法通过引用明确捕获此内容:

  • 我可以使用SQLDeveloper连接到远程数据库。 我试图从命令行使用sqlcl连接到同一个数据库,但我收到一个错误。 下面是我正在运行的命令: 我也尝试过: 以下是我收到的错误: 同样在SQLDeveloper中,我只是在“自定义jdbc url”下输入以下内容,它连接没有任何问题,所以我希望我可以使用相同的URL通过命令行连接,但到目前为止,它不起作用: