首页 文章

如何处理反应路由器通量中的查询参数

提问于
浏览 次
21

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

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

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

  • 客户端将 joe 插入输入元素并单击 Search .

  • 单击 Search 按钮会触发 Action （如Action.getUser） .

  • Action 向服务器发出请求并接收结果

  • Dispatcher 将结果有效负载的函数调度给任何人（通常是 Store ）对 Action 感兴趣 .

  • Store 的状态随着 Action 收到的新结果而变化

  • 视图（ Component ）通过聆听 Store 的更改重新渲染 .

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

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

选项1

  • 客户端将 joe 插入输入元素并单击 Search .

  • 单击 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 插入输入元素并单击 Search .

  • 单击 Search 按钮会触发 Action （如Action.getUser） .

  • Action 向服务器发出请求并接收结果

  • Dispatcher 将一个带有结果有效负载的函数调度给任何人（通常是 Store ）对 Action 感兴趣 .

  • Store 的状态随着 Action 收到的新结果而变化

  • 视图（ Component ）通过聆听 Store 的更改重新渲染 . And somehow (I don't know how, yet) updates its url depending on its props (like this.props.searchusername, and this.props.searchpage)

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

Some articles I've read

reactjs flux react-router

2 回答

  • 1

    不完全确定你的意思

    这意味着我需要更新网址以保存信息（/ 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并显示正确的结果

    回复于
  • 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
  });
}

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

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

    回复于

相关问题