如何同步Redux的状态和URL哈希标签PARAMS如何同步Redux的状态和URL哈希标签PARA

我们有讲座和章节，用户可以选择和取消它们的列表。这两个列表存储在一个终极版商店。现在，我们要保持选定的演讲蛞蝓和URL的散列标签章蛞蝓和网址的任何更改的表示应该改变商店太（双向同步处理）。

什么是使用的最佳解决方案做出反应，路由器，甚至反应路由器，终极版？

我们不能真正找到一些很好的例子，其中路由器只用于维护URL的哈希标签也只更新的一个部件的反应。

谢谢！！！

Answer 1:

我认为你不需要。
（对不起，一副不屑一顾的答案，但它在我的经验，最好的解决方案。）

商店是检验真理的为您的数据源。这可以。
如果您使用路由器做出反应，让它成为真理，为您的URL状态源。
你不必把一切都在店里。

例如，考虑你的使用情况：

因为URL参数只包含讲座的蛞蝓和被选择的章节。在店里我有讲座和章节使用一个名称，蛞蝓和选择的布尔值的列表。

问题是你要复制的数据。在商店（数据chapter.selected ）在阵营路由器状态被复制。一个解决办法是将两者同步的，但是这很快变得复杂。为什么不让它再反应路由器是检验真理的选定章节的来源？

那么您的商店状态会是什么样子（简体）：

{
  // 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那里。相反，让它再反应路由器处理。在你的路由处理，喜欢写东西

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)

Answer 2:

react-router-redux可以帮助你注入的URL的东西来存储，所以每次散列标签变了，店也。