非公式ベータ版翻訳

このページは PageTurner AI で翻訳されました（ベータ版）。プロジェクト公式の承認はありません。エラーを見つけましたか？問題を報告 →

先行技術

Reduxは多様な技術的系譜を持っています。いくつかのパターンや技術と類似点がある一方で、重要な点で異なっています。以下では類似点と相違点を探っていきます。

開発者体験

Dan Abramov (Reduxの作者) は、React Europeカンファレンスでの講演「Hot Reloading with Time Travel」の準備中にReduxを開発しました。彼の目標は、最小限のAPIでありながら完全に予測可能な動作をする状態管理ライブラリを作ることでした。Reduxは開発者の追加作業なしで、ロギング、ホットリロード、タイムトラベル、ユニバーサルアプリ、記録と再生を実装可能にします。

Danは自身の意図とアプローチについてChangelog episode 187で語っています。

影響を受けた技術

ReduxはFluxのアイデアを発展させつつ、Elmからヒントを得て複雑さを回避しています。FluxやElmを使ったことがなくても、Reduxなら数分で使い始められます。

Flux

ReduxはFluxの重要な特性から影響を受けています。Fluxと同様に、Reduxはモデル更新ロジックをアプリケーションの特定層（Fluxでは「ストア」、Reduxでは「リデューサー」）に集中させることを求めます。アプリケーションコードが直接データを変更するのではなく、双方ともあらゆる変更を「アクション」と呼ばれるプレーンオブジェクトで記述するよう指示します。

Fluxと異なり、ReduxにはDispatcherの概念がありません。これはイベントエミッターの代わりに純粋関数を採用しており、純粋関数は合成が容易で管理主体を必要としないためです。Fluxの解釈によっては、これを逸脱と見るか実装の詳細と見るかが分かれます。Fluxはしばしば(state, action) => stateと表現されます。この意味でReduxはFluxアーキテクチャに忠実でありつつ、純粋関数によって簡素化しています。

Fluxとのもう一つの重要な違いは、Reduxがデータの変更を決して行わないことを前提としている点です。状態にはプレーンオブジェクトや配列を使用できますが、リデューサー内でそれらを変更することは強く非推奨です。オブジェクトスプレッド演算子やImmer不変更新ライブラリを使って、常に新しいオブジェクトを返すべきです。

パフォーマンス上の特殊なケースでは、データを変更する非純粋なリデューサーを書くことも技術的には可能ですが、積極的に避けるべきです。タイムトラベルや記録/再生、ホットリロードといった開発機能が壊れます。さらに、Omが示すように、オブジェクト割り当てのコストはかかるものの、リデューサーの純粋性によって変更箇所が正確に把握できるため、高コストな再レンダリングや再計算を回避できるメリットの方が大きく、不変性が実際のアプリでパフォーマンス問題を引き起こすことはほとんどありません。

参考までに、Fluxの作者たちもReduxを承認しています。

Elm

ElmはHaskellに影響を受けた関数型プログラミング言語で、Evan Czaplickiによって作成されました。Elmは「モデル・ビュー・アップデート」アーキテクチャを強制し、アップデート関数は(action, state) => stateというシグネチャを持ちます。Elmの「アップデータ」はReduxのリデューサーと同じ目的を果たします。

Reduxとは異なり、Elmはプログラミング言語であるため、強制された純粋性、静的型付け、デフォルトの不変性、パターンマッチング（case式の使用）など多くの恩恵を受けられます。Elmを使う予がなくても、Elmアーキテクチャについて学び、実際に触れてみるべきです。類似のアイデアを実装した興味深いJavaScriptライブラリのプレイグラウンドが存在します。Reduxのインスピレーションを得るために注目すべき場所です！Elmの静的型付けに近づく一つの方法は、Flowのような段階的型付けソリューションの使用です。

Immutable

Immutableは永続的データ構造を実装したJavaScriptライブラリです。高いパフォーマンスを発揮し、慣用的なJavaScript APIを提供します。

（注：Immutable.jsはReduxのインスピレーションとなりましたが、現在では不変更新のためにImmerの使用を推奨します）

**Reduxは状態の保存方法を問いません。プレーンオブジェクトでもImmutableオブジェクトでも、その他何でも構いません。**ユニバーサルアプリを作成し、サーバーから状態をハイドレートするためには（デ）シリアライズ機構が必要になるでしょうが、それ以外では、不変性をサポートする限りあらゆるデータ保存ライブラリを使用できます。例えば、Backboneモデルは可変であるため、Reduxの状態にBackboneを使用することは意味がありません。

カーソルをサポートする不変ライブラリを使用している場合でも、Reduxアプリではカーソルを使うべきではないことに注意してください。状態ツリー全体は読み取り専用と見なし、Reduxを使用して状態を更新し、更新を購読する必要があります。したがって、カーソルを介した書き込みはReduxでは意味がありません。**カーソルの唯一のユースケースが状態ツリーとUIツリーの分離とカーソルの段階的な改良であるなら、セレクターを検討すべきです。**セレクターは合成可能なゲッター関数です。合成可能なセレクターの優れた簡潔な実装についてはreselectを参照してください。

Baobab

BaobabはプレーンJavaScriptオブジェクトを更新するための不変APIを実装した別の人気ライブラリです。Reduxと併用することは可能ですが、両者を一緒に使用する利点はほとんどありません。

Baobabが提供する機能の大部分はカーソルによるデータ更新に関連していますが、Reduxではデータ更新の唯一の方法がアクションのディスパッチです。したがって、これらは同じ問題を異なる方法で解決しており、相互に補完しません。

Immutableとは異なり、Baobabは内部で特別な効率的なデータ構造を実装していないため、Reduxと併用しても実際の利点は得られません。この場合、プレーンオブジェクトを使用する方が簡単です。

RxJS

RxJSは非同期アプリの複雑さを管理するための優れた方法です。実際、人間とコンピューターのインタラクションを相互依存するオブザーバブルとしてモデル化するライブラリ作成の取り組みが存在します。

RxJSとReduxを併用することは理にかなっているでしょうか？もちろんです！これらは非常に相性が良いです。例えば、Reduxストアをオブザーバブルとして公開するのは簡単です：

function toObservable(store) {
  return {
    subscribe({ next }) {
      const unsubscribe = store.subscribe(() => next(store.getState()))
      next(store.getState())
      return { unsubscribe }
    }
  }
}

同様に、異なる非同期ストリームを合成し、store.dispatch()に渡す前にアクションに変換できます。

問題は：Rxを既に使用している場合、本当にReduxが必要か？おそらく不要でしょう。RxでReduxを再実装するのは難しくありません。Rxの.scan()メソッドを使えば2行で実装できると言う人もいます。その通りかもしれません！

疑問がある場合は、Reduxのソースコード（コード量は多くありません）やそのエコシステム（例えば開発者ツール）を確認してみてください。もしこだわりがなくリアクティブデータフローを徹底したい場合は、Cycleのような代替案を検討したり、Reduxと組み合わせてみるのもよいでしょう。ぜひ試した結果を教えてください！

謝辞

リデューサーを使った状態更新モデルの優れた入門：The Elm Architecture
発想を変えてくれた：Turning the database inside-out
再評価が「単純に動作する」と確信させてくれた：Developing ClojureScript with Figwheel
ホットモジュール置換を提供：Webpack
ボイラープレートやシングルトンなしでFluxにアプローチする方法を教えてくれた：Flummox
ホットリロード可能なStoreのコンセプト実証：disto
このアーキテクチャの高性能性を証明：NuclearJS
単一状態アトムのアイデアを普及：Om
関数が最適なツールであることを示してくれた：Cycle
実用的な革新を提供：React

reduxというNPMパッケージ名を譲ってくださったJamie Paton氏に特に感謝します。

パトロン

Reduxの初期開発はコミュニティの支援によって行われました。実現を可能にしてくれた優れた企業の一部をご紹介します：

オリジナルのReduxパトロン全リストと、常に増え続けるRedux利用者と企業のリストをご覧ください。

開発者体験​

影響を受けた技術​

Flux​

Elm​

Immutable​

Baobab​

RxJS​

推薦の声​

謝辞​

パトロン​