Wie Zustand über anhalten reagieren Router Übergänge

Question

ich die ziemlich typisch reagieren-Router haben App ein:

var App = React.createClass({ 
    render: function() { 
     return (< RouteHandler />); 
    } 
}); 

var routes = (
    <Route handler = { App }> 
     < Route name = "Todo" path = "todo/:id" handler = {Todo}/> 
     < DefaultRoute name = "Todos" handler = {Todos}/> 
    </Route> 
); 

Router.run(routes, function(Handler) { 
    React.render(< Handler /> , document.getElementById('content')); 
}); 

Mein Problem ist, dass meine Todos Komponente einige Suchfilter auf sie hat, und ich möchte beharren diese Filter, wenn ich auf eine bestimmte Todo und zurück übergehen. Die offensichtliche Lösung ist, diese Filterwerte auf App 's Zustand zu speichern, aber ich kann einen eleganten Weg nicht finden, Todos Zugang zum App' s Zustand zu erlauben.

Irgendwelche Hinweise?

Nachtrag: Diese App verwendet Reflux sowie React-Router.

Answer 1

würde ich die URL der Zustands Filter und Seitenzahl für Anzeigen zu speichern.

Einer der Reaktion Router "Vorteile dieses Ansatzes" ist: URLs sind Ihr erster Gedanke, kein Nachdenken.

Die URL ist ein grundlegender Teil des Webs, verwenden Sie es zu Ihrem Vorteil, versuchen Sie nicht, es zu vermeiden.

Durch Speichern des Filterstatus in der URL erhalten Sie die Schaltfläche "Button-Unterstützung" kostenlos und erlauben Ihren Benutzern, diesen gefilterten Status als Lesezeichen oder Link beizubehalten.

Answer 2

Sie könnten das tun, indem Sie etwas wie verwenden, um den Status in Ihrer gesamten Anwendung zu verwalten. Es würde als zentrale Speicher und zentrale Befehlsbibliothek (Aktionen)

var Reflux = require('reflux'); 

var actions = Reflux.createActions(
    ["getAction", "saveAction"] 
); 

var DataStore = Reflux.createStore({ 
    data: data, 
    listenables: [actions], 
    init: function() { 
    this.trigger(this.data); 
    }, 
    onGetAction: function() { 
    // some ajax if you like 
    }, 
    onSaveAction: function() { 
    // more ajax 
    }, 
    getInitialState: function() { 
    return this.data; 
    } 
}); 

var App = React.createClass({ 
    mixins: [Reflux.connect(DataStore, 'datastore')], 
    render: function() { 
    var d = this.state.datastore; 
    return (
    ...