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

Question

我们有一个讲座和章节列表，用户可以在其中 select 和 deselect 它们。这两个列表存储在 redux 存储中。现在我们想在 url 的散列标签中保留 selected lecture slugs 和 chapter slugs 的表示，对 url 的任何更改也应该更改存储（双向-正在同步）。

使用 react-router or even react-router-redux 的最佳解决方案是什么？

我们真的找不到一些很好的例子，其中 react router 仅用于维护 url 的散列标签并且也只更新一个组件。

Answer 1

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

Answer 2

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

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

例如，考虑您的用例：

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.

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

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

{
  // 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。而是让 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)

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

How to sync Redux state and url hash tag params

javascript

reactjs

react-router

redux

react-router-redux