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

IT技术 reactjs flux react-router
2021-05-08 14:35:58

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

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

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

  1. 客户端插入joe到 input 元素并单击Search。
  2. 单击“搜索”按钮会触发一个Action（如 Action.getUser）。
  3. 在Action向服务器请求并接收结果
  4. 将Dispatcher带有结果负载的函数分派给Store对 感兴趣的任何人（通常是）Action。
  5. 在Store由接收到的新结果状态变化Action
  6. View ( Component) 通过侦听Store的更改重新呈现。

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

我感到困惑的是在哪里以及何时更新网址？我现在能想到的是下面的 2 个选项——它们似乎一点也不干净。

选项1

  1. 客户端插入joe到 input 元素并单击Search。
  2. 单击“搜索”按钮会使用新的查询参数 ( /users?username=joe&page=1)触发 ReactRouter 的转换。
  3. View( Component) 通过this.props.params和接收新参数this.props.query。
  4. View( Component) 会根据它接收到的查询参数触发一个Actionlike Action.getUser- 在这种情况下username=joe&page=1。

在这之后，它和上面一样

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

  1. 客户端插入joe到 input 元素并单击Search。
  2. 单击“搜索”按钮会触发一个Action（如 Action.getUser）。
  3. 在Action向服务器请求并接收结果
  4. 将Dispatcher带有结果负载的函数分派给Store对 感兴趣的任何人（通常是）Action。
  5. 在Store由接收到的新结果状态变化Action
  6. View ( Component) 通过侦听Store的更改重新呈现。并且以某种方式（我不知道如何）根据其props（例如this.props.searchusername, 和this.props.searchpage）更新其 url

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

我读过的一些文章

2个回答

我认为最佳实践是提交按钮仅设置位置查询（用户名）。其余的应该由分配为路由器组件的主要react组件来处理。通过这一点，您可以确保任何时候重新访问或分享网址，他们都可以获得相同的结果。这也是非常通用的。

像这样的东西：

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 中使用位置查询的经验，我对它们的react周期和性能非常满意。我强烈建议保持每个不同的应用程序状态与 url 相关。

不完全确定你的意思

这意味着我需要更新 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 将被重新加载并显示正确的结果

其它你可能感兴趣的问题
上一篇React Native - 为什么我需要 babel 或 webpack？ 下一篇知道 axios 中是否有待处理的请求