flux + URL設計

検索クエリ

• flux on url change
• flux react router

前提

全てのURLはアプリへのエントリーポイントになる。ユーザのほとんどのアクションはURL transition actionのみをdispatchするイメージ。通信は各componentのcomponentDidMount任せ。URLを降ることが出来ない一部のユーザアクション（口コミ投稿など主にPOST系）のみ、別のaction typeを用いるイメージ。

ActionでURL変更専用イベントを用意し、RouteStoreも

  routes: {
    transition: function(path, params) {
      this.dispatch(c.ROUTE.TRANSITION, {path: path, params: params});
    }
  }

-------------------

var RouteStore = Fluxxor.createStore({
  initialize: function(options) {
    this.router = options.router;

    this.bindActions(
      actions.constants.ROUTE.TRANSITION, this.handleRouteTransition
    );
  },

  handleRouteTransition: function(payload) {
    var path = payload.path,
        params = payload.params;

    this.router.transitionTo(path, params);
  }
});

https://github.com/BinaryMuse/fluxxor/blob/master/examples/react-router/app/actions.jsx

---

Dispatch Routing Action from Store

fluxxor/recipe_store.jsx at d11e52a4e6c99909e9584a8cd84b0a709ffb3d22 · BinaryMuse/fluxxor · GitHub

    // Normally an API call to save a new item would be asynchronous,
    // but we're faking a back-end store here, so we'll fake the
    // asynchrony too.
    setTimeout(function() {
      if (!payload.preventTransition) {
        // See https://github.com/BinaryMuse/fluxxor/pull/95#discussion_r23178351
        // for the reason for this dispatch from the store.
        this.flux.actions.routes.transition("recipe", {id: recipe.id});
      }

データPOST　-->　結果返却　-->　URL遷移