Wir haben eine Liste von Vorlesungen und Kapiteln, in denen der Benutzer sie auswählen und abwählen kann. Die beiden Listen werden in einem Redux-Speicher gespeichert. Jetzt möchten wir eine Darstellung ausgewählter Vorlesungs- und Kapitel-Slugs im Hash-Tag der URL behalten, und alle Änderungen an der URL sollten auch den Speicher ändern (bidirektionale Synchronisierung).
Was wäre die beste Lösung mit React-Router oder sogar React-Router-Redux ?
Wir konnten nicht wirklich einige gute Beispiele finden, bei denen der Reaktionsrouter nur zum Verwalten des Hash-Tags einer URL verwendet wird und auch nur eine Komponente aktualisiert.
Antworten:
Ich denke du musst nicht.
(Entschuldigen Sie eine abweisende Antwort, aber meiner Erfahrung nach ist dies die beste Lösung.)
Der Speicher ist die Quelle der Wahrheit für Ihre Daten. Das ist in Ordnung.
Wenn Sie React Router verwenden, lassen Sie es die Quelle der Wahrheit für Ihren URL-Status sein.
Sie müssen nicht alles im Laden behalten.
Betrachten Sie zum Beispiel Ihren Anwendungsfall:
Das Problem ist, dass Sie die Daten duplizieren. Die Daten in store (
chapter.selected
) werden im React Router-Status dupliziert. Eine Lösung wäre, sie zu synchronisieren, aber dies wird schnell komplex. Warum nicht einfach React Router die Quelle der Wahrheit für ausgewählte Kapitel sein lassen?Ihr Geschäftsstatus würde dann wie folgt aussehen (vereinfacht):
{ // Might be paginated, kept inside a "book", etc: visibleChapterSlugs: ['intro', 'wow', 'ending'], // A simple ID dictionary: chaptersBySlug: { 'intro': { slug: 'intro', title: 'Introduction' }, 'wow': { slug: 'wow', title: 'All the things' }, 'ending': { slug: 'ending', title: 'The End!' } } }
Das ist es! Nicht
selected
dort aufbewahren. Lassen Sie stattdessen React Router damit umgehen. Schreiben Sie in Ihren Routen-Handler so etwas wiefunction ChapterList({ chapters }) { return ( <div> {chapters.map(chapter => <Chapter chapter={chapter} key={chapter.slug} />)} </div> ) } const mapStateToProps = (state, ownProps) => { // Use props injected by React Router: const selectedSlugs = ownProps.params.selectedSlugs.split(';') // Use both state and this information to generate final props: const chapters = state.visibleChapterSlugs.map(slug => { return Object.assign({ isSelected: selectedSlugs.indexOf(slug) > -1, }, state.chaptersBySlug[slug]) }) return { chapters } } export default connect(mapStateToProps)(ChapterList)
quelle
browserHistory.push()
(woherbrowserHistory
wird er importiertreact-router
). Ich würde wahrscheinlich Redux Thunk verwenden, um klar zu machen, dass es einen Nebeneffekt gibt. Ich würdedispatch({ ... }); browserHistory.push(...)
drinnen anrufen .react-router-redux
kann Ihnen helfen, das zu speichernde URL-Material einzufügen. Speichern Sie es also jedes Mal, wenn sich das Hash-Tag ändert.quelle