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

问题描述

我们有一个讲座和章节列表，用户可以在其中选择和取消选择它们。这两个列表存储在redux存储中。
现在我们想要在url的hash标签中保留选定的讲座slugs和章节slugs的表示，并且对url的任何更改都应该更改存储（双向同步）。

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

使用 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.

谢谢!!!

推荐答案

我认为你不需要。

（很抱歉这是一个不屑一顾的答案，但根据我的经验，这是最好的解决方案。）

I think you don’t need to.
(Sorry for a dismissive answer but it’s the best solution in my experience.)

商店是您数据的真实来源。这很好。

如果您使用React Router，请将它作为您的URL状态的真实来源。

您不必将所有内容保存在商店中。

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.

例如，考虑你的用例：

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

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.

问题是你'重新复制数据。商店中的数据（ chapter.selected ）在React Router状态下重复。一种解决方案是同步它们，但这很快变得复杂。为什么不让React Router成为所选章节的真实来源呢？

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

就是这样！不要在那里存储选择。而是让React Router处理它。在您的路由处理程序中，写下类似

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屋！