如何同步Redux状态和url查询参数
我有一个带有搜索面板的网页。搜索面板有几个输入字段：id， size，...
我想要的是当用户设置搜索值（例如：id=123和size=45）并按下搜索按钮时：
- Redux reducer中的searchState应更新为新的搜索值（id=123，size=45）
- URL应更改为“http://mydomain/home?id=123
另一方面，如果用户将URL更改为超文本传输协议：//myDomina/home？ID=111
- 应使用新的搜索值（id=111和size=22）更改reducer中的searchState
- UI搜索面板输入应更新为新值（id=111，大小=22）
如何达到目标？我应该使用什么路由器（反应路由器，还原路由器，反应路由器-还原其他）？
共有3个答案
我最近也完成了我公司应用程序的这项功能。我们想向URL添加不同的搜索查询。
我想在这里分享几件事：
1） 我们使用了Redux存储和反应路由器。因为我们也使用了Typescript，所以我们最终使用了react router的RouteComponentProps来使用它。道具。历史push（）以更新URL。
2） 我们将所有搜索查询都保存在Redux商店中。更新Redux存储和URL的工作流程如下：
在应用程序中选择一些过滤选项=
3） 最后，我们还希望用户能够输入带有查询参数的URL，它将更新应用程序中的所有过滤器。为了实现这一点，工作流程更加简单：
用户输入URL=
因此，这里最重要的是始终保持Redux状态和URL彼此同步。
简而言之：您可以使用redux query sync来同步存储中的URL参数和字段。它在没有路由器的情况下工作。
更长的故事：在同一个问题的斗争中，我首先感谢Dan Abramov的回答，建议（用我的话）把URL看作“第二个商店”，这是RouDux商店之外的应用程序状态的一部分。但后来我发现，有两种“存储”使得修改代码变得很困难，例如，将东西从一个存储移动到另一个存储，因为每个“存储”都有不同的接口。作为一名开发人员，我更愿意选择处于Redux状态的任何字段，并在URL中公开它们，就好像该位置是我状态的一个小窗口一样。
因此，我刚刚发布了redux query sync，以允许您提供一个选择器函数，用于从状态中选择一个值，然后在窗口位置中指定的参数名称处公开该值。为了让它在另一个方向同步，即从URL同步到Redux状态（例如，当应用程序最初加载时），您可以提供一个动作创建者，该创建者将被传递参数值，以便您的reducer可以相应地更新状态。
我建议直接使用React路由器，不要在Redux中保留search chState。React路由器会将URL参数注入到你的组件中，你可以在mapStateToProps（state， owProps）中使用它们来计算最终的道具。
如果您确实希望将路由更改视为操作，则可以使用react router redux进行双向同步，但它不会提供处于当前位置状态的参数。如果您希望录制和重播操作，并在重播时更新URL栏，那么它是唯一的用例。
在大多数情况下并不需要它，直接使用React路由器就足够了。
-
问题内容： 我们提供了讲座和章节的列表，用户可以在其中选择和取消选择它们。这两个列表存储在redux存储中。现在，我们希望在url的hash标签中保留选定的演讲段和章节段的表示形式，并且对该URL所做的任何更改也应更改存储（双向同步）。 使用react-router甚至react-router- redux 的最佳解决方案是什么？ 我们找不到真正的好例子，其中react路由器仅用于维护url的ha
-
我们有一个讲座和章节的列表，用户可以在其中选择和取消选择它们。这两个列表存储在redux存储中。现在，我们希望在url的哈希标记中保留所选讲座段塞和章节段塞的表示，对url的任何更改也应该更改存储（双向同步）。 什么是最好的解决方案，使用反应路由器或甚至反应路由器redux？ 我们真的找不到一些好的例子，其中react路由器只用于维护url的哈希标记，并且只更新一个组件。
-
我想知道我是否正确理解了React或React Native中的Redux-thunk异步操作模式，以及我们如何对操作状态进行用户反馈。 我觉得要么我不明白这个模式，要么这个谜题还有其他部分。 所以，在我的 React 原生应用程序中（但它也可能适用于 React），我想调用一个更新 REST 调用，这将返回一个promise。如果成功或失败，我想向用户显示相应的消息。 没有Redux-async
-
问题内容： 我正在尝试在URL中传递路径参数和查询参数，但出现一个奇怪的错误。下面是代码 我的网址正在变成 我应该怎么做才能使其正常工作。我期望参数可以将id添加到网址中 请提出建议。提前致谢 问题答案： 我将使用from 来传递所有类型的URI参数。 例如：
-
我现在正在学习Redux和React，我正在写一个像这样的爱好项目。 该项目是一个使用标记进行搜索的搜索服务。用户可以在UI中添加或删除标记。在代码中，标记以Redux状态表示，添加和删除标记通过单独的操作进行。到目前为止还不错，我有一个玩具代码可以使用。 现在我想用哈希之后的URL部分“绑定”标签；例如，序列化标记，用破折号分隔；这样用户就可以复制/粘贴URL并拥有相同的标记。 我找不到如何轻易
-
我是新来的Node.js，并试图检查如果电子邮件已经通过发送电子邮件作为一个url参数从iOS应用程序。它不起作用，不确定我做错了什么。 我无法console.log前端发送的VSCode中的电子邮件参数，它在XCODE（http://localhost:3000/api/user/email/test@gmail.com）中打印，我知道后端正在获取GET请求。 我的路由器代码是： 非常感谢。