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

Question

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

我有一些状态，我想保留 URL，以便用户可以深层链接到它。通过深层链接，我的意思是用户可以直接链接到页面的状态。我的应用程序中有多个页面，每个页面都有一个单独的 reducer ，每个页面的状态应该在页面之间保持不变。

我已阅读 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. 以某种方式订阅商店(可能是 redux 中间件)，并在 page1 的相关状态发生变化时更新 url 参数
3. 如果用户访问 /page1 ，使用存储的状态(我假设状态需要同步到服务器才能存储/恢复它)。
4. 如果用户访问 /page1?state={...} ，要么 a) 将 URL 状态合并到存储/恢复状态，要么 b) 跳过恢复并直接使用 URL。

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