使用redux和react路由器进行深度链接的推荐方法

Question

我正在使用React（15.3.0）、Redux（3.5.2）和React路由器（2.6.1）构建一个web应用程序。我包括了我在一些相关文章中看到的版本，但它们引用了这些库的旧版本。

我有一些状态，我想坚持在URL上，以便用户可以深入链接到它。通过深度链接，我的意思是用户可以直接链接到页面的状态。我在我的应用程序中有各种页面，每个页面都有一个单独的减速器，每个页面的状态应该在页面之间保持不变。

我读过丹·阿布拉莫夫推荐的方法：如何同步Redux状态和url哈希标签参数，除了在页面之间保持状态之外，这看起来还可以。

一个示例场景：

>

用户在第一页着陆：/page1

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

用户转到第2页：/page2

用户与第2页交互：/page2？状态={…}

用户链接到第1页，希望在离开该页时看到该页。问题如何从第1页恢复状态？

我已经看过react router redux，但我不知道它是否符合我的需要？

对这个问题有共同的解决方法吗？如果是，是什么？如果没有，你能建议一种方法吗？




Answer 1

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

如果是我，我会这样做：

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

我甚至会更进一步，不将状态同步到url，因为这似乎是白费力气（除非用户依赖于为页面添加书签）。只需呈现一个名为“共享此URL”的React组件，并让它呈现一个带有适当查询参数的URL。