Flux 아키텍처에서 클라이언트 측 라우팅/url 상태를 어떻게 관리하십니까?

Flux 아키텍처에서 클라이언트 측 라우팅/url 상태를 어떻게 관리하십니까?

Store 라이프사이클 질문에 대한 후속 조치로서,

일반적인 웹 앱에서는 URL을 통해 현재 응용 프로그램 상태에 대한 바로 가기를 사용하면 해당 상태를 다시 확인하고 앞으로 및 뒤로 버튼을 사용하여 상태 사이를 이동할 수 있다.

플럭스를 통해 우리는 모든 조치가 디스패쳐를 통해 이루어지기를 원하며, 나는 또한 URL 변경을 포함하고 있다고 생각한다.플럭스 애플리케이션 내에서 URL 변경을 어떻게 관리하시겠습니까?

[업데이트]

리액션/플럭스 어플리케이션 여러 개를 작업한 후, 나는 라우팅을 플럭스(flux)에 대해 별도로, 직교적으로 처리하는 것이 더 낫다는 결론을 내렸다.URL/루트는 어떤 구성요소가 탑재되는지 판단해야 하며, 구성요소는 필요에 따라 경로 매개변수와 기타 애플리케이션 상태를 기반으로 스토어에 데이터를 요청해야 한다는 전략이다.

[원문답]

플럭스를 실험하면서 내가 최근 프로젝트를 진행하면서 취한 접근방식은 라우팅 레이어를 단지 또 다른 저장소로 만드는 것이었다.이는 URL을 변경하는 모든 링크가 실제로 경로를 업데이트하도록 요청하는 발송인을 통해 액션을 트리거한다는 것을 의미한다.aRouteStore이 디스패치에 응답하여 브라우저의 URL을 설정하고 (경로 인식기를 통해) 일부 내부 데이터를 설정하여 보기가 에서 새로운 라우팅 데이터를 쿼리할 수 있도록 했다.change가게에서 해고되는 사건

나에게 있어 한 가지 분명한 점은 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");
  }
}

야생에서 대부분의 예는 Ember 라우터에 기초한 프레임워크인 Resact 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)

참조URL: https://stackoverflow.com/questions/23624651/in-flux-architecture-how-do-you-manage-client-side-routing-url-states