1. 首页
  2. 问题
  3. 如何处理React + React-Router + Flux中的查询参数
小编典典

如何处理React + React-Router + Flux中的查询参数

reactjs

我正在尝试将Backbone.Marionette应用程序替换为React，并且面临着思考查询参数的困难。我想我在理解这种模式时缺乏真正的和平，因此，如果这个问题完全是胡说八道，我深表歉意。我将不胜感激任何支持，或者只是为我指明了可以更具体地通过Google进行搜索的方向。

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

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

  1. 客户端插入joe到输入元素，然后单击 搜索 。
  2. 单击“ 搜索” 按钮将触发一个Action（如Action.getUser）。
  3. 在Action向服务器请求并接收结果
  4. 所述Dispatcher调度的结果有效载荷给任何（通常是一个函数Store）感兴趣的Action。
  5. 在Store由接收到的新结果状态变化Action
  6. View（Component）通过收听Store的更改重新呈现。

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

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

选项1

  1. 客户端插入joe到输入元素，然后单击 搜索 。
  2. 单击 搜索 按钮将使用新的查询参数（/users?username=joe&page=1）触发ReactRouter的转换。
  3. View（Component）通过this.props.params和接收新的参数this.props.query。
  4. 该视图（Component）触发一个Action像Action.getUser依赖于它接收的查询参数-在这种情况下username=joe&page=1。

在这之后，它与上面相同

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

  1. 客户端插入joe到输入元素，然后单击 搜索 。
  2. 单击“ 搜索” 按钮将触发一个Action（如Action.getUser）。
  3. 在Action向服务器请求并接收结果
  4. 所述Dispatcher调度的结果有效载荷给任何（通常是一个函数Store）感兴趣的Action。
  5. 在Store由接收到的新结果状态变化Action
  6. View（Component）通过收听Store的更改重新呈现。 并以某种方式（我目前还不知道）根据其props（如this.props.searchusername和this.props.searchpage）更新其网址

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

我读过的一些文章


阅读 268

收藏
2020-07-22

共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并显示正确的结果

2020-07-22