使用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. 用户与导致状态保存在网址中的页面进行互动：/page1?state={...}

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

4. 用户与第2页进行互动：/page2?state={...}

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

我看过react-router-redux，但我不知道它是否能满足我的需求呢？

这个问题有一个共同的方法吗？如果是这样的话是什么？如果没有，你能提出一个方法吗？

Answer 1

我确定这个答案不止一个;你只需要选择一个并实现它。

如果是我，我会这样做：

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

我甚至会更进一步，不要将状态同步到网址，因为这似乎是浪费精力（除非用户依赖于为网页添加书签）。只需渲染一个React组件，然后说出＆＃34;分享此网址＆＃34;并使用适当的查询参数呈现URL。