RefluxJS-FacebookからのFluxアーキテクチャの代替ルック

翻訳者から： ReactJSを見て、そのシンプルさに触発されて、アプリケーション内で同じ単純なデータ交換を提供するライブラリを探し始めました。 私はFluxに出会い、 コード例を見て、代替品を探しに行きました。 RefluxJSに出会い、すぐに恋に落ち、公式ドックの翻訳に行きました。 記事のスタイルで書かれただけなので、まずはHabrasocietyと共有することにしました。 翻訳は多少無料です。 いくつかの場所で、何かが追加の説明や例が必要だと思われる場合、私は恥ずかしがり屋ではありませんでした。

以下の翻訳では、「イベント」という用語は「逆流からのアクション」という用語に使用されることがあり、文脈によっては「アクション」という用語に使用されることもあります。 これ以上の翻訳の成功を見つけることができませんでした。 オプションがあれば、コメントで提案を待っています。

復習

RefluxJSは、FacebookのFluxコンセプトを使用して、アプリケーションで単方向データストリームを提供するシンプルなライブラリです。

Fluxアーキテクチャの概要については、 こちらをご覧ください 。この記事では、MVCアーキテクチャから単方向データストリームに移行する、関数プログラミングの機能を大幅に使用する代替オプションについて説明します。

╔═════════╗ ╔════════╗ ╔═════════════════╗ ║ Actions ║──────>║ Stores ║──────>║ View Components ║ ╚═════════╝ ╚════════╝ ╚═════════════════╝ ^ │ └──────────────────────────────────────┘ 

パターンは、アクションとアクションストアで構成されます。 アクションは、ストレージからビジュアルコンポーネントへのイベントを通じてデータの移動を開始します。 ユーザーが何かをした場合、アクションを使用してイベントが生成されます。 データウェアハウスはこのイベントにサブスクライブされます。 イベントを処理し、場合によっては、何らかの独自のイベントを生成します。

たとえば、ユーザーがアプリケーションのリストのフィルタリングを変更しました。 フィルターコンポーネントは、フィルター変更イベントを生成します。 リポジトリはこれに応答して、更新されたフィルターを使用してajaxリクエストを実行し、それにサインアップしたすべてのユーザーに、提供されたデータセットが変更されたことを通知します。

内容

• RefluxとFacebook Fluxの比較
• 例
• 設置
• 使用する
  
  • イベント
  • 保管施設
  • ReactJSコンポーネントで使用する
• 詳細
• エピローグ

RefluxとFacebook Fluxの比較

RefluxJSプロジェクトの目標は、クライアント側とサーバー側の両方で、プロジェクトへのFluxアーキテクチャのよりシンプルで迅速な統合です。 ただし、RefluxJSの動作と従来のFluxアーキテクチャが提供するものとの間にはいくつかの違いがあります。 詳細については、 このブログ投稿を参照してください。

Fluxとの類似点

一部のRefluxJSの概念はFluxに似ています：

• アクションがあります
• データウェアハウスがあります
• データは一方向にのみ移動します。

フラックスとの違い

RefluxJSは、Fluxコンセプトの改良版であり、機能的リアクティブプログラミングにより動的で使いやすいものです。

• Fluxのシングルトンであったディスパッチャは、RefluxJSにはありません。 代わりに、各イベント（アクション）は独自のディスパッチャです。
• アクションをサブスクライブできるため、ストアは面倒なswitchステートメントを使用してハエをカツレツから分離することなく、これを直接実行できます。
• Vaultは、他のVaultにサブスクライブできます。 つまり、map-reduceデータを集約して処理するリポジトリを作成することが可能になります。
• waitFor（）の呼び出しは削除されました。 代わりに、データ処理を順次または並行して実行できます。
  
  • データを集約するリポジトリ（上記参照）は、他のリポジトリをサブスクライブし、メッセージを順次処理できます
  • 他のイベントが処理されるのを待つには、join（）メソッドを使用できます
  
  
• RefluxJSアクションは、サブスクライブするすべてのユーザーに必要なデータを送信する機能であるため、特別なアクションファクトリはまったく必要ありません。

例

いくつかの例は、次のアドレスにあります。

• RefluxJSのToDoリストのドラフトを作成する例
• echenleyが所有するHackerNewsクローン
• Pythonを使用して脚光によるバックエンドを実装する別のTODOプロジェクト

設置

現時点では、RefluxJSはnpmまたはbowerを使用してインストールできます。

NPM

npmを使用してインストールするには、次のコマンドを実行します。

  npm install reflux 

バウアー

bowerを使用してインストールするには：

  bower install reflux 

ES5

Reactと同様に、RefluxJSは古いブラウザ用にes5-shimを必要とします。 ここでそれを取ることができます

使用する

完全な例はここにあります 。

アクションを作成する

アクションは `Reflux.createAction（）`を呼び出すことで作成されます。 オプションのリストをパラメーターとして渡すことができます。

 var statusUpdate = Reflux.createAction(options); 

アクションオブジェクトはファンクタなので、オブジェクトを関数として参照することで呼び出すことができます：

 statusUpdate(data); //   statusUpdate,     data statusUpdate.triggerAsync(data); //  ,   

`options.sync`がtrueに設定されている場合、イベントは同期操作としてトリガーされます。 この設定はいつでも変更できます。 それ以降のすべての呼び出しでは、設定値が使用されます。

多数のアクションを簡単に作成するには、次のようにします。

 var Actions = Reflux.createActions([ "statusUpdate", "statusEdited", "statusAdded" ]); //   Actions    ,      createActions(). //      Actions.statusUpdate(); 

アクションを使用した非同期作業

非同期的に処理できるイベント（API呼び出しなど）には、いくつかの異なるオプションがあります。 最も一般的なケースでは、正常終了とエラーを考慮します。 このバリアントでさまざまなイベントを作成するには、 `options.children`を使用できます。

 //   'load', 'load.completed'  'load.failed' var Actions = Reflux.createActions({ "load": {children: ["completed","failed"]} }); //      'load',   , //      ,   failed  completed Actions.load.listen( function() { //      . //      this someAsyncOperation() .then( this.completed ) .catch( this.failed ); }); 

この場合、特別なオプション： `options.asyncResult`があります。 次のアクション定義は同等です。

 createAction({ children: ["progressed","completed","failed"] }); createAction({ asyncResult: true, children: ["progressed"] }); 

次のメソッドは、「完了」と「失敗」という子アクションを自動的に呼び出すために使用できます。

• `promise`-パラメーターとして、promiseオブジェクトを想定し、then（）` and` catch（） `を使用して、このpromiseの` complete`および `failed`呼び出しをバインドします。
• `listenAndPromise`-パラメーターとして、promiseオブジェクトを返す関数が必要です。 イベントが発生すると、それ（関数が返したpromiseオブジェクト）が呼び出されます。 したがって、promiseの `then（）`および `catch（）`によって、completedおよびfailedが自動的に呼び出されます。

次の3つの定義は同等です。

 asyncResultAction.listen( function(arguments) { someAsyncOperation(arguments) .then(asyncResultAction.completed) .catch(asyncResultAction.failed); }); asyncResultAction.listen( function(arguments) { asyncResultAction.promise( someAsyncOperation(arguments) ); }); asyncResultAction.listenAndPromise( someAsyncOperation ); 

約束としての非同期アクション

非同期アクションはプロミスとして使用できます。 これは、レンダリングの前に何らかのイベントの正常な完了（または未完了）を待つ必要がある場合に、サーバーでのレンダリングに特に便利です。

アクションとストレージがあり、APIリクエストを実行する必要があるとします：

 //     `completed` & `failed` "" var makeRequest = Reflux.createAction({ asyncResult: true }); var RequestStore = Reflux.createStore({ init: function() { this.listenTo(makeRequest, 'onMakeRequest'); }, onMakeRequest: function(url) { // ,  `request` - - HTTP  request(url, function(response) { if (response.ok) { makeRequest.completed(response.body); } else { makeRequest.failed(response.error); } }) } }); 

この場合、サーバーでプロミスを使用してリクエストを実行し、何かをレンダリングするかエラーを返すことができます。

 makeRequest('/api/something').then(function(body) { // Render the response body }).catch(function(err) { // Handle the API error object }); 

イベントフック

各イベントに使用できるフックがいくつかあります。

• `preEmit`-アクションがイベント情報をサブスクライバーに渡す前に呼び出されます。 引数として、フックはイベントのディスパッチに使用される引数を受け取ります。 フックが未定義以外を返す場合、戻り値はshouldEmitフックのパラメーターとして使用され、送信されたデータを置き換えます
• 「shouldEmit」-「preEmit」の後で呼び出されますが、アクションがイベント情報をサブスクライバーに渡す前に。 デフォルトでは、このハンドラーはtrueを返し、データの送信を許可します。 たとえば、この動作をオーバーライドして、引数を確認し、イベントをチェーンに送信するかどうかを決定できます。

使用例：

 Actions.statusUpdate.preEmit = function() { console.log(arguments); }; Actions.statusUpdate.shouldEmit = function(value) { return value > 0; }; Actions.statusUpdate(0); Actions.statusUpdate(1); //   : 1 

アクションを宣言するときに、フックを直接定義できます。

 var action = Reflux.createAction({ preEmit: function(){...}, shouldEmit: function(){...} }); 

Reflux.ActionMethods

すべてのアクションのオブジェクトでメソッドを実行できるようにする必要がある場合は、オブジェクト `Reflux.ActionMethods`を展開できます。このオブジェクトは、作成時にすべてのアクションと自動的に混合されます。

使用例：

 Reflux.ActionMethods.exampleMethod = function() { console.log(arguments); }; Actions.statusUpdate.exampleMethod('arg1'); // : 'arg1' 

ストレージ作成

リポジトリは、 ReactJSコンポーネントクラス （ `React.createClass`）とほぼ同じ方法で作成されます-リポジトリのパラメーターを定義するオブジェクトを` Reflux.createStore`メソッドに渡すことによって。 listenTo`の独自のリポジトリメソッドを呼び出すことで、すべてのイベントハンドラーをリポジトリの `init`メソッドで初期化できます。

 //   var statusStore = Reflux.createStore({ //   init: function() { //    statusUpdate this.listenTo(statusUpdate, this.output); }, //    ,   output: function(flag) { var status = flag ? 'ONLINE' : 'OFFLINE'; //     ,     this.trigger(status); } }); 

上記の例では、 `statusUpdate`アクションが呼び出されると、送信中に渡されたすべてのパラメーターとともに` output`ストレージメソッドが呼び出されます。 たとえば、イベントが `statusUpdate（true）`を呼び出すことによってディスパッチされた場合、 `true`フラグが` output`関数に渡されます。 その後、リポジトリ自体がアクションとして機能し、サブスクライバーの「ステータス」データに渡されます。

ストレージ自体がイベントのディスパッチのイニシエーターであるため、「preEmit」および「shouldEmit」フックもあります。

Reflux.StoreMethods

特定のメソッドセットをすべてのリポジトリですぐに使用できるようにする場合は、作成時にすべてのリポジトリにミックスされる `Reflux.StoreMethods`オブジェクトを展開できます。

使用例：

 Reflux.StoreMethods.exampleMethod = function() { console.log(arguments); }; statusStore.exampleMethod('arg1'); //  : 'arg1' 

ストレージ内の不純物（ミックスイン）

オブジェクトをReactコンポーネントにミックスするように、それらをリポジトリとミックスできます。

 var MyMixin = { foo: function() { console.log('bar!'); } } var Store = Reflux.createStore({ mixins: [MyMixin] }); Store.foo(); //  "bar!"   

不純物メソッドは、ストレージで宣言された独自のメソッドと同じ方法で利用できます。 したがって、任意のメソッドの「this」はストレージインスタンスを指します。

 var MyMixin = { mixinMethod: function() { console.log(this.foo); } } var Store = Reflux.createStore({ mixins: [MyMixin], foo: 'bar!', storeMethod: function() { this.mixinMethod(); //  "bar!" } }); 

便利なことに、同じイベントライフサイクルメソッド（ `init`、` preEmit`、 `shouldEmit`）を定義するいくつかの不純物がリポジトリに混入している場合、これらのメソッドはすべて（実際にはReactJSのように）呼び出されることが保証されます。

多数のアクションの便利なサブスクリプション

通常、ストアのinitメソッドは登録されたすべてのアクションをサブスクライブするため、ストアには `listenToMany`メソッドがあります。このメソッドは、生成されたすべてのイベントを持つオブジェクトを引数として受け取ります。 このコードの代わりに：

 var actions = Reflux.createActions(["fireBall","magicMissile"]); var Store = Reflux.createStore({ init: function() { this.listenTo(actions.fireBall,this.onFireBall); this.listenTo(actions.magicMissile,this.onMagicMissile); }, onFireBall: function(){ // whoooosh! }, onMagicMissile: function(){ // bzzzzapp! } }); 

...これを使用できます：

 var actions = Reflux.createActions(["fireBall","magicMissile"]); var Store = Reflux.createStore({ init: function() { this.listenToMany(actions); }, onFireBall: function(){ // whoooosh! }, onMagicMissile: function(){ // bzzzzapp! } }); 

同様のコードは、すべての `actionName`アクションのハンドラーを追加します。これには、対応する` onActionName`ストレージメソッド（または必要に応じて `actionName`）があります。 上記の例では、 `actions`オブジェクトに` iceShard`アクションも含まれていた場合、（対応するハンドラーがないため）単に無視されます。

プロパティ `listenables`

さらに便利にするために、アクションを含むオブジェクトを `listenables`リポジトリプロパティに割り当てると、自動的に` listenToMany`に転送されます。 したがって、上記の例はこれに簡略化できます。

 var actions = Reflux.createActions(["fireBall","magicMissile"]); var Store = Reflux.createStore({ listenables: actions, onFireBall: function(){ // whoooosh! }, onMagicMissile: function(){ // bzzzzapp! } }); 

`listenables`プロパティは、同様のオブジェクトの配列にすることもできます。 この場合、各オブジェクトは `listenToMany`に渡されるため、次のことが便利になります。

 var Store = Reflux.createStore({ listenables: [require('./darkspells'),require('./lightspells'),{healthChange:require('./healthstore')}], //       }); 

リポジトリへのサブスクライブ（リポジトリから送信されたイベントの処理）

コンポーネントでは、次のようにリポジトリからイベント処理をサブスクライブできます。

 //     var statusStore = Reflux.createStore({ //   init: function() { //    statusUpdate this.listenTo(statusUpdate, this.output); }, //  output: function(flag) { var status = flag ? 'ONLINE' : 'OFFLINE'; //    this.trigger(status); } }); //   ,       function ConsoleComponent() { //    statusStore.listen(function(status) { console.log('status: ', status); }); }; 

 var consoleComponent = new ConsoleComponent(); 

関数としてアクションオブジェクト `statusUpdate`を使用して、イベントをチェーンごとにディスパッチします。

 statusUpdate(true); statusUpdate(false); 

上記のようにすべてを行うと、結論は次のようになります。

 ステータス：オンライン
ステータス：オフライン 

Reactコンポーネントの使用例

` componentDidMount` [ライフサイクルメソッド]（）メソッドでReactコンポーネントのアクションをサブスクライブし、次のように` componentWillUnmount`メソッドでサブスクライブ解除できます。

 var Status = React.createClass({ initialize: function() { }, onStatusChange: function(status) { this.setState({ currentStatus: status }); }, componentDidMount: function() { this.unsubscribe = statusStore.listen(this.onStatusChange); }, componentWillUnmount: function() { this.unsubscribe(); }, render: function() { //   } }); 

Reactコンポーネント内の便利な作業のための不純物

コンポーネントは、適切なタイミングでイベントから常にサブスクライブ/サブスクライブ解除する必要があるため、使用の便宜のために、 混合物 `Reflux.ListenerMixin`を使用できます。 これを使用して、上記の例を次のように書き換えることができます。

 var Status = React.createClass({ mixins: [Reflux.ListenerMixin], onStatusChange: function(status) { this.setState({ currentStatus: status }); }, componentDidMount: function() { this.listenTo(statusStore, this.onStatusChange); }, render: function() { // render specifics } }); 

この不純性により、listenToメソッドはコンポーネント内で呼び出すことができます。これは、同じ名前のstorageメソッドと同じように機能します。 `listenToMany`メソッドを使用できます。

Reflux.listenToを使用する

「componentDidMount（）」内で「this.listenTo（）」に関する特定のロジックを使用しない場合、「Reflux.listenTo（）」呼び出しを混合物として使用できます。 この場合、 `componentDidMount（）`は必要に応じて自動的に設定され、コンポーネントで `ListenerMixin`の混合物を取得します。 したがって、上記の例を次のように書き換えることができます。

 var Status = React.createClass({ mixins: [Reflux.listenTo(statusStore,"onStatusChange")], onStatusChange: function(status) { this.setState({ currentStatus: status }); }, render: function() { //    `this.state.currentStatus` } }); 

同じ `mixins`配列内に` Reflux.listenTo`への複数の呼び出しを挿入できます。

同様に機能する「Reflux.listenToMany」もあり、「listener.listenToMany」を使用できます。

Reflux.connectを使用する

リポジトリからデータを受信するときにコンポーネントの状態を更新するだけであれば、ReactJSコンポーネントの混合物として式 `Reflux.connect（listener、[stateKey]）`を使用できます。 そこでオプションのキー「stateKey」を渡すと、コンポーネントの状態は「this.setState（{：data}）」を使用して自動的に更新されます。 「stateKey」が渡されない場合、「this.setState（data）」への呼び出しが行われます。 新しい機能を反映するように書き直した上記の例を次に示します。

 var Status = React.createClass({ mixins: [Reflux.connect(statusStore,"currentStatus")], render: function() { // render using `this.state.currentStatus` } }); 

Reflux.connectFilterを使用する

`Reflux.connectFilter`は、` Reflux.connect`と同じように使用できます。 ストレージ状態の一部のみをコンポーネントに転送する必要がある場合は、不純物として「connectFilter」を使用します。 Refluxを使用して書かれたブログがすべての出版物をリポジトリに保持する可能性が高いとしましょう。 また、単一の投稿のページで、 `Reflux.connectFilter`を使用して投稿をフィルタリングできます。

 var PostView = React.createClass({ mixins: [Reflux.connectFilter(postStore,"post", function(posts) { posts.filter(function(post) { post.id === this.props.id; }); })], render: function() { // ,  `this.state.post` } }); 

他のリポジトリからの変更イベントの処理

リポジトリは、他のリポジトリの変更をサブスクライブできるため、アプリケーション間の他の部分に影響を与えることなく、リポジトリ間のデータ転送チェーンを構築してデータを集約できます。 リポジトリは、アクションオブジェクトの場合と同様に、 `listenTo`メソッドを使用して他のリポジトリで発生する変更をサブスクライブできます。

 //  ,    ,   statusStore var statusHistoryStore = Reflux.createStore({ init: function() { //       this.listenTo(statusStore, this.output); this.history = []; }, //   output: function(statusString) { this.history.push({ date: new Date(), status: statusString }); //    this.trigger(this.history); } }); 

追加機能

別のイベント管理ライブラリを使用する

デフォルトのEventEmitterが気に入らない？ 次のような組み込みノードを含む、他のものを使用するように切り替えることができます。

 //         Reflux.setEventEmitter(require('events').EventEmitter); 

代替のPromiseライブラリを使用する

Promiseのデフォルトの実装ライブラリが気に入らない？ 他のいずれかの使用に切り替えることができます（たとえば、次のようなBluebird ：

 //        Reflux.setPromise(require('bluebird')); 

RefluxJSのプロミスは、「new Promise（...）」を呼び出すことで作成されることに注意してください。 ライブラリがファクトリを使用する場合、 `Reflux.setPromiseFactory（）`呼び出しを使用します。

Promises Factoryを使用する

ほとんどのライブラリはプロミスを処理するためにコンストラクターを使用しないため（ `new Promise（...）`）、ファクトリーを設定する必要はありません。

ただし、 `Q`のようなもの、またはファクトリメソッドを使用してプロミスを作成する他のライブラリを使用する場合は、` Reflux.setPromiseFactory`呼び出しを使用して指定します。

 //       Reflux.setPromiseFactory(require('Q').Promise); 

nextTick Alternativeを使用する

アクションが呼び出されると、ファンクターとして呼び出され、非同期で発生します。 コントロールはすぐに返され、対応するハンドラーがRefluxJS内の `setTimeout`（function` nextTick`）経由で呼び出されます。

最適な遅延メソッド呼び出し（ `setTimeout`、` nextTick`、 `setImmediate`など）の実装を選択できます。

 // node.js env Reflux.nextTick(process.nextTick); 

より良い代替として、 `setImmediate` または ` macrotask` ポリフィルが必要な場合があります

チェーン内のすべてのアクションが完了するのを待っています

Reflux APIには、イベントを並行して送信するソースの便利な集約を提供する `join`メソッドがあります。 これは、Facebookの元のFlux実装の「waitFor」メソッドと同じです。

追跡引数

すべての参加者が少なくとも1回イベントを送信するとすぐに、対応する `join（）`呼び出しに渡されるハンドラーが呼び出されます。 ハンドラーには、「join」を呼び出すときに操作の参加者が宣言された順序で各イベントのパラメーターが渡されます。

4つの「結合」オプションがあり、それぞれが特別なデータ戦略を表します。

• `joinLeading`：最初のイベント呼び出しの結果のみが各パブリッシャーから保存されます。 他のすべてのデータは無視されます。
• joinTrailing：最後のイベント呼び出しの結果のみが各パブリッシャーから保存されます。 他のすべてのデータは無視されます。
• `joinConcat`：すべての結果は配列に保存されます。
• joinStrict：同じパブリッシャーからイベントを呼び出すと、エラーが発生します。

すべてのメソッドのシグネチャは同じように見えます。

 joinXyz(...publisher, callback) 

join（）が完了するとすぐに、それに関連付けられているすべての制限が削除され、パブリッシャーが再びチェーンにイベントを送信すると、再び機能するようになります。

イベント管理にインスタンスメソッドを使用する

リスナーAPIを使用するすべてのオブジェクト（ストレージ、ListenerMixinを混合するReactコンポーネント、またはListenerMethodを使用する他のコンポーネント）は、上で説明したjoinメソッドの4つのオプションにアクセスします。

 var gainHeroBadgeStore = Reflux.createStore({ init: function() { this.joinTrailing(actions.disarmBomb, actions.saveHostage, actions.recoverData, this.triggerAsync); } }); actions.disarmBomb("warehouse"); actions.recoverData("seedyletter"); actions.disarmBomb("docks"); actions.saveHostage("offices",3); // `gainHeroBadgeStore`            `[["docks"],["offices",3],["seedyletter"]]` 

静的メソッドを使用する

結合メソッドを使用してからチェーンにイベントを送信することはリポジトリにとって一般的なことなので、すべての結合メソッドは、指定されたイベントにサブスクライブされたリポジトリオブジェクトを返すRefluxオブジェクトに静的に相当します。これらの方法を使用して、上記の例を次のように書き換えることができます。

 var gainHeroBadgeStore = Reflux.joinTrailing(actions.disarmBomb, actions.saveHostage, actions.recoverData); 

listenToメソッドを使用してデフォルト状態を送信する

リポジトリと `ListenerMixin`によって提供される` listenTo`関数には3番目のパラメーターがあり、これは関数にすることができます。この関数は、ハンドラーがパラメーターとして `getInitialState`を呼び出した結果で登録するときに呼び出されます。

 var exampleStore = Reflux.createStore({ init: function() {}, getInitialState: function() { return "-   "; } }); //      this.listenTo(exampleStore, onChangeCallback, initialCallback) // initialCallback      "-   " 

`listenToMany`メソッドを覚えていますか？他のリポジトリで使用する場合、 `getInitialState`もサポートします。このメソッドによって返されるデータは、通常のハンドラー、または存在する場合は `this.onDefault`メソッドに渡されます。

コロフォン

• 貢献者のリスト
• プロジェクトライセンス：BSD 3-Clauseライセンス。Copyright 2014、Mikael Brassman。
• ライセンスの詳細
• Refluxはeventemitter3を使用します。これは現在MITでライセンスされています