使用 redux 和 react-router 进行深度链接的推荐方法

Question

我正在使用 React (15.3.0)、Redux (3.5.2) 和 react-router (2.6.1) 构建一个 Web 应用程序。我包含了我看过一些相关帖子的版本，但它们引用了这些库的旧版本。

我有一些状态希望保留在 URL 上，以便用户可以深层链接到它。通过深度链接，我的意思是用户可以直接链接到页面的状态。我的应用中有多个页面，每个页面都有一个单独的减速器，每个页面的状态应该在页面之间保持。

我已阅读 Dan Abramov 推荐的方法：How to sync Redux state and url hash tag params 除了页面之间的持久状态之外，这似乎没问题。

一个示例场景：

1. 用户登陆第一页：/page1

2. 用户与页面交互导致状态保存在 URL 中：/page1?state={...}

3. 用户转到第 2 页：/page2

4. 用户与页面 2 交互：/page2?state={...}

5. 用户链接到第 1 页，期望在他们离开时看到该页面。问题！我们如何从第 1 页恢复状态？

我查看了 react-router-redux，但我不知道它是否能满足我的需要？

是否有解决此问题的通用方法？如果是这样，那是什么？如果没有，您能建议一种方法吗？

Answer 1

我相信这个问题的答案不止一个；你只需要选择一个并实施它。

如果是我，我会这样做：

1. 使用 redux 存储作为状态的唯一真实来源
2. 以某种方式订阅 store（可能是 redux 中间件）并在 page1 的相关状态发生变化时更新 url 参数
3. 如果用户访问/page1，请使用存储状态（我假设需要将状态同步到服务器才能存储/恢复它）。
4. 如果用户访问 /page1?state={...}，要么 a) 将 URL 状态合并到已存储/已恢复状态，要么 b) 跳过恢复并直接使用 URL。

我什至会更进一步，不将状态同步到 url，因为这似乎是浪费精力（除非用户依赖于为页面添加书签）。只需渲染一个说“共享此 URL”的 React 组件，并让它渲染一个带有正确查询参数的 URL。