如何处理react + react-router + flux中的查询参数

Question

我正在尝试将Backbone.Marionette应用程序替换为React,并且在查询查询参数时遇到困难.我想我在理解这种模式时错过了一种非常简单的和平,所以如果这个问题完全是胡说八道,我会道歉.我会感谢任何支持,或者只是指出我可以更具体地谷歌的一些方向.

有一个/users列出用户的页面,您可以通过搜索栏过滤用户.因此,如果您想过滤用户名中包含"joe"的用户,我会向查询参数的服务器发出请求/users?username=joe.另外,我也可以通过添加page参数(/users?username=joe&page=1)来分页.

如果我只考虑功能,那么流程可能就是

它按预期工作.但是,我希望客户能够为当前过滤的结果添加书签,并且能够在一段时间之后返回到同一页面.这意味着我需要在某处保存关于客户所做搜索词的明确信息,这通常是网址(我是对的吗？).所以我需要用查询参数更新url以保存搜索词(/users?username=joe&page=1).

我感到困惑的是在何时何地更新网址？我现在能想到的是下面的两个选项 - 它们似乎根本不干净.

选项1

客户端插入joe到input元素并单击" 搜索".
单击" 搜索"按钮将使用新查询params(/users?username=joe&page=1)触发ReactRouter的转换.
View(Component)通过this.props.params和接收新的参数this.props.query.
View(Component)根据它收到的查询参数触发Action类似的Action.getUser东西 - 在这种情况下username=joe&page=1.

在此之后,它与上面相同

客户端插入joe到input元素并单击" 搜索".
单击" 搜索"按钮将触发Action(如Action.getUser).
在Action向服务器请求并接收结果
将Dispatcher结果有效负载的函数调度给任何(通常是Store)感兴趣的人Action.
在Store与新的结果通过接收到的状态变化Action
View(Component)通过聆听Store改变来重新渲染.不知怎的(我不知道怎么样)更新它的url取决于它props(比如this.props.searchusername,和this.props.searchpage)

处理查询参数的最佳实践是什么？(或者这可能不是特定于查询参数)我是否完全误解了设计模式或架构？在此先感谢任何支持.

我读过一些文章

Answer 1

yuj*_*ngz 1

不完全确定你的意思

这意味着我需要更新 url 来保存信息 (/users?username=joe&page=1)。

您可能会有与此类似的结构。

TopContainer.jsx -- Users.jsx -- User.jsx 列表

通常 TopContainer 会监视所有商店，如果有任何更改，则将其传递给 users.jsx。这样，在 Users.jsx 中，您可以简单地渲染 this.props.users 而无需担心任何重新渲染。

搜索用户的操作通常发生在TopContainer的componentWillMount事件中，并且页面将监听UserStore。这是添加任何查询参数的好地方。像这样的东西会起作用

  componentWillUnmount() {
    let searchTerm = router.getCurrentQuery().searchTerm;
    UserActions.searchUsers(searchTerm)
  },

该页面并不真正关心 url 是否有查询参数，它只是愚蠢地显示用户存储中的任何内容。

然后，当搜索完成时，Users.jsx 将重新加载并显示正确的结果