如何处理React + React-Router + Flux中的查询参数 [英] How to deal with query params in react + react-router + flux

问题描述

我正在尝试将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会将具有结果有效负载的函数调度给对Action感兴趣的任何人(通常是Store).
5. Store的状态随Action
收到的新结果而改变
6. 通过收听Store的更改，视图(Component)重新呈现.

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

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

选项1

1. 客户端将joe插入输入元素，然后单击搜索.
2. 点击搜索按钮会触发带有新查询参数(/users?username=joe&page=1)的ReactRouter过渡.
3. 视图(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会将具有结果有效负载的函数调度给对Action感兴趣的任何人(通常是Store).
5. Store的状态随Action
收到的新结果而改变
6. 通过听Store的更改重新渲染视图(Component). 而且(以某种方式(至今还不知道))根据其props(例如this.props.searchusername和this.props.searchpage)更新其网址

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

我读过的一些文章

• 是否可以从路由器(组件外部)获取当前参数或当前查询? /a>
• 异步数据和流量存储
• 使添加查询参数更加容易
• 反应路由器和任意查询参数:页面在加载时意外刷新?
• 添加默认参数?

解决方案

不确定您的意思

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

I'm trying to replace a Backbone.Marionette App to React and am facing difficulty thinking about query params. I think I'm missing a really simple peace in understanding this pattern so I apologize if this question is totally nonsense. I would appreciate any support or just pointing me to some direction that I can google more specifically.

There's a /users page which lists users and you can filter the users via search bar. So if you want to filter the users which contain 'joe' in their username, I would make a request to the server with query params like /users?username=joe. In addition I am able to paginate by adding a page parameter, too (/users?username=joe&page=1).

If I only think about the functionality, the flow would probably be

1. The Client inserts joe to the input element and clicks Search.
2. Clicking the Search button fires an Action (like Action.getUser).
3. The Action makes a request to the server and receives the results
4. The Dispatcher dispatches a function with the results payload to whomever (usually the Store) is interested in the Action.
5. The Store's state changes with the new result received by the Action
6. The View (Component) re-renders by listening to the Store's change.

and it works as expected. However, I would like the Client to be able to bookmark the current filtered result and be able to come back to the same page some time later. This means I will need somewhere to save explicit information about the search term the Client made, which is usually the url (am I right?). So I will need to update the url with query parameters to save the search term (/users?username=joe&page=1).

What I'm confused is where and when to update the url? What I can come up with right now are the 2 options below - and they don't seem to be clean at all.

Option 1

1. The Client inserts joe to the input element and clicks Search.
2. Clicking the Search button fires a transition of the ReactRouter with the new query params (/users?username=joe&page=1).
3. The View (Component) receives the new params via this.props.params and this.props.query.
4. The View (Component) fires an Action like Action.getUser depending on the query params it receives - in this case username=joe&page=1.

after this, it is the same as above

Option 2 (only 6 is different from what I explained above)

1. The Client inserts joe to the input element and clicks Search.
2. Clicking the Search button fires an Action (like Action.getUser).
3. The Action makes a request to the server and receives the results
4. The Dispatcher dispatches a function with the results payload to whomever (usually the Store) is interested in the Action.
5. The Store's state changes with the new result received by the Action
6. The View (Component) re-renders by listening to the Store's change. And somehow (I don't know how, yet) updates its url depending on its props (like this.props.searchusername, and this.props.searchpage)

What is the best practice on handling query params? (or this may not be specific to query params) Am I completely misunderstanding the design pattern or architecture? Thanks in advance for any support.

Some articles I've read

• Any way to get current params or current query from router (outside of component)?
• Async data and Flux stores
• Make it easier to add query parameters
• React Router and Arbitrary Query Params: Page Refreshes Unintentionally on Load?
• Add default params?

解决方案

Not entirely sure what you mean by

this means I will need to update the url to save the information (/users?username=joe&page=1).

You will probably have a similar structure to this.

TopContainer.jsx -- Users.jsx -- a list of User.jsx

Usually TopContainer will watch all the stores and if anything changed, pass it down to users.jsx. That way in Users.jsx, you can simply render this.props.users without worrying about any reRendering.

The search users actions usually happens in TopContainer's componentWillMount event, and you the page will listen to UserStore. That's a good place to throw in any query params. Something like this would work

  componentWillUnmount() {
    let searchTerm = router.getCurrentQuery().searchTerm;
    UserActions.searchUsers(searchTerm)
  },

The page doesn't really care if the url has a query params or not, it just dumbly shows whatever in the user store.

Then when the search finishes, Users.jsx will be reloaded and show the correct results

这篇关于如何处理React + React-Router + Flux中的查询参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！