Wie mit Abfrageparametern in reagieren reagieren + react-Router + Fluss

Question

Ich versuche, eine Backbone.Marionette App zu Reagieren zu ersetzen und habe Schwierigkeiten beim Nachdenken über Abfrageparameter. Ich denke, ich vermisse einen wirklich einfachen Frieden, wenn ich dieses Muster verstehe, also entschuldige ich mich, wenn diese Frage völlig unsinnig ist. Ich würde jede Unterstützung schätzen oder mich nur auf eine Richtung hinweisen, die ich genauer googlen kann.

Es gibt eine /users Seite, die Benutzer auflistet, und Sie können die Benutzer über die Suchleiste filtern. Also, wenn Sie die Benutzer filtern möchten, die "Joe" in ihrem Benutzernamen enthalten, würde ich eine Anfrage an den Server mit Abfrageparametern wie /users?username=joe stellen. Zusätzlich kann ich paginieren, indem ich auch einen page Parameter hinzufüge (/users?username=joe&page=1).

Wenn ich nur über die Funktionalität denken, würde der Fluss wahrscheinlich

1. Der Kunde fügt joe mit dem Eingangselement und klickt Suche.
2. Klicken Sie auf die Suche Schaltfläche löst eine Action (wie Action.getUser).
3. Die Action stellt eine Anfrage an den Server und erhält die Ergebnisse
4. Die Dispatcher entsendet eine Funktion mit den Ergebnissen Nutzlast zu wem auch immer (in der Regel die Store) interessiert sich für die Action.
5. Die Store s change 's Zustand ändert sich mit dem neuen Ergebnis durch die durch das Hören auf die Store
6. The View (Component) Wieder macht Action erhalten'.

und es funktioniert wie erwartet. Ich möchte jedoch, dass der Client das aktuelle gefilterte Ergebnis als Lesezeichen speichern und später auf dieselbe Seite zurückkehren kann. Dies bedeutet, dass ich irgendwo eine explizite Information über den Suchbegriff, den der Kunde gemacht hat, speichern muss. Dies ist normalerweise die URL (habe ich recht?). Also muss ich die URL mit Abfrageparametern aktualisieren, um den Suchbegriff zu speichern (/users?username=joe&page=1).

Was ich verwirrt bin, wo und wann die URL aktualisieren? Was ich jetzt herausfinden kann, sind die 2 Optionen unten - und sie scheinen überhaupt nicht sauber zu sein.

Option 1

1. Der Kunde joe auf das Eingangselement fügt klickt und Suche.
2. Klicken Sie auf die Schaltfläche Suche Schaltfläche löst einen Übergang des ReactRouter mit den neuen Abfrageparameter (/users?username=joe&page=1).
3. Die Ansicht (Component) empfängt die neuen Parameter über this.props.params und this.props.query.
4. Die Ansicht (Component) feuert eine Action wie Action.getUser abhängig von den Abfrageparameter, die es empfängt - in diesem Fall username=joe&page=1.

Danach wird es das gleiche ist wie oben

Option 2 (nur 6 unterscheidet sich von dem, was ich oben erläutert)

1. Der Kunde joe mit dem Eingangselement einfügt und Klicks Suche.
2. Klicken Sie auf die Suche Schaltfläche löst eine Action (wie Action.getUser).
3. Die Action stellt eine Anfrage an den Server und erhält die Ergebnisse
4. Die Dispatcher entsendet eine Funktion mit den Ergebnissen Nutzlast zu wem auch immer (in der Regel die Store) interessiert sich für die Action.
5. Die Store s change 's Zustand ändert sich mit dem neuen Ergebnis durch die durch das Hören auf die Store
6. The View (Component) Wieder macht Action erhalten'. Und irgendwie (ich weiß nicht, wie noch) nicht aktualisiert seine URL in Abhängigkeit von seinem props (wie this.props.searchusername und this.props.searchpage)

Was ist die beste Praxis Abfrage params zum Umgang mit? (oder dies ist möglicherweise nicht speziell für Abfrageparameter) Ich missverstehe das Designmuster oder die Architektur vollständig? Vielen Dank im Voraus für jegliche Unterstützung.

Einige Artikel Ich habe lesen

• Any way to get current params or current query from router (outside of component)?
• Async data and Flux stores
• Make it easier to add query parameters
• React Router and Arbitrary Query Params: Page Refreshes Unintentionally on Load?
• Add default params?

Answer 1

Nicht ganz sicher, was Sie von

bedeutet dies bedeutet, dass ich die URL aktualisieren müssen die Informationen (/ Benutzer? Username = joe & page = 1) zu speichern.

Sie werden wahrscheinlich eine ähnliche Struktur haben.

TopContainer.jsx - Users.jsx - eine Liste von User.jsx

Normalerweise TopContainer werden alle Läden beobachten und wenn etwas geändert wird, übergeben Sie es bis users.jsx. Auf diese Weise können Sie in Users.jsx einfach this.props.users rendern, ohne sich um erneute Verteilungen kümmern zu müssen.

Die Suche nach Benutzeraktionen erfolgt normalerweise im componentWillMount-Ereignis von TopContainer, und die Seite wird UserStore anhören. Das ist ein guter Platz, um irgendwelche Abfrageparameter einzuwerfen.So etwas wie dies würde

componentWillUnmount() { 
    let searchTerm = router.getCurrentQuery().searchTerm; 
    UserActions.searchUsers(searchTerm) 
    }, 

Die Seite funktioniert nicht wirklich, ob die URL eine Abfrage params hat oder nicht, es ist nur dümmlich zeigt, was in den Benutzerspeicher.

Dann, wenn die Suche beendet ist, wird Users.jsx neu geladen werden und zeigen die richtigen Ergebnisse

Answer 2

Ich würde die Best Practice betrachten Sie die Taste nur die Ortsabfrage (username) Einstellung einreichen zu sein. Der Rest sollte durch die Hauptreaktionskomponente, die als Router-Komponente zugewiesen ist, erledigt werden. Auf diese Weise können Sie sicher sein, dass bei jedem erneuten Besuch oder Teilen der URL dieselben Ergebnisse erzielt werden können. Und das ist auch sehr generisch.

Etwas wie folgt aus:

let myQuery = this.props.location.query; 
if (myQuery.username) { 
    let theUser = myQuery.username; 
    this.setState({ 
    userName = myQuery.username 
    }); 
} else { 
    this.setState({ 
    userName = false //Show All 
    }); 
} 

Und dann diesen Zustand „username“ verwenden, um den Server zu senden, mit zu suchen. Auf diese Weise müssen Sie den Code der Komponente, die sich um die Auflistung der Benutzer kümmert, nicht wiederholen, da der Server bereits die relevanten Daten sendet.

Nach meiner Erfahrung mit Standortabfragen in React war ich sehr zufrieden mit ihren Reaktivitätszyklen und ihrer Leistung. Ich würde sehr empfehlen, jeden unterschiedlichen App-Status in Bezug auf die URL relevant zu halten.