[解決済み】Fluxアプリでajaxリクエストはどこで行うべきか？

質問

fluxアーキテクチャのreact.jsアプリケーションを作成していますが、サーバーからのデータ要求がいつ、どこで行われるべきかを考えています。このための例はありますか？(TODOアプリではありません!)

どのように解決するのですか？

私は、非同期の書き込み操作をアクション・クリエーターに、非同期の読み込み操作をストアに置くことを大賛成しています。目的は、ストアの状態を変更するコードを完全に同期的なアクション・ハンドラに置くことです。これによって、アクション・ハンドラは理屈が簡単で、ユニットテストも簡単になります。同じエンドポイントへの複数同時リクエスト（例えば二重読み込み）を防ぐために、実際のリクエスト処理をプロミスを使った別のモジュールに移します。

class MyResourceDAO {
  get(id) {
    if (!this.promises[id]) {
      this.promises[id] = new Promise((resolve, reject) => {
        // ajax handling here...
      });
    } 
    return this.promises[id];
  }
}

ストアの読み込みには非同期関数が含まれますが、重要な注意点として、ストアは非同期ハンドラで自分自身を更新せず、アクションを発火して のみ は、応答が到着したときにアクションを実行します。このアクションのハンドラが、実際の状態変更を行うことになる。

例えば、あるコンポーネントは次のようなことをする。

getInitialState() {
  return { data: myStore.getSomeData(this.props.id) };
}

ストアには、おそらくこのようなメソッドが実装されているはずです。

class Store {
  getSomeData(id) {
    if (!this.cache[id]) {
      MyResurceDAO.get(id).then(this.updateFromServer);
      this.cache[id] = LOADING_TOKEN;
      // LOADING_TOKEN is a unique value of some kind
      // that the component can use to know that the
      // value is not yet available.
    }

    return this.cache[id];
  }

  updateFromServer(response) {
    fluxDispatcher.dispatch({
      type: "DATA_FROM_SERVER",
      payload: {id: response.id, data: response}
    });
  }

  // this handles the "DATA_FROM_SERVER" action
  handleDataFromServer(action) {
    this.cache[action.payload.id] = action.payload.data;
    this.emit("change"); // or whatever you do to re-render your app
  }
}