Думаю, в этом нет необходимости.
(Извините за пренебрежительный ответ, но это лучшее решение в моем опыте.)
Магазин - это источник правды для ваших данных. Это нормально.
Если вы используете React Router, пусть он будет источником истины для состояния вашего URL.
Вам не нужно хранить все в магазине.
Например, учитывая ваш вариант использования:
Потому что параметры url содержат только заголовки лекций и выбранных глав. В магазине у меня есть список лекций и глав с именем, заголовком и выбранным логическим значением.
Проблема в том, что вы дублируете данные. Данные в магазине (chapter.selected
) дублируются в состоянии React Router. Одно из решений - синхронизировать их, но это быстро усложняется. Почему бы просто не позволить React Router стать источником истины для выбранных глав?
Тогда состояние вашего магазина будет выглядеть (упрощенно):
{
// 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!'
}
}
}
Вот и все! Не храните там selected
. Вместо этого позвольте React Router справиться с этим. В обработчике маршрута напишите что-нибудь вроде
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)
person
Dan Abramov
schedule
20.04.2016