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

Question

我正在尝试将 Backbone.Marionette 应用程序替换为 React，但在考虑查询参数时遇到困难。我认为我在理解这种模式时错过了一个非常简单的和平，所以如果这个问题完全是胡说八道，我深表歉意。我将不胜感激任何支持或只是指出我可以 google 更具体的方向。

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

如果我只考虑功能，流程可能是

客户端在输入元素中插入joe并点击搜索。
单击搜索按钮会触发 Action（如 Action.getUser）。
Action向服务器发出请求并接收结果
Dispatcher 将带有结果负载的函数分派给对 Action 感兴趣的任何人（通常是 Store）。
Store 的状态随着 Action
视图 (Component) 通过侦听 Store 的更改重新呈现。

并且它按预期工作。但是，我希望客户端能够为当前过滤结果添加书签，并能够在一段时间后返回同一页面。这意味着我需要在某个地方保存有关客户搜索词的明确信息，通常是 url（我说的对吗？）。因此，我需要使用查询参数更新 url 以保存搜索词 (/users?username=joe&page=1)。

我感到困惑的是何时何地更新 url？我现在能想出的是下面的 2 个选项 - 它们似乎一点也不干净。

选项 1

客户端在输入元素中插入joe并点击搜索。
单击 Search 按钮会使用新的查询参数 (/users?username=joe&page=1) 触发 ReactRouter 的转换。
视图 (Component) 通过 this.props.params 和 this.props.query 接收新参数。
视图 (Component) 根据它收到的查询参数触发 Action 类似 Action.getUser - 在本例中为 username=joe&page=1.

此后同上

选项2（只有6个和我上面解释的不一样）

客户端在输入元素中插入joe并点击搜索。
单击搜索按钮会触发 Action（如 Action.getUser）。
Action向服务器发出请求并接收结果
Dispatcher 将带有结果负载的函数分派给对 Action 感兴趣的任何人（通常是 Store）。
Store 的状态随着 Action
视图 (Component) 通过侦听 Store 的更改重新呈现。 并且以某种方式（我还不知道如何）根据其 props（如 this.props.searchusername 和 this.props.searchpage）更新其 url

处理查询参数的最佳做法是什么？（或者这可能不是特定于查询参数的）我是否完全误解了设计模式或架构？在此先感谢您的支持。

我读过的一些文章

Answer 1

不太清楚你的意思

this means I will need to update the url to save the information (/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 将重新加载并显示正确的结果

Answer 2

我认为最佳做法是提交按钮仅设置位置查询（用户名）。其余的应该由分配为路由器组件的主要反应组件来处理。通过这种方式，您可以确保任何时候重新访问或共享 url，他们都可以获得相同的结果。这也很通用。

像这样：

let myQuery = this.props.location.query;
if (myQuery.username) {
  let theUser = myQuery.username;
  this.setState({
    userName = myQuery.username
  });
} else {
  this.setState({
    userName = false //Show All
  });
}

然后使用此状态 "userName" 发送到服务器进行搜索。通过这种方式，您将不需要迭代负责列出用户的组件的代码，因为服务器已经发送了相关数据。

根据我在 React 中使用位置查询的经验，我对它们的反应周期和性能非常满意。我强烈建议让每个不同的应用程序状态与 url.

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

How to deal with query params in react + react-router + flux

flux

reactjs

react-router

选项 1

选项2（只有6个和我上面解释的不一样）