我正在尝试将 Backbone.Marionette 应用程序替换为 React,但在思考查询参数时遇到困难。我认为我在理解这种模式时缺少一种非常简单的平静,所以如果这个问题完全是无稽之谈,我深表歉意。我将不胜感激任何支持或只是指出我可以更具体地谷歌搜索的方向。
有一个/users
页面列出了用户,您可以通过搜索栏过滤用户。因此,如果您想过滤用户名中包含“joe”的用户,我将使用查询参数向服务器发出请求,例如/users?username=joe
。此外,我可以通过添加来分页page
参数也一样(/users?username=joe&page=1
).
如果我只考虑功能,流程可能是
- 客户端插入
joe
到输入元素并单击Search.
- 单击Search按钮触发
Action
(如 Action.getUser)。
- The
Action
向服务器发出请求并接收结果
- The
Dispatcher
将带有结果负载的函数分派给任何人(通常是Store
)感兴趣的是Action
.
- The
Store
的状态随着收到的新结果而改变Action
- 风景 (
Component
)通过监听重新渲染Store
的改变。
它按预期工作。但是,我希望客户端能够为当前过滤结果添加书签,并能够在一段时间后返回到同一页面。这意味着我需要在某个地方保存有关客户所做的搜索词的明确信息,通常是网址(我说得对吗?)。因此,我需要使用查询参数更新 url 以保存搜索词(/users?username=joe&page=1
).
我感到困惑的是何时何地更新网址?我现在能想到的是下面的两个选项——它们似乎一点也不干净。
Option 1
- 客户端插入
joe
到输入元素并单击Search.
- 单击Search按钮使用新的查询参数触发 ReactRouter 的转换(
/users?username=joe&page=1
).
- 风景 (
Component
)通过接收新参数this.props.params
and this.props.query
.
- 风景 (
Component
)发射一个Action
like Action.getUser
取决于它收到的查询参数 - 在本例中username=joe&page=1
.
之后就和上面一样了
选项2(只有6与我上面解释的不同)
- 客户端插入
joe
到输入元素并单击Search.
- 单击Search按钮触发
Action
(如 Action.getUser)。
- The
Action
向服务器发出请求并接收结果
- The
Dispatcher
将带有结果负载的函数分派给任何人(通常是Store
)感兴趣的是Action
.
- The
Store
的状态随着收到的新结果而改变Action
- 风景 (
Component
)通过监听重新渲染Store
的改变。并且以某种方式(我还不知道如何)根据其更新其网址props
(like this.props.searchusername
, and this.props.searchpage
)
处理查询参数的最佳实践是什么? (或者这可能不是特定于查询参数的)
我是否完全误解了设计模式或架构?预先感谢您的支持。
我读过的一些文章
- 有什么方法可以从路由器(组件外部)获取当前参数或当前查询? https://github.com/rackt/react-router/issues/822
- 异步数据和 Flux 存储 https://github.com/rackt/react-router/issues/530
- 更容易添加查询参数 https://github.com/rackt/react-router/issues/1100
- React 路由器和任意查询参数:页面加载时无意刷新? https://stackoverflow.com/questions/28952422/react-router-and-arbitrary-query-params-page-refreshes-unintentionally-on-load
- 添加默认参数? https://github.com/rackt/react-router/issues/1126
我认为最佳实践是仅设置位置查询(用户名)的提交按钮。其余的应该由分配为路由器组件的主要 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 中使用位置查询的经验,我对它们的反应周期和性能非常满意。我强烈建议保持每个不同的应用程序状态与 URL 的相关性。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)