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

我知道 Redux 是 Flux 的一个更好的“实现”，或者更好的说法是重新设计以简化事情(应用程序状态管理)。

我听说过很多关于响应式编程(RxJS)的事情，但是我还没有潜水去学习它。

所以我的问题是: 这两种技术之间是否存在交叉点(任何共同点) ，或者它们是互补的？还是完全不一样？

50859 次浏览
小开

它们是完全不同的东西。

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

而 Redux 正如 github repo 中所描述的那样“ Redux 是 JavaScript 应用程序的可预测状态容器”。

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

希望这对你有帮助:)

小开
最佳答案

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

Redux 是一个用于在整个应用程序中管理状态的工具。它通常用作 UI 的体系结构。把它看作是角度的(一半)替代品。

RxJS 是一个响应式编程库。它通常被用作在 JavaScript 中完成异步任务的工具。把它当做承诺的替代品。

响应式编程是一种范式(工作和思考的方式) ，其中数据的变化是 从远处观察，而数据不是 从远处变了。

下面是 从远处变了的一个例子:

// 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 范式，但它不是一个体系结构，而是提供了基本的构建块 可观察到的来完成这种“从远处观察”模式。

总而言之，不同的事情有不同的目的，但是有一些共同的想法。

小开

我只是想添加一些实用的区别，当我做的 RxJS-代码的 Redux 启发。

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

响应纯呈现函数将仅用于通过发送所有生产者/主题来生成事件数据的位置。

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

执行方面的显著差异:

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

  • 动作类型没有开关/大小写或字符串。您有一种更动态的分隔动作的方法。

  • Rxjs 可以用作其他地方的工具，不包含在状态管理中。

  • 生产者的数量少于行动类型(?).我不确定这一点，但是您可以在父组件中听取子组件的许多反应。这意味着更少的命令式代码和更少的复杂性。

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

  • 它更具有分形性，你可以很容易地订阅子树或应用程序状态树的多个部分的更改。

    • 猜猜史诗是多么容易做复原观察做? 真的很容易。

我还致力于更大的收益，其中子组件被描述为流。这意味着我们不需要在 reducers 中完成父状态和子状态，因为我们只需要(“刚好”)根据组件结构递归地组合状态。

我也会考虑跳过反应，使用断裂或其他方法，直到反应能更好地处理反应状态。为什么我们要建设我们的国家只是打破它通过道具呢？因此，我将尝试使用 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
}
}

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

小开

简而言之:

Redux: 用于 国家管理的 Flux 灵感库。

RxjS: 这是另一个基于响应式编程哲学的 Javascript 库，用于处理“ Streams”(可观察数据等)[阅读关于响应式编程的内容来理解 Stream 的概念]。

小开

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

RxjS 是一个响应式编程的工具包。实际上，你可以把应用程序中发生的所有事情想象成一条流。RxJS 提供了一个非常丰富的工具集来管理这些流。

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


提交答案