如何同步 Redux 状态和 url 哈希标签参数 [英] How to sync Redux state and url hash tag params

问题描述

我们有一个讲座和章节列表，用户可以在其中选择和取消选择它们.这两个列表存储在一个 redux 存储中.现在，我们希望在 url 的哈希标签中保留所选讲座 slug 和章节 slug 的表示，对 url 的任何更改也应更改存储(双向同步).

使用react-router 甚至react-router-redux?

我们真的找不到一些好的例子，其中 react 路由器仅用于维护 url 的哈希标签，也只更新一个组件.

解决方案

我认为你不需要.
(抱歉我的回答不屑一顾，但根据我的经验，这是最好的解决方案.)

Store 是数据的真实来源.这很好.
如果你使用 React Router，让它成为你 URL 状态的真实来源.
您不必把所有东西都放在商店里.

例如，考虑您的用例:

<块引用>

因为url参数只包含讲座的slug和选择的章节.在商店中，我有一个讲座和章节列表，其中包含名称、slug 和选定的布尔值.

问题在于您正在复制数据.存储中的数据 (chapter.selected) 在 React Router 状态中被复制.一种解决方案是同步它们，但这很快就会变得复杂.为什么不让 React Router 成为所选章节的真实来源?

您的商店状态看起来像(简化):

<代码>{//可能被分页，保存在书"中，等等:可见章节Slugs:['介绍'，'哇'，'结尾']，//一个简单的 ID 字典:ChaptersBySlug:{'介绍': {slug: '介绍',title: '介绍'},'哇': {蛞蝓:'哇'，标题:'所有的东西'},'结尾': {slug: '结束',标题:终结！"}}}

就是这样！不要在那里存储 selected.而是让 React Router 处理它.在你的路由处理程序中，写一些类似

function ChapterList({ Chapters }) {返回 (<div>{chapter.map(chapter => <Chapter Chapter={chapter} key={chapter.slug}/>)}

)}const mapStateToProps = (state, ownProps) =>{//使用 React Router 注入的 props:const selectedSlugs = ownProps.params.selectedSlugs.split(';')//使用状态和此信息来生成最终道具:const 章节 = state.visibleChapterSlugs.map(slug => {返回 Object.assign({isSelected: selectedSlugs.indexOf(slug) >-1,}, state.chaptersBySlug[slug])})返回{章节}}导出默认连接(mapStateToProps)(ChapterList)

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

What would be the best solution using react-router or even 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.

解决方案

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.

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.

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?

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 selected there. Instead let React Router handle it. In your route handler, write something like

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)

这篇关于如何同步 Redux 状态和 url 哈希标签参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！