如何同步Redux状态和url查询参数

Question

我有一个带搜索面板的网页。搜索面板有几个输入字段：id，size，...

我想要的是当用户设置搜索值（例如：id = 123和size = 45）并按下搜索按钮时：

应使用新的搜索值（id = 123和size = 45）更新
1. Redux reducer中的searchState
2. 网址应更改为＆＃34; http://mydomain/home?id=123&size=45＆＃34;

另一方面，如果用户将网址更改为http://mydomain/home?id=111&size=22，则：

1. reducer中的searchState应使用新的搜索值（id = 111和size = 22）
进行更改
2. 应使用新值（id = 111和size = 22）
更新UI搜索面板输入

如何达成目标？我应该使用什么路由器（react-router，redux-router，react-router-redux ot other）？

Answer 1

我建议您直接使用React Router，不将searchState保留在Redux中。 React Router会将URL参数注入您的组件，您可以在mapStateToProps(state, ownProps)中使用它们来计算最终的道具。

如果您确实希望将路线更改视为操作，则可以使用react-router-redux进行双向同步，但它不会为您提供状态中的参数 - 只是当前位置。如果您想要记录和重放操作，并在重播时更新URL栏，则唯一的用例。

这绝不是必需的 - 在大多数情况下，直接使用React Router就足够了。

Answer 2

简而言之：您可以使用redux-query-sync来保持商店中的网址参数和字段同步。它没有任何路由器。

更长的故事： 在努力解决同样的问题时，我首先感谢Dan Abramov的answer，建议（在我看来）将URL视为第二个商店＆＃39 ;,外部应用程序状态的一部分Redux商店。但后来我发现有两种商店＆＃39;使得修改代码变得困难，例如将事物从一个移动到另一个，因为每个商店都存储了一个＆＃39;有一个不同的界面。作为开发人员，我宁愿选择Redux状态中的任何字段，并在URL中公开它们，就好像该位置是我的状态（的一部分）的一个小窗口。

因此我刚刚发布了redux-query-sync，让您提供一个选择器函数，用于从状态中选择一个值，然后在窗口位置以您指定的参数名称显示该值。为了让它在另一个方向上同步，从URL到Redux状态（例如，当应用程序最初加载时），您可以提供将传递参数值的动作创建者，这样您的reducer可以相应地更新状态。 / p>

Answer 3

以下是我处理第一个场景的方式：

• 当输入值更改时，其组件会触发从其容器作为prop传递的回调。

• 在回调中，容器调度负责在事件发生时更新Redux状态的操作。

• 在动作调用之后的行中，我使用this.context.router.push()并使用正确的查询字符串传递url。

我不确定这是正确的做法。我发现最好先更新URL，因为在我看来，查询字符串应该是状态的反映而不是主数据。

关于相反的情况，我真的不确定。似乎手动设置URL会触发完全重新加载，但我可能会弄错。

至于使用哪个路由器，我自己使用React Router。我并没有真正发现使用其他人的价值，this discussion对我来说是个难题。

Answer 4

我最近完成了类似的问题。我使用MobX作为我的商店，使用redux-router作为我的路由器。 （我使用react-router做得很好，但是我需要在组件外部发送推送操作 - redux作为一个全球商店在这里工作得很好）

我的解决方案与cantera所描述的类似 - 我的路由器状态仅仅是表单状态的反映。这有额外的好处，不必放弃我的表单状态，完全依赖于路由器状态。

在第一个场景中，

1）我像往常一样更新表单输入，触发结果组件中的重新渲染。

2）在结果组件的componentDidUpdate()中，我使用表单props来构造更新的查询字符串。

3）我将更新的查询字符串推送到路由器状态。这纯粹是为了更新URL。

对于第二种情况

1）在根onEnter组件的Route挂钩中，我获取可用的查询字符串并将其解析为初始表单值。

2）我用值更新我的商店。这仅适用于首次加载页面，以及路由器状态指示表单状态的唯一时间。

编辑：当您返回浏览器历史记录时，此解决方案不会考虑这种情况，因为该网址不会更新您的状态。

Answer 5

我会推荐新工具react-url-query，它可以非常直接地进行同步。

Answer 6

我最近还完成了针对我公司的应用程序的此功能的研究。我们想向URL添加不同的搜索查询。

我想在这里分享一些事情：

1）我们使用了Redux存储和react-router。由于我们也使用了Typescript，因此最终使用了react-router的RouteComponentProps来使用this.props.history.push（）更新URL。

2）我们将所有搜索查询保留在Redux存储中。更新Redux存储和URL的工作流程如下：

在应用程序中选择一些过滤选项=>调度操作以更新Redux存储中的过滤状态=>更新URL

3）最后，我们还希望用户能够输入带有查询参数的URL，它将更新应用程序中的所有过滤器。为此，工作流程更加简单：

用户输入URL =>分派操作，以使用URL中的查询参数更新Redux状态。 Redux状态的更新将自动导致应用中的重新渲染，并且所有过滤器都会更新。

因此，最重要的是始终保持Redux状态和URL彼此同步。