web-dev-qa-db-ja.com

Fluxアーキテクチャでは、クライアント側のルーティング/ URL状態をどのように管理しますか？

ストアのライフサイクルに関する質問 のフォローアップとして、

典型的なWebアプリでは、URLを介して現在のアプリケーション状態へのショートカットを作成できるので、その状態に再度アクセスし、[進む]ボタンと[戻る]ボタンを使用して状態間を移動できます。

Fluxでは、すべてのアクションがディスパッチャを通過するようにします。これには、URLの変更も含まれると思います。フラックスアプリケーション内でURLの変更をどのように管理しますか？

reactjsreactjs-flux
42
krs

[更新]

一連のReact/fluxアプリケーションに取り組んだ後、私はルーティングを個別にかつフラックスに対して直角に処理することを好むという結論に達しました。戦略は、URL /ルートがどのコンポーネントをマウントするかを決定し、コンポーネントが必要に応じてルートパラメータと他のアプリケーションの状態に基づいてストアからデータをリクエストすることです。

[元の回答]

Fluxの実験中に最近のプロジェクトで採用したアプローチは、ルーティングレイヤーを別のストアにすることでした。これは、URLを変更するすべてのリンクが、ルートの更新を要求するディスパッチャーを通じて実際にアクションをトリガーすることを意味します。 RouteStoreは、ブラウザーでURLを設定し、内部データを（ route-recognizer を介して）設定することによってこのディスパッチに応答し、ストアがchangeイベントがストアから発生したときに新しいルーティングデータをクエリできるようにしました。

私にとって自明ではない部分の1つは、URLの変更によってアクションがトリガーされるようにする方法でした。これを管理するためのミックスインを作成してしまいました（注：これは100％堅牢ではありませんが、使用していたアプリでは機能しました。ニーズに合わせて変更を加える必要がある場合があります）。

// Mix-in to the top-level component to capture `click`
// events on all links and turn them into action dispatches;
// also manage HTML5 history via pushState/popState
var RoutingMixin = {
  componentDidMount: function() {
    // Some browsers have some weirdness with firing an extra 'popState'
    // right when the page loads
    var firstPopState = true;

    // Intercept all bubbled click events on the app's element
    this.getDOMNode().addEventListener('click', this._handleRouteClick);

    window.onpopstate = function(e) {
      if (firstPopState) {
        firstPopState = false;
        return;
      }
      var path = document.location.toString().replace(document.location.Origin, '');
      this.handleRouteChange(path, true);
    }.bind(this);
  },

  componentWillUnmount: function() {
    this.getDOMNode().removeEventListener('click', this._handleRouteClick);
    window.onpopstate = null;
  },

  _handleRouteClick: function(e) {
    var target = e.target;

    // figure out if we clicked on an `a` tag
    while(target && target.tagName !== 'A') {
      target = target.parentNode;
    }

    if (!target) return;

    // if the user was holding a modifier key, don't intercept
    if (!e.altKey && !e.ctrlKey && !e.shiftKey && !e.metaKey) {
      e.preventDefault();

      var href = target.attributes.href.value;
      this.handleRouteChange(href, false);
    }
  }
};

次のように使用されます。

var ApplicationView = React.createClass({
  mixins: [RoutingMixin],

  handleRouteChange: function(newUrl, fromHistory) {
    this.dispatcher.dispatch(RouteActions.changeUrl(newUrl, fromHistory));
  },

  // ...
});

ストアのハンドラーは次のようになります。

RouteStore.prototype.handleChangeUrl = function(href, skipHistory) {
  var isFullUrl = function(url) {
    return url.indexOf('http://') === 0 || url.indexOf('https://') === 0;
  }

  // links with a protocol simply change the location
  if (isFullUrl(href)) {
    document.location = href;
  } else {
    // this._router is a route-recognizer instance
    var results = this._router.recognize(href);
    if (results && results.length) {
      var route = results[0].handler(href, results[0].params);
      this.currentRoute = route;
      if (!skipHistory) history.pushState(href, '', href);
    }

    this.emit("change");
  }
}
43
Michelle Tilley

実際のほとんどの例では、Ember routerに基づくフレームワークである React Router を使用しています。重要な部分は、コンポーネントの宣言仕様としてのルートの構成です。

React.render((
  <Router>
    <Route path="/" component={App}>
      <Route path="about" component={About}/>
      <Route path="users" component={Users}>
        <Route path="/user/:userId" component={User}/>
      </Route>
      <Redirect from="/" to="about" />
      <NotFoundRoute handler={NoMatch} />
    </Route>
  </Router>
), document.body)
2
Nacho Coloma