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

问题描述 投票:66回答:6

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

[我想要的是用户设置搜索值(例如:id = 123和size = 45)并按下搜索按钮:

  1. Redux reducer中的searchState应该用新的搜索值(id = 123和size = 45)更新
  2. URL应更改为“ http://mydomain/home?id=123&size=45”]

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

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

如何达成目标?我应该使用什么路由器(react-router,redux-router,react-router-redux或其他)?

react-router redux react-redux redux-framework react-router-redux
6个回答
53
投票

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

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

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


13
投票

简而言之:您可以使用redux-query-sync来同步存储中的URL参数和字段。它无需任何路由器即可工作。


更长篇故事:为了解决同一问题,我首先感谢Dan Abramov的answer,建议(以我的话)将URL视为“第二存储”,这是Redux存储之外的应用程序状态的一部分。但是后来我发现拥有两种“商店”使修改代码变得困难,例如将事物从一个移到另一个,因为每个“商店”都有不同的界面。作为开发人员,我希望选择Redux状态下的任何字段,并在URL中expose,就像该位置是我的状态(一部分)的小窗口一样。

因此,我刚刚发布了redux-query-sync,让您提供一个选择器功能,用于从状态中选择一个值,然后将其显示在窗口位置的指定参数名中。为了也使它在另一个方向上同步(即从URL到Redux状态)(例如,当应用程序最初加载时),您可以提供一个将被传递参数值的操作创建者,以便您的reducer可以相应地更新状态。 >


2
投票

这是我处理第一种情况的方式:


2
投票

我最近完成了与此类似的工作。我使用MobX作为我的商店,并使用redux-router作为我的路由器。 (我在react-router上做得很好,但是我需要在组件外部分派一个push操作-redux,因为全局存储在这里很好用)


1
投票

我建议使用新工具react-url-query,它可以非常直接地进行同步。


0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.