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

Question

我正在尝试将 Backbone.Marionette 应用程序替换为 React，并且在考虑查询参数时遇到了困难。我想我在理解这种模式时错过了一种非常简单的平静，所以如果这个问题完全是无稽之谈，我深表歉意。我将不胜感激任何支持或只是指出我可以更具体地用谷歌搜索的一些方向。

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

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

1. 客户端将joe插入输入元素并点击搜索。
2. 点击Search按钮会触发Action（如Action.getUser）。
3. Action 向服务器发出请求并接收结果
4. Dispatcher 将带有结果负载的函数分派给对Action 感兴趣的任何人（通常是Store）。
5. Store 的状态随着Action 收到的新结果而改变
6. 视图 (Component) 通过监听 Store 的变化重新渲染。

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

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

选项 1

1. 客户端在输入元素中插入joe，然后点击搜索。
2. 点击 Search 按钮会触发带有新查询参数 (/users?username=joe&page=1) 的 ReactRouter 转换。
3. 视图 (Component) 通过 this.props.params 和 this.props.query 接收新参数。
4. 视图 (Component) 根据接收到的查询参数触发 Action，例如 Action.getUser - 在本例中为 username=joe&page=1。

之后同上

选项2（与我上面解释的只有6个不同）

1. 客户端在输入元素中插入joe，然后点击搜索。
2. 点击Search按钮会触发Action（如Action.getUser）。
3. Action 向服务器发出请求并接收结果
4. Dispatcher 将带有结果负载的函数分派给对Action 感兴趣的任何人（通常是Store）。
5. Store 的状态随着Action 收到的新结果而改变
6. 视图 (Component) 通过监听 Store 的更改重新渲染。 不知何故（我还不知道如何）根据其props 更新其网址（如this.props.searchusername 和this.props.searchpage）

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

我读过的一些文章

• Any way to get current params or current query from router (outside of component)?
• Async data and Flux stores
• Make it easier to add query parameters
• React Router and Arbitrary Query Params: Page Refreshes Unintentionally on Load?
• Add default params?

Answer 1

我认为最佳做法是仅设置位置查询（用户名）的提交按钮。其余的应该由分配为路由器组件的主要反应组件来处理。这样，您可以确保任何时候重新访问或共享该 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 相关。

Answer 2

不完全确定你的意思

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

你可能会有类似的结构。

TopContainer.jsx -- 用户.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 将被重新加载并显示正确的结果