So synchronisieren Sie Redux-Status- und URL-Hash-Tag-Parameter

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.

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:

Weil die URL-Parameter nur die Slugs der Vorlesungen und der ausgewählten Kapitel enthalten. Im Laden habe ich eine Liste von Vorlesungen und Kapiteln mit einem Namen, einer Schnecke und einem ausgewählten Booleschen Wert.

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 selecteddort aufbewahren. Lassen Sie stattdessen React Router damit umgehen. Schreiben Sie in Ihren Routen-Handler so etwas wie

function 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)

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.