Javascript 如何同步 Redux 状态和 url 哈希标签参数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36722584/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to sync Redux state and url hash tag params
提问by JoKer
We have a list of lectures and chapters where the user can select and deselect them. The two lists are stored in a redux store. Now we want to keep a representation of selected lecture slugs and chapter slugs in the hash tag of the url and any changes to the url should change the store too (two-way-syncing).
我们有一个讲座和章节列表，用户可以在其中选择和取消选择它们。这两个列表存储在一个 redux 存储中。现在我们希望在 url 的哈希标签中保留所选讲座 slug 和章节 slug 的表示，对 url 的任何更改也应该更改存储（双向同步）。
What would be the best solution using react-routeror even react-router-redux?
使用react-router甚至react-router-redux的最佳解决方案是什么？
We couldn't really find some good examples where the react router is only used to maintain the hash tag of an url and also only updates one component.
我们真的找不到一些好的例子，其中 react 路由器仅用于维护 url 的哈希标签，并且只更新一个组件。
Thanks!!!
谢谢！！！
回答by Dan Abramov
I think you don't need to.
(Sorry for a dismissive answer but it's the best solution in my experience.)
我认为你不需要。
（对不起，我的回答不屑一顾，但这是我经验中最好的解决方案。）
Store is the source of truth for your data. This is fine.
If you use React Router, let it be the source of truth for your URL state.
You don't have to keep everything in the store.
Store 是您数据的真实来源。这可以。
如果你使用 React Router，让它成为你 URL 状态的真实来源。
你不必把所有东西都放在商店里。
For example, considering your use case:
例如，考虑您的用例：
Because the url parameters only contain the slugs of the lectures and the chapters which are selected. In the store I have a list of lectures and chapters with a name, slug and a selected Boolean value.
因为url参数只包含讲座的slug和选择的章节。在商店中，我有一个讲座和章节列表，其中包含名称、slug 和选定的布尔值。
The problem is you're duplicating the data. The data in the store (chapter.selected) is duplicated in the React Router state. One solution would be syncing them, but this quickly gets complex. Why not just let React Router be the source of truth for selected chapters?
问题是您正在复制数据。store ( chapter.selected) 中的数据在React Router 状态中被复制。一种解决方案是同步它们，但这很快就会变得复杂。为什么不让 React Router 成为所选章节的真实来源？
Your store state would then look like (simplified):
您的商店状态将如下所示（简化）：
{
// 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!'
}
}
}
That's it! Don't store selectedthere. Instead let React Router handle it. In your route handler, write something like
就是这样！不要存放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)
回答by David Guan
react-router-reduxcan help you inject the url stuff to store, so every time hash tag changed, store also.
react-router-redux可以帮助您注入要存储的 url 内容，因此每次哈希标记更改时，也要存储。
