我有一个带有搜索面板的网页。搜索面板有几个输入字段:id,size,...
[我想要的是用户设置搜索值(例如:id = 123和size = 45)并按下搜索按钮:
另一方面,如果用户将URL更改为http://mydomain/home?id=111&size=22,则:
如何达成目标?我应该使用什么路由器(react-router,redux-router,react-router-redux或其他)?
我建议直接使用React Router,而不将searchState
保留在Redux中。 React Router将URL参数注入到您的组件中,您可以在mapStateToProps(state, ownProps)
中使用它们来计算最终的道具。
如果您确实希望将路线更改视为动作,则可以使用react-router-redux进行双向同步,但是它不会为您提供当前状态下的参数。如果您想记录和重播动作,并在重播它们时更新URL栏,则它的唯一用例。
绝不是必需的,在大多数情况下,仅直接使用React Router就足够了。
简而言之:您可以使用redux-query-sync来同步存储中的URL参数和字段。它无需任何路由器即可工作。
更长篇故事:为了解决同一问题,我首先感谢Dan Abramov的answer,建议(以我的话)将URL视为“第二存储”,这是Redux存储之外的应用程序状态的一部分。但是后来我发现拥有两种“商店”使修改代码变得困难,例如将事物从一个移到另一个,因为每个“商店”都有不同的界面。作为开发人员,我希望选择Redux状态下的任何字段,并在URL中expose,就像该位置是我的状态(一部分)的小窗口一样。
因此,我刚刚发布了redux-query-sync,让您提供一个选择器功能,用于从状态中选择一个值,然后将其显示在窗口位置的指定参数名中。为了也使它在另一个方向上同步(即从URL到Redux状态)(例如,当应用程序最初加载时),您可以提供一个将被传递参数值的操作创建者,以便您的reducer可以相应地更新状态。 >
这是我处理第一种情况的方式:
我最近完成了与此类似的工作。我使用MobX作为我的商店,并使用redux-router作为我的路由器。 (我在react-router上做得很好,但是我需要在组件外部分派一个push操作-redux,因为全局存储在这里很好用)
我建议使用新工具react-url-query,它可以非常直接地进行同步。
我最近还完成了我公司应用程序的此功能。我们想向URL添加不同的搜索查询。