W architekturze Flux, w jaki sposób zarządzać stacjami routingu/adresami URL po stronie klienta?

Question

jako uzupełnienie do Store lifecycle question,

W typowej aplikacji internetowej dobrze jest mieć skrót do aktualnego stanu aplikacji za pośrednictwem adresu URL, dzięki czemu można ponownie odwiedzić ten stan i korzystać z przodu iz tyłu przycisków do poruszania między państwami.

Z Flux chcemy, aby wszystkie akcje przechodziły przez program rozsyłający, co, jak sądzę, obejmuje również zmianę adresu URL. jak zarządzałbyś zmianami adresów URL w aplikacji strumienia?

Answer 1

[Aktualizacja]

Po pracy na pęczek React/aplikacji topnika, doszedłem do wniosku, że wolę routingu być traktowane oddzielnie i prostopadle do topnika. Strategia polega na tym, że adresy URL/trasy powinny określać, które komponenty są montowane, a komponenty żądają danych ze sklepów na podstawie parametrów trasy i, w razie potrzeby, innego stanu aplikacji.

[Original Odpowiedź]

Podejście wziąłem z ostatnim projekcie podczas eksperymentowania z Flux było wykonanie warstwy routingu tylko kolejny sklep. Oznacza to, że wszystkie linki, które zmieniają adres URL, faktycznie wywołują akcję za pośrednictwem kontrolera żądającego uaktualnienia trasy. Odpowiedź na tę wiadomość została przesłana na adres RouteStore, ustawiając adres URL w przeglądarce i ustawiając niektóre dane wewnętrzne (przez route-recognizer), aby widoki mogły wysyłać zapytania do nowych danych routingu po zdarzeniu ze sklepu ze zdarzenia change.

Jednym z nieoczywistych elementów dla mnie było to, jak zapewnić, że zmiany URL wywołały akcje; Skończyło się na tym, że utworzyłem mixin, aby to sobie poradzić (uwaga: to nie jest w 100% niezawodne, ale działało dla aplikacji, z której korzystałem, być może będziesz musiał wprowadzić modyfikacje dostosowane do twoich potrzeb).

// 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); 
    } 
    } 
}; 

Byłoby być używany jako tak:

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

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

    // ... 
}); 

procedury obsługi w sklepie może wyglądać:

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"); 
    } 
} 

Answer 2

większość przykładów w dzikiej wykorzystują React Router, ram w oparciu o router Ember. Ważną częścią jest konfiguracja tras jak deklaratywnej specyfikacji komponentów:

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)