Redux 和 RxJS，有啥相似之处吗？ [关闭]

Posted 2023-02-16

【中文标题】Redux 和 RxJS，有啥相似之处吗？ [关闭]

【英文标题】：Redux & RxJS, any similarities? [closed]Redux 和 RxJS，有什么相似之处吗？ [关闭]

【发布时间】：2016-04-02 12:40:57

【问题描述】：

我知道 Redux 是对 Flux 更好的“实现”，或者说它是为了简化事物（应用程序状态管理）而进行的重新设计。

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

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

【参考方案1】：

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

Redux 是一个用于管理整个应用程序状态的工具。它通常用作 UI 的架构。将其视为（一半）Angular 的替代品。

RxJS 是一个反应式编程库。它通常用作在 javascript 中完成异步任务的工具。将其视为 Promises 的替代方案。

---

反应式编程是一种范式（工作和思维方式），其中远距离观察数据变化。数据不会远距离改变。

这是一个从远处改变的例子：

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

Model 已从 Controller 更改。

这是一个远距离观察的例子：

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

在 Logger 中，我们（远距离）观察 Store 中发生的数据变化，并写入控制台。

---

Redux 稍微使用了响应式范式：Store 是响应式的。您不会从远处设置其内容。这就是 Redux 中没有 store.set() 的原因。商店从远处观察动作，并改变自己。 Store 允许其他人从远处观察它的数据。

RxJS 也使用 Reactive 范式，但它不是一种架构，而是为您提供基本的构建块，Observables，以完成这种“远距离观察”模式。

总之，为了不同的目的，非常不同的事情，但分享一些想法。

【讨论】：

不，你不应该一起使用它们。人们已经使用 Rx 模拟了 Redux。一个快速的谷歌会为你找到例子。如果你想为你的反应式 UI 使用 Rx，请查看 Cycle.js，Andre 的框架。我最近一直在使用它，它很棒。 API 最近发生了很大变化，但我相信他终于开始冻结部分 API。

根据official redux docs 的说法，“他们合作得很好。”

他们合作得很好！有一个 Redux 中间件让您有机会使用 RxJS 和 Observables 进行 Redux 操作。 github.com/redux-observable/redux-observable另外我写了一篇关于如何做的博客文章：robinwieruch.de/redux-observable-rxjs

Redux 范式帮助我的 android 项目代码库更具响应性。我们的数据流来自按钮和其他字段以更新状态，与 RxJava 结合使用，增强了我们的可读性和性能。这些库确实可以很好地结合在一起，并且它们的好处与语言无关。

它们可以很好地协同工作，但实际上 Reactive 可以为您做 Redux 会做的事情 - 将组件的状态同步到模型，因此通常使用两者并没有多大意义

【参考方案2】：

它们是非常不同的东西。

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

Redux 就像 github 存储库“Redux 是 JavaScript 应用程序的可预测状态容器”中所述。

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

希望这会有所帮助:)

【讨论】：

你的回答也很好@cmdv。我写的时候没看到。

Rxjs 可以与 React native 一起使用吗？

【参考方案3】：

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

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

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

【参考方案4】：

简而言之：

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

RxJS：它是另一个基于响应式编程哲学的 Javascript 库，用于处理“流”（Observables 等）[阅读响应式编程以了解流概念]。

【参考方案5】：

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

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

react pure render 函数将仅用于通过发送所有生产者/主题来生成事件数据的地方。

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

在实现上的显着差异：

没有中间件，只有 rxjs 操作符。我认为这是最大的力量和弱点。你仍然可以借用概念，但我发现很难从 redux 和 cycle.js 等姐妹社区获得帮助，因为它是另一种自定义解决方案。这就是为什么我需要在本文中写“我”而不是“我们”。

没有用于操作类型的开关/大小写或字符串。您有一种更动态的方式来分离动作。

rxjs 可以在别处用作工具，不包含在状态管理中。

生产者数量少于操作类型（？）。我不确定这一点，但是您可以在监听子组件的父组件中做出许多反应。这意味着更少的命令式代码和更少的复杂性。

您拥有解决方案。不需要框架。好和坏。无论如何，您最终都会编写自己的框架。

它更加分形，您可以轻松订阅来自子树或应用状态树多个部分的更改。

猜猜像 redux-observble 那样制作史诗是多么容易？真的很简单。

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

我还考虑跳过 react 并使用 snabbdom 或其他方法，直到 React 更好地处理响应状态。为什么我们应该向上构建我们的状态只是为了再次通过道具分解它？所以我会尝试用 Snabbdom 制作这个模式的第 2 版。

这是一个更高级但更小的 sn-p，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
  

虽然代码可能不会单独说明太多，但它显示了如何向上构建状态，以及如何轻松生成动态事件。付出的代价是你需要理解不同风格的代码。我愿意为此付出代价。

【讨论】：

一年过去了，我才找到你的答案，认为它仍然有效！我做了类似的事情并同意你的所有观点。但无论如何，一个问题：你今天仍然这么认为，还是从那以后你继续前进？

我需要修改对 Redux 中 switch/case 和 action 类型的批评。我仍然以相同的方式编写代码，但尝试研究如何让它在服务器端工作。当谈到 React 代码时，我设法做了一个小工具来帮助创建 reducer/updater。所以我仍然在做同样的事情，但更精致一些。最大的变化是我让每个叶子节点在 componentDidMount 上订阅流并在 componentDidUnmount 上取消订阅。我也想获得一个在前端和后端工作的反应式服务层。在那里取得进展。