如何同步Redux状态和url哈希标记参数

Question

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

什么是最好的解决方案，使用反应路由器或甚至反应路由器redux？

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

Answer 1

react-router-redux可以帮助你注入url的东西来存储，所以每次hash标签改变，存储也。

Answer 2

我想你不需要
（很抱歉回答得不屑一顾，但这是我经验中最好的解决方案。）

存储是数据的真实来源。这很好
如果您使用React路由器，请让它成为您URL状态的真实来源<你不必把所有东西都放在店里。

例如，考虑您的用例：

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

问题是你在复制数据。存储区中的数据（章节。所选）在React路由器状态下重复。一种解决方案是同步它们，但这很快就会变得复杂。为什么不让它成为选定章节的真相来源？

然后，您的商店状态将如下所示（简化）：

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

就这样！不要将所选的存储在那里。相反，让路由器来处理它。在路由处理程序中，编写如下内容

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)