当尝试在不同的组件和处理程序方法中管理和访问状态时,我可以使用RxJS vs Redux/context吗?

j2cgzkjk  于 2023-06-23  发布在  其他
关注(0)|答案(5)|浏览(121)

已关闭,此问题需要details or clarity。目前不接受答复。
**想改善这个问题吗?**通过editing this post添加详细信息并澄清问题。

两年前关闭。
这篇文章在12天前被编辑并提交审查。
Improve this question
我知道Redux是Flux的一个更好的“实现”,或者说它是为了简化事情(应用程序状态管理)而重新设计。
我听说过很多关于React式编程(RxJS)的知识,但我还没有深入学习它。
所以我的问题是这两种技术之间是否有任何交集(任何共同点)或互补?……还是完全不同?
Redux和Reach上下文API沿着,是一种创建和管理状态存储的方法,可以通过Redux操作来观察。
RxJS是一种React式编程语言,能够设置和访问不同组件的状态,而无需Redux操作和reducers的开销。
为了管理和访问状态,Redux在哪里作为状态存储而不是响应式编程范式更有用?
为了管理和访问各种组件中的状态,您将如何决定使用其中一个和另一个?

txu3uszq

txu3uszq1#

简而言之,它们是非常不同的库,用于非常不同的目的,但是的,有一些模糊的相似之处。
Redux是一个用于管理整个应用程序状态的工具。它通常用作UI的体系结构。将其视为Angular的替代品。
RxJS是一个React式编程库。它通常用作JavaScript中完成异步任务的工具。把它看作是承诺的替代品。
响应式编程是一种范式(工作和思考的方式),其中数据更改是从远处观察到的。数据不会 * 从远处 * 改变。
下面是一个从距离 * 更改的 * 示例:

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

控制器中的 Model is changed
下面是一个从距离观察到的 * 的例子:

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

在Logger中,我们观察Store中发生的数据更改(从远处),并写入控制台。
Redux使用了一点Reactive范式:商店是React性的。您不能从远处设置其内容。这就是为什么Redux中没有store.set()。商店从远处观察行为,并改变自己。商店允许其他人从远处观察它的数据。
RxJS也使用Reactive范式,但它不是一个架构,而是提供了基本的构建块 Observables,来实现这种“从远处观察”模式。
总之,非常不同的事情,不同的目的,但分享一些想法。

quhf5bfb

quhf5bfb2#

它们是非常不同的东西。
RxJS可以用来做React式编程,是一个非常完整的库,有250多个操作符。
Redux在github repo中描述了“Redux是JavaScript应用程序的可预测状态容器”。
Redux只是一个处理应用程序中状态的工具。但相比之下,你可以在RxJS中构建一个完整的应用程序。
希望这有帮助:)

nnsrf1az

nnsrf1az3#

Redux只是一个状态管理库,具有定义良好的更新操作标准。只要你坚持标准,你就可以保持你的数据流的理智和易于推理。它还带来了使用中间件和存储增强器增强数据流的能力。
RxJS是一个响应式编程工具包。实际上,您可以将应用程序中发生的每一件事都视为一个流。RxJS提供了一个非常丰富的工具集来管理这些流。

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

x3naxklr

x3naxklr4#

简而言之:

Redux:Flux library,用于状态管理
**RxJS:**它是另一个基于响应式编程哲学的JavaScript库,用于处理“流”(Observables等)[阅读有关响应式编程的内容以了解流概念]。

jpfvwuh4

jpfvwuh45#

我只是想添加一些与我做Redux启发的RxJS代码时的实用差异。
我将每个操作类型Map到一个Subject示例。每个有状态组件都有一个Subject,然后Map到一个reducer函数。所有reducer流与merge合并,然后scan输出状态。默认值是在scan之前用startWith设置的。我使用publishReplay(1)表示状态,但以后可能会删除它。
react pure render函数将只放置在您通过发送所有生产者/主题来产生事件数据的位置。
如果您有子组件,则需要描述如何将这些状态组合到您的组件中。combineLatest可能是一个很好的起点。
实施方面的显著差异:

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

我还在研究子组件被描述为流的更大好处。这意味着我们不必在归约器中复杂父状态和子状态,因为我们可以基于组件结构递归地合并状态。
我还考虑跳过react,使用snabbdom或其他东西,直到React更好地处理React状态。为什么我们要建立我们的国家向上只是为了打破它通过 prop 再次?因此,我将尝试使用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
  }
}

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

相关问题