Penso che non sia necessario.
(Ci scusiamo per una risposta sprezzante, ma è la soluzione migliore nella mia esperienza.)
Il negozio è la fonte della verità per i dati. Questo va bene.
Se si utilizza React Router, lasciare che sia la fonte della verità per lo stato dell'URL.
Non devi tenere tutto nel negozio.
Per esempio, considerando il tuo caso d'uso:
Poiché i parametri URL contengono solo le lumache delle lezioni e dei capitoli che sono selezionati. Nel negozio ho un elenco di lezioni e capitoli con un nome, slug e un valore booleano selezionato.
Il problema è che stai duplicando i dati. I dati nel negozio (chapter.selected
) sono duplicati nello stato React Router. Una soluzione sarebbe la loro sincronizzazione, ma questo diventa rapidamente complesso. Perché non lasciare che React Router sia la fonte della verità per i capitoli selezionati?
tuo stato negozio sarebbe quindi simile (semplificato):
{
// 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!'
}
}
}
Questo è tutto! Non conservare selected
lì. Invece lascia che React Router lo gestisca. Nel vostro gestore di percorso, scrivere qualcosa come
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)
Perché vuoi mantenere questo stato nel negozio, piuttosto che semplicemente utilizzando Reagire Router come fonte di verità per i parametri URL, e utilizzando gli oggetti di scena Inserisce nel vostro mapStateToProps (state, ownProps)? –
Poiché i parametri dell'URL contengono solo gli slug delle lezioni e i capitoli selezionati. Nel negozio ho un elenco di lezioni e capitoli con un nome, slug e un valore booleano selezionato. – JoKer
ad es. utilizzare https://peterbeshai.com/react-url-query/? – mb21