选项1

Question

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

有/users页面列出了用户，您可以通过搜索栏过滤用户。因此，如果您要过滤用户名中包含“joe”的用户，我会向{@ 1}}这样的查询参数向服务器发出请求。另外，我也可以通过添加/users?username=joe参数进行分页（page）。

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

客户将/users?username=joe&page=1插入输入元素，然后点击搜索。
点击搜索按钮会触发joe（例如Action.getUser）。
Action向服务器发出请求并收到结果
Action将带有结果有效负载的函数调度给任何人（通常Dispatcher）对Store感兴趣。
Action的状态随Store
视图（Action）通过聆听Component的更改重新呈现。

它按预期工作。但是，我希望客户能够为当前过滤的结果添加书签，并且能够在一段时间之后返回到同一页面。这意味着我需要在某处保存关于客户所做搜索词的明确信息，这通常是网址（我是对的吗？）。因此，我需要使用查询参数更新网址以保存搜索字词（Store）。

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

选项1

客户将/users?username=joe&page=1插入输入元素，然后点击搜索。
点击搜索按钮会使用新查询参数（joe）触发ReactRouter的转换。
视图（/users?username=joe&page=1）通过Component和this.props.params接收新参数。
视图（this.props.query）会根据收到的查询参数触发Component Action，Action.getUser。

之后，它与上面的

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

客户将username=joe&page=1插入输入元素，然后点击搜索。
点击搜索按钮会触发joe（例如Action.getUser）。
Action向服务器发出请求并收到结果
Action将带有结果有效负载的函数调度给任何人（通常Dispatcher）对Store感兴趣。
Action的状态随Store
视图（Action）通过聆听Component的更改重新呈现。 以某种方式（我不知道如何）更新其网址取决于其Store（例如props和this.props.searchusername）

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

我读过的一些文章

Answer 1

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

这样的事情：

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
  });
}

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

根据我在React中使用位置查询的经验，我对它们的反应周期和性能非常满意。我强烈建议保持每个不同的应用状态与网址相关。

如何处理react + react-router + flux

选项1

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

1 个答案: