0

サーバーにアクセスする前にデータが既にロードされているかどうかを確認するための合意されたパターンがあるかどうかに興味があります。

次のようなアクションがあるとします。

Actions.loadRequest.preEmit = function () {
  $.get('/store/', function (data) {
      Actions.loadSuccess(data);
  }.bind(this));
}

これは、単に「このデータをください」と言っているコンポーネントから呼び出されます。しかし、そのデータが既にストアにある場合は、サーバーにアクセスしたくありません。ストアをチェックするロジックをコンポーネントに保存する必要があります:

render: function () {
  var data = this.state.store.data;
  if (!data) {
    Actions.loadRequest();
  }

これについてもっと良い方法はありますか？

4

1 に答える 1

1

私のプロジェクトでは、これに使用shouldEmitします ( https://github.com/reflux/refluxjs#action-hooksを参照)。私のコードの例:

var streamStore = Reflux.createStore({
    [...]
});

actions.loadStream.shouldEmit = function(streamId) {
    if(streamId in streamStore.data)
        return false;
    return true;
};

これはストア定義と同じファイルにあります。ストアはデータを保存するため、これは概念的に正しいアプローチだと思います。したがって、ストアは、より多くのデータが利用可能であるというアクションを聞いて更新する責任があるのと同じように、より多くのデータをロードする要求をインターセプトし、そうしないと言います。自体。

残念ながら、AJAX 呼び出しを にバインドしたため、これはあなたの例では機能しません。これは のpreEmit前に呼び出されshouldEmitます。次のように、通常の呼び出しで API 呼び出しを行うようにリファクタリングすることをお勧めしますlisten。

Actions.loadRequest.listen(function () {
  $.get('/store/', function (data) {
      Actions.loadSuccess(data);
  }.bind(this));
});

これによりpreEmit、アクションを発行する前にアクションの引数を書き換える必要があるというまれなケースが回避されます。コードでこのパターンを使用します。たとえば、結果の 2 ページ目を読み込むときにnext、最初のページに付属していてストアにあるトークンに依存しています。しかし、「アクションがトリガーされたのでリクエストを作成する」という一般的な単純なケースでは、必要なキャッシングなどのより高度な動作を追加してlisten追加できるため、使用する方が理にかなっています。preEmitshouldEmit

Reflux にはヘルパー関数もありますlistenAndPromise。これは、「アクションが起動され、AJAX 呼び出しが行われ、完了したら別のアクションが起動される」という一般的なユース ケースをさらに簡素化します。あなたの例は次のようになります。

Actions.loadRequest.listenAndPromise(function () {
    return $.get('/store/');
});

設定方法の詳細については、ドキュメントのこのセクションを参照してください: https://github.com/reflux/refluxjs#asynchronous-actions

于 2015-08-12T00:13:21.040 に答える