Redux 和 RxJS，有什么相似之处吗？

Question

我知道 Redux 比 Flux 更好 "implementation"，或者更确切地说，它是为了简化事情（应用程序状态管理）而进行的重新设计。

我听说过很多关于响应式编程（RxJS）的知识，但我还没有深入学习它。

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

Answer 1

它们是非常不同的东西。

RxJS 可用于响应式编程，是一个非常全面的库，拥有 250 多个运算符。

Redux 与 github 存储库 "Redux is a predictable state container for JavaScript apps" 中所述相同。

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

希望对您有所帮助:)

Answer 2

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

Redux 是一种用于管理整个应用程序状态的工具。它通常用作 UI 的架构。将其视为 Angular.

（一半）的替代品

RxJS 是一个响应式编程库。在JavaScript中，它通常被用作完成异步任务的工具。将其视为 Promises 的替代品。

响应式编程是一种范例（工作和思维方式），其中数据变化是从远处观察。数据未远距离更改。

这里是远距离改变的例子：

// 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() 的原因。 Store 从远处观察动作，并自行改变。而且商店允许其他人从远处观察它的数据。

RxJS 也使用 Reactive 范式，但它不是一种体系结构，而是为您提供基本构建块，Observables，以实现此 "observing from a distance" 模式。

总而言之，为了不同的目的，有很多不同的东西，但分享一些想法。

Answer 3

我只是想添加一些与我 Redux-inspired RxJS-code.

时的实际差异

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

React pure render 函数将仅发送到您通过发送所有 producers/Subjects.

生成事件数据的地方

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

实施中的显着差异：

没有中间件，只有 rxjs 运算符。我认为这是最大的优势和劣势。您仍然可以借鉴概念，但我发现很难从 redux 和 cycle.js 等姐妹社区获得帮助，因为它是另一种自定义解决方案。这就是为什么我需要在本文中写 "I" 而不是 "we"。
没有 switch/case 或操作类型的字符串。你有一个更动态的分离动作的方式。
rxjs可以作为其他地方的工具使用，不包含在状态管理中。
生产者数量少于动作类型（？）。我不确定这一点，但是您可以在 parent 监听 child 组件的组件中做出很多反应。这意味着更少的命令式代码和更少的复杂性。
您拥有解决方案。不需要框架。好和坏。无论如何，您最终都会编写自己的框架。
它更加分形，您可以轻松订阅 sub-tree 或应用程序状态树的多个部分的更改。
- 猜猜做 epics 和 redux-obseravble 有多容易？真的很简单。

我还在努力获得更大的好处，其中 child 组件被描述为流。这意味着我们不必在 reducers 中完成 parent 和 child 状态，因为我们可以 ("just") 递归地组合基于组件结构的状态。

我也考虑过跳过 react 并使用 snabbdom 或其他东西，直到 React 更好地处理反应状态。为什么我们要向上构建我们的状态只是为了再次通过 props 分解它？所以我将尝试使用 Snabbdom 制作此模式的版本 2。

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

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

简而言之：

Redux： 受 Flux 启发的库用于 状态管理。

RxJS: 是另一个Javascript基于反应式编程哲学的库，用来处理"Streams"（Observables等）[阅读关于响应式编程以了解 Stream 概念。

Answer 5

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

RxJS 是响应式编程的工具包。实际上，您可以将应用中发生的每一件事都视为一个流。 RxJS 提供了非常丰富的工具集来管理这些流。

RxJS和Redux在哪里拦截？在 redux 中，你用动作更新你的状态，显然这些动作可以被视为流。使用像 redux-observable 这样的中间件（您不必），您可以以反应方式实现所谓的 "business logic" 。另一件事是你可以从你的 redux store 创建一个 observable，这有时可能比使用增强器更容易。

Redux 和 RxJS，有什么相似之处吗？

Redux & RxJS, any similarities?

javascript

rxjs

redux