BT

Ready for InfoQ 3.0? Try the new design and let us know what you think!

Redux - Fluxに影響を受けたアーキテクチャスタイル

| 作者: Abel Avram フォローする 12 人のフォロワー , 翻訳者 吉田 英人 フォローする 0 人のフォロワー 投稿日 2015年12月31日. 推定読書時間: 2 分 |

原文(投稿日:2015/11/21)へのリンク

ReduxFluxと同じように単一方向のデータフローを使用しているが,唯一のストアをクローンすることによって,元のストアに副次的な影響を与えずに機能を提供することができる。ディスパッチャは存在しない。

Reduxは,Facebook FluxElmに着想を得たアプリケーションアーキテクチャである。ReduxのデータフローはFluxと同じく一方向だ。これには,アプリケーションアーキテクチャを単純化して,状況判断をより簡単にするという目的がある。Fluxと違うのは,Reduxはただひとつのストアでアプリケーション全体の状態を保存している点だ。このストアはオブジェクトツリーで構成されていて,不変(immutable)である。状態の変更が必要な場合には,それまでの状態に変更内容を加えたデータを組み込んだ,新たなオブジェクトが生成される。この変更は,アクションがストアにディスパッチされた時にトリガされる。アクション(Action)は,実行される操作のタイプといくつかのペイロードを含んだ単純なオブジェクトである。変更を実行するのはレデューサ(reducer)である。レデューサは変更前の状態とアクションを引数として受け取る,副次的な作用を持たない純粋関数で,アクションを適用した結果を表す新しい状態を返す。

ストアはクラスではないが,いくつかのメソッドを伴ったオブジェクトだ。アプリケーションの初期状態において,ルートレデューサの実行によってストアは生成される。アプリケーションの拡張は,レデューサの追加によって行う。それぞれのレデューサが,状態ツリーの各ブランチを管理する仕組みだ。1回のコールでストアが生成できるように,Reduxでは,複数のレデューサをひとつに組み合わせる手段を提供している。

ReduxがFluxと違うのは,中心に位置するディスパッチャ(Dispatcher)が存在しないことだ。アクションの実行が必要な場合は,実行するアクションをパラメータとして,ストアのdispatcher()メソッドがコールされる。これによって状態の変化がすべてのリスナに通知され,それに応じた新しい状態の取得や,それに対応したコンポーネントのレンダリングが実行される。

Reduxでは任意のJavaScriptフレームワークを使用して,アプリケーションを構築することができるので,Reactへの対応も自然だ。また,このフレームワークでは“UIを関数状態として記述する”。Reduxが重視するのは,さまざまなアクションに基づいた状態更新を安全に実行することなのだ。

Fluxは8月に2.1.0に到達するまでは,続けざまにコミットされていることで有名だったが,その後3ヶ月,大きな改善は行われていない。GitHubリポジトリには,現時点で125件のクローズされたイシューがある。オープン状態なのはわずか15件で,大半が子細な拡張要求やドキュメント関連の問題,あるいは質問だが,バグレポートも1つある。従ってFluxは,現在は極めて安定した状態だといえる。Facebookが舞台裏で何か行動しているのでなければ,近い将来に変更されるようなことはないだろう。

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

あなたの意見をお聞かせください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする
コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

このスレッドのメッセージについてEmailでリプライする

ディスカッション
BT