javascript - recargar - window history replacestate({}

Cómo sincronizar el estado de Redux y los parámetros de etiqueta hash url

Question

Tenemos una lista de conferencias y capítulos donde el usuario puede seleccionarlos y deseleccionarlos. Las dos listas se almacenan en una tienda redux. Ahora queremos mantener una representación de los slugs de conferencia seleccionados y los slugs de capítulo en la etiqueta hash de la url y cualquier cambio en la url también debería cambiar la tienda (sincronización bidireccional).

¿Cuál sería la mejor solución usando react-router o incluso react-router-redux ?

Realmente no pudimos encontrar algunos buenos ejemplos en los que el enrutador de reacción solo se usa para mantener la etiqueta hash de una URL y también solo actualiza un componente.

¡¡¡Gracias!!!

Answer 1

Creo que no necesitas hacerlo.
(Perdón por una respuesta desdeñosa, pero es la mejor solución en mi experiencia).

La tienda es la fuente de la verdad para sus datos. Esto esta bien.
Si usa React Router, deje que sea la fuente de la verdad para su estado de URL.
No tienes que guardar todo en la tienda.

Por ejemplo, considerando su caso de uso:

Porque los parámetros de url solo contienen las babosas de las conferencias y los capítulos que se seleccionan. En la tienda tengo una lista de conferencias y capítulos con un nombre, una babosa y un valor booleano seleccionado.

El problema es que estás duplicando los datos. Los datos en la tienda ( chapter.selected ) se duplican en el estado React Router. Una solución sería sincronizarlos, pero esto rápidamente se vuelve complejo. ¿Por qué no dejar que React Router sea la fuente de la verdad para capítulos seleccionados?

El estado de su tienda se vería así (simplificado):

{
  // 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!''
    }
  }
}

¡Eso es! No almacene selected allí. En su lugar, deje que React Router lo maneje. En su controlador de ruta, escriba algo como

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)

Answer 2

react-router-redux puede ayudarlo a inyectar las cosas de la url para almacenar, así que cada vez que cambie la etiqueta hash, almacene también.