Question

我知道Redux是一个更好的＆＃34;实现＆＃34; Flux，或者更好地说它是为了简化事情而重新设计（应用程序状态管理）。

我听过很多关于反应式编程（RxJS）的内容，但我还没有去学习它。

所以我的问题是：这两种技术之间是否有任何交集（任何共同点）或它们是互补的？ ......还是完全不同？

Answer 1

简而言之，它们是非常不同的库，但是有一些模糊的相似之处。

Redux是一个在整个应用程序中管理状态的工具。它通常用作UI的体系结构。可以把它想象成（Angular的一半）的替代品。

RxJS是一个反应式编程库。它通常用作在JavaScript中完成异步任务的工具。把它想象成Promise的替代品。

反应式编程是一种范式（工作和思考方式），从远处观察数据变化。数据不是从远处更改。

以下是从远处更改的示例：

// In the controller.js file
model.set('name', 'George');

从控制器更改模型。

以下是从远处观察的示例：

// logger.js
store.subscribe(function (data) {
    console.log(data);
});

在Logger中，我们观察Store（从远处）发生的数据更改，并写入控制台。

Redux稍微使用了Reactive范例：Store是被动的。您没有从远处设置其内容。这就是Redux中没有store.set()的原因。商店从远处观察行动，并自行改变。商店允许其他人远距离观察其数据。

RxJS也使用Reactive范例，但它不是一个体系结构，它为您提供了基本的构建块 Observables ，以实现这种“从远处观察”模式。

总结一下，为了不同的目的，有很多不同的东西，但是分享一些想法。

Answer 2

他们是非常不同的东西。

RxJS可用于执行反应式编程，是一个包含250多个运营商的非常全面的库。

Redux与github repo＆＃34相同; Redux是JavaScript应用程序的可预测状态容器＆＃34;。

Redux只是一个处理应用程序状态的工具。但相比之下，你可以在RxJS中构建一个完整的应用程序。

希望这会有所帮助：）

Answer 3

我只是想在添加Redux启发的RxJS代码时添加一些实用的差异。

我将每个操作类型映射到Subject实例。每个有状态组件都有一个Subject，然后映射到reducer函数。所有reducer流与merge组合，然后scan输出状态。默认值在startWith之前设置为scan。我将publishReplay(1)用于状态，但稍后可能会将其删除。

react pure render函数将仅通过发送所有生成器/主题来放置生成事件数据的位置。

如果您有子组件，则需要描述这些状态如何组合到您的组件中。 combineLatest可能是一个很好的起点。

实施方面的显着差异：

没有中间件，只有rxjs运营商。我认为这是最大的力量和弱点。您仍然可以借用概念，但我发现很难从诸如redux和cycle.js这样的姐妹社区获得帮助，因为它是另一种自定义解决方案。这就是为什么我需要在本文中写“我”而不是“我们”。
没有用于操作类型的开关/案例或字符串。你有一种更动态的分离行动方式。
rxjs可以在其他地方用作工具，不包含在州管理中。
生产者数量少于行动类型（？）。我不确定这一点，但你可以在监听子组件的父组件中有很多反应。这意味着更少的命令性代码，并且复杂性更低。
您拥有解决方案。不需要框架。好和坏。无论如何，你最终都会编写自己的框架。
它更具分形性，您可以轻松地从子树或应用程序状态树的多个部分订阅更改。
- 猜想像redux-obseravble那样做史诗是多么容易？真的很容易。

我还在努力将子组件描述为流的更大的好处。这意味着我们不必在reducers中收集父子状态，因为我们可以（“只是”）基于组件结构递归地组合状态。

我还考虑跳过反应并使用snabbdom或其他东西，直到React更好地处理反应状态。为什么我们要建立自己的状态只是为了再次通过道具打破它？因此，我将尝试使用Snabbdom制作此模式的第2版。

这是一个更高级但很小的片段，其中state.ts文件构建状态流。这是ajax-form组件的状态，它获取具有验证规则和css样式的字段（输入）对象。在这个文件中，我们只使用字段名称（对象键）将所有子状态组合成表单状态。

export default function create({
  Observable,
  ajaxInputs
}) {
  const fieldStreams = Object.keys(ajaxInputs)
  .map(function onMap(fieldName) {
    return ajaxInputs[fieldName].state.stream
    .map(function onMap(stateData) {
      return {stateData, fieldName}
    })
  })

  const stateStream = Observable.combineLatest(...fieldStreams)
  .map(function onMap(fieldStreamDataArray) {
    return fieldStreamDataArray.reduce(function onReduce(acc, fieldStreamData) {
    acc[fieldStreamData.fieldName] = fieldStreamData.stateData
    return acc
  }, {})
  })

  return {
    stream: stateStream
  }
}

虽然代码可能没有多少孤立，但它显示了如何构建状态向上，以及如何轻松地生成动态事件。付出的代价是你需要了解不同风格的代码。而且我喜欢付出这个代价。

Answer 4

You can "implement" Redux in one line of RxJS。如果您因为其他原因（为了承诺皮肤，在服务器和客户端上使用它）而考虑Rx，那么跳过Redux并转到所有Rx。

Answer 5

简而言之：

Redux：用于州管理的Flux灵感库。

RxJS：这是另一个基于反应式编程理念的Javascript库，用于处理＆＃34; Streams＆＃34; （Observables等）[阅读Reactive Programming以了解Stream概念]。

Answer 6

Redux 是一个状态管理库，带有定义明确的更新操作标准。只要您遵守标准，就可以使数据流保持理智并易于推理。它还具有使用中间件和存储增强器增强数据流的功能。

RxJS 是用于反应式编程的工具包。实际上，您可以将应用程序中发生的所有事情视为流。 RxJS提供了非常丰富的工具集来管理这些流。

RxJS和Redux拦截在哪里？在redux中，您可以使用操作来更新状态，并且显然这些操作可以视为流。使用像redux-observable这样的中间件（您不必这样做），您可以以被动方式实现所谓的“业务逻辑”。另一件事是，您可以在redux存储中创建一个可观察对象，有时可能比使用增强器容易。

Redux＆amp; RxJS，有什么相似之处吗？

6 个答案: