Answers:
简而言之,它们是出于完全不同的目的而完全不同的库,但是是的,存在一些模糊的相似之处。
Redux是用于管理整个应用程序状态的工具。它通常用作UI的体系结构。可以将其视为Angular的替代(一半)。
RxJS是一个反应式编程库。它通常用作在JavaScript中完成异步任务的工具。可以将其视为Promises的替代方案。
响应式编程是一种从远处观察到数据变化的范例(工作和思考的方式)。数据不会远距离改变。
这是远距离改变的例子:
// In the controller.js file
model.set('name', 'George');
该模型被改变从控制器。
这是从远处观察到的示例:
// logger.js
store.subscribe(function (data) {
console.log(data);
});
在记录器中,我们观察存储中发生的数据更改(从远处),并将其写入控制台。
Redux仅使用了Reactive范式:Store是反应式的。您不能远距离设置其内容。这就是为什么store.set()
Redux中没有。商店从远处观察动作,并自行更改。并且商店允许其他人从远处观察其数据。
RxJS还使用了Reactive范式,但它不是体系结构,而是为您提供了基本的构建基块Observables,以完成这种“从远处观察”的模式。
总而言之,出于不同的目的,有截然不同的事物,但有一些共同点。
他们是完全不同的东西。
RxJS可用于进行响应式编程,它是一个非常全面的库,具有250多个运算符。
github库中描述了Redux,“ Redux是JavaScript应用程序的可预测状态容器”。
Redux只是处理应用程序状态的工具。但是相比之下,您可以仅使用RxJS来构建完整的应用程序。
希望这可以帮助 :)
Redux只是一个状态管理库,带有定义明确的更新操作标准。只要遵守标准,就可以使数据流保持理智并易于推理。它还带来了使用中间件和存储增强器增强数据流的能力。
RxJS是用于反应式编程的工具包。实际上,您可以将应用程序中发生的所有事情视为流。RxJS提供了非常丰富的工具集来管理这些流。
RxJS和Redux拦截在哪里?在redux中,您可以使用操作来更新状态,显然这些操作可以视为流。使用像redux-observable这样的中间件(您不必这样做),您可以以被动方式实现所谓的“业务逻辑”。另一件事是,您可以从redux存储中创建一个可观察对象,这有时可能比使用增强器容易。
我只是想添加一些与Redux启发的RxJS代码时的实际差异。
我将每种操作类型映射到Subject实例。每个有状态组件都将具有一个Subject,然后将其映射到一个reducer函数。所有reducer流都与合并,merge
然后scan
输出状态。默认值设置startWith
为scan
。我曾经使用publishReplay(1)
过状态,但以后可能会删除它。
react pure render函数将仅用于通过发送所有生产者/对象来产生事件数据的地方。
如果您有子组件,则需要描述这些状态如何组合到您的子组件中。combineLatest
可能是一个很好的起点。
实施方面的显着差异:
没有中间件,只有rxjs运算符。我认为这是最大的力量和弱点。您仍然可以借用概念,但是我发现很难从姐妹社区(例如redux和cycle.js)获得帮助,因为它是另一种自定义解决方案。这就是为什么我需要在本文中写“ I”而不是“ we”。
动作类型没有开关/大小写或字符串。您可以采用更加动态的方式来分离动作。
rxjs可以在其他地方用作工具,并且不包含在状态管理中。
生产者数量少于动作类型(?)。我对此不确定,但是您可以在侦听子组件的父组件中有很多反应。这意味着更少的命令性代码和更少的复杂性。
您拥有解决方案。无需框架。好和坏。您将最终以任何方式编写自己的框架。
它是分形的,您可以轻松地从子树或应用程序状态树的多个部分订阅更改。
我还在研究更大的好处,其中子组件被描述为流。这意味着我们不必在化简器中包含父状态和子状态,因为我们可以(“公正”)基于组件结构来递归组合状态。
我还考虑跳过反应,并采取镇压措施或其他措施,直到React更好地处理反应状态。我们为什么要向上建立我们的国家,以便再次通过道具分解它?因此,我将尝试使用Snabbdom制作此模式的版本2。
这是一个更高级的小片段,其中state.ts文件用于构建状态流。这是ajax形式的组件的状态,该状态获取具有验证规则和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
}
}
尽管代码可能不会孤立地讲很多,但它显示了如何向上构建状态以及如何轻松生成动态事件。需要付出的代价是您需要了解不同的代码风格。我喜欢为此付出代价。