使用 redux 和 react-router 进行深度链接的推荐方法
Recommended approach to deep linking using redux and react-router
我正在使用 React (15.3.0)、Redux (3.5.2) 和 react-router (2.6.1) 构建一个网络应用程序。我包括了我看过一些相关帖子的版本，但它们引用了这些库的旧版本。
我有一些状态想保留在 URL 上，以便用户可以深入 link。通过深度 linking，我的意思是用户可以 link 直接进入页面状态。我的应用程序中有多个页面，每个页面都有一个单独的 reducer，每个页面的状态应该在页面之间保持不变。
我读过 Dan Abramov 推荐的方法：
这看起来不错，除了页面之间的持续状态。
示例场景：
用户到达第一页：/page1
用户与页面交互导致状态保存在 URL：/page1?state={...}
用户转到第 2 页：/page2
用户与页面 2 交互：/page2?state={...}
用户 link 转到第 1 页，希望在离开时看到该页面。问题！我们如何恢复第 1 页的状态？
我看过 react-router-redux，但我不知道它是否满足我的需要？
是否有解决此问题的通用方法？如果有，那是什么？如果没有，你能推荐一种方法吗？
我相信对此有不止一个答案；你只需要选择一个并实施它。
如果是我，我会这样做：
- 使用 redux 存储作为状态的唯一真实来源
- 以某种方式订阅商店（可能是 redux 中间件）并在 page1 的相关状态发生变化时更新 url 参数
- 如果用户访问
/page1，请使用存储的状态（我假设状态需要同步到服务器才能 store/recover）。
- 如果用户访问
/page1?state={...}，要么 a) 将 URL 状态合并到 stored/recovered 状态，要么 b) 跳过恢复并直接使用 URL。
我什至会走得更远，不会将状态同步到 url，因为这似乎是浪费精力（除非用户依赖于为页面添加书签）。只需渲染一个 React 组件说 "Share this URL" 并让它渲染一个带有适当查询参数的 URL。
我正在使用 React (15.3.0)、Redux (3.5.2) 和 react-router (2.6.1) 构建一个网络应用程序。我包括了我看过一些相关帖子的版本，但它们引用了这些库的旧版本。
我有一些状态想保留在 URL 上，以便用户可以深入 link。通过深度 linking，我的意思是用户可以 link 直接进入页面状态。我的应用程序中有多个页面，每个页面都有一个单独的 reducer，每个页面的状态应该在页面之间保持不变。
我读过 Dan Abramov 推荐的方法：
示例场景：
用户到达第一页：
/page1用户与页面交互导致状态保存在 URL：
/page1?state={...}用户转到第 2 页：
/page2用户与页面 2 交互：
/page2?state={...}用户 link 转到第 1 页，希望在离开时看到该页面。问题！我们如何恢复第 1 页的状态？
我看过 react-router-redux，但我不知道它是否满足我的需要？
是否有解决此问题的通用方法？如果有，那是什么？如果没有，你能推荐一种方法吗？
我相信对此有不止一个答案；你只需要选择一个并实施它。
如果是我，我会这样做：
- 使用 redux 存储作为状态的唯一真实来源
- 以某种方式订阅商店（可能是 redux 中间件）并在 page1 的相关状态发生变化时更新 url 参数
- 如果用户访问
/page1，请使用存储的状态（我假设状态需要同步到服务器才能 store/recover）。 - 如果用户访问
/page1?state={...}，要么 a) 将 URL 状态合并到 stored/recovered 状态，要么 b) 跳过恢复并直接使用 URL。
我什至会走得更远，不会将状态同步到 url，因为这似乎是浪费精力（除非用户依赖于为页面添加书签）。只需渲染一个 React 组件说 "Share this URL" 并让它渲染一个带有适当查询参数的 URL。