web-dev-qa-db-ja.com

ReduxとRxJS、類似点はありますか？

ReduxがFluxのより良い「実装」であること、または物事を単純化するための再設計（アプリケーション状態管理）であると言う方が良いことを知っています。

リアクティブプログラミング（RxJS）について多くのことを聞きましたが、まだ学習するために飛び込みませんでした。

だから私の質問は次のとおりです。この2つの技術の間に共通点はありますか、それとも補完的なものですか。 ...またはまったく違う？

javascriptrxjsredux
96
Oswaldo

要するに、それらは非常に異なる目的のための非常に異なるライブラリですが、はい、あいまいな類似点がいくつかあります。

Reduxは、アプリケーション全体の状態を管理するためのツールです。通常、UIのアーキテクチャとして使用されます。 Angular（の半分）の代替と考えてください。

RxJSは、リアクティブプログラミングライブラリです。通常、JavaScriptで非同期タスクを実行するためのツールとして使用されます。 Promisesに代わるものと考えてください。

リアクティブプログラミングは、データの変化が遠くから観察されるであるパラダイム（作業と思考の方法）です。データは距離から変更ではありません。

距離から変更の例を次に示します。

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

モデルが変更されます Controllerから。

遠くから見たの例を次に示します。

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

ロガーでは、Storeで発生するデータの変化を（離れたところから）観察し、コンソールに書き込みます。

ReduxはReactiveパラダイムをほんの少し使用します。Storeはリアクティブです。そのコンテンツを遠くから設定しないでください。 Reduxにはstore.set()がないのはそのためです。ストアは遠くからアクションを観察し、変化します。また、ストアでは、他の人が遠くからデータを観察できます。

RxJSはReactiveパラダイムも使用しますが、アーキテクチャである代わりに、基本的な構成要素Observablesを提供して、この「遠方からの観察」パターンを実現します。

結論としては、目的が異なると非常に異なるものになりますが、いくつかのアイデアを共有します。

160
André Staltz

それらは非常に異なるものです。

RxJSは、リアクティブプログラミングを行うために使用でき、250以上の演算子を持つ非常に徹底的なライブラリです。

また、Reduxはgithubリポジトリ「ReduxはJavaScriptアプリの予測可能な状態コンテナーです」で説明されています。

Reduxは、アプリの状態を処理するための単なるツールです。ただし、比較すると、RxJSだけで完全なアプリを構築できます。

お役に立てれば ：）

29
cmdv

要するに：

Redux：フラックスに影響を受けたライブラリを使用State Management。

RxJS：これは、リアクティブプログラミングの哲学に基づいた別のJavascriptライブラリであり、「ストリーム」（オブザーバブルなど）に対処するために使用されます。

2
kg11

RxJSの1行でReduxを「実装」できます 。 Rxを他の理由（スキンの約束、サーバーおよびクライアントでの使用）で考えている場合は、ReduxをスキップしてすべてのRxに進みます。

2
bbsimonbb

ReduxにインスパイアされたRxJSコードを作成したときとの実用的な違いを追加したかっただけです。

各アクションタイプをSubjectインスタンスにマッピングしました。各ステートフルコンポーネントにはサブジェクトがあり、レデューサー関数にマップされます。すべてのレデューサーストリームはmergeと結合され、scanは状態を出力します。デフォルト値は、startWithの直前のscanで設定されます。状態にpublishReplay(1)を使用しましたが、後で削除する可能性があります。

反応する純粋なレンダリング機能は、すべてのプロデューサー/サブジェクトを送信してイベントデータを生成する場所のみに配置されます。

子コンポーネントがある場合は、それらの状態がどのように結合されるかを説明する必要があります。 combineLatestは、そのための良い出発点かもしれません。

実装の顕著な違い：

  • ミドルウェアなし、rxjsオペレーターのみ。これが最大の力と弱点だと思います。あなたはまだ概念を借りることができますが、reduxやcycle.jsのような姉妹コミュニティからの助けを得るのは難しいと思います。それはもう一つのカスタムソリューションだからです。そのため、このテキストでは「私たち」ではなく「私」と書く必要があります。

  • アクションタイプのスイッチ/ケースまたは文字列はありません。アクションを分離するより動的な方法があります。

  • rxjsは他の場所でツールとして使用でき、状態管理には含まれていません。

  • アクションタイプよりもプロデューサーの数が少ない（？）。これについてはわかりませんが、子コンポーネントをリッスンする親コンポーネントで多くの反応を得ることができます。つまり、命令型コードが少なくなり、複雑さが軽減されます。

  • あなたはソリューションを所有しています。フレームワークは必要ありません。良い面と悪い面。とにかく独自のフレームワークを書くことになります。

  • それははるかにフラクタルであり、サブツリーまたはアプリ状態ツリーの複数の部分からの変更を簡単にサブスクライブできます。

    • Redux-obseravbleのように叙事詩を行うのがどれほど簡単だと思いますか？本当に簡単です。

また、子コンポーネントがストリームとして記述されている場合、はるかに大きなメリットに取り組んでいます。これは、コンポーネント構造に基づいて状態を再帰的に（「ちょうど」）結合できるため、レデューサーで親と子の状態を考慮する必要がないことを意味します。

また、反応をスキップして、Reactが反応状態をより適切に処理するまで、snabbdomまたは他の何かを実行することも考えています。なぜ小道具を介して再び破壊するために、私たちの状態を上方に構築する必要があるのですか？そこで、このパターンのバージョン2をSnabbdomで作成してみます。

以下は、state.tsファイルが状態ストリームを構築する、より高度な小さなスニペットです。これは、検証ルールとcssスタイルを持つフィールド（入力）のオブジェクトを取得するajaxフォームコンポーネントの状態です。このファイルでは、フィールド名（オブジェクトキー）を使用して、すべての子の状態をフォーム状態に結合します。

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
  }
}

コードは単独ではあまり語らないかもしれませんが、どのように状態を上向きに構築できるか、動的イベントを簡単に生成する方法を示しています。支払う代償は、異なるスタイルのコードを理解する必要があるということです。そして、私はその代価を支払うのが大好きです。

1
Marcus Nielsen

Reduxは、更新操作のための明確に定義された標準が付属している単なる状態管理ライブラリです。標準に準拠している限り、データフローを正気に保ち、推論しやすくすることができます。また、ミドルウェアとストアエンハンサーでデータフローを強化する機能も提供します。

RxJSは、リアクティブプログラミングのツールキットです。実際、アプリで発生しているすべてのことをストリームとして考えることができます。 RxJSは、これらのストリームを管理するための非常に豊富なツールセットを提供します。

RxJSとReduxはどこでインターセプトしますか？ reduxでは、アクションを使用して状態を更新します。これらのアクションは明らかにストリームとして扱うことができます。 redux-observableのようなミドルウェアを使用すると（必須ではありません）、いわゆる「ビジネスロジック」を事後対応的に実装できます。もう1つは、reduxストアからオブザーバブルを作成できることです。これは、エンハンサーを使用するよりも簡単な場合があります。

0
mdikici