如何處理查詢參數在react + react-router + flux

Question

我正在嘗試替換一個Backbone.Marionette應用程序來響應，並面臨着困難的思考查詢參數。我認爲我在理解這種模式時錯過了一個非常簡單的和平，所以我很抱歉如果這個問題完全是無稽之談。我會很感激任何支持，或者只是指向我可以更具體地谷歌的一些方向。

有一個/users頁面列出了用戶，你可以通過搜索欄過濾用戶。因此，如果您想過濾其用戶名中包含'joe'的用戶，我會使用查詢參數（如/users?username=joe）向服務器發出請求。此外，我還可以通過添加page參數進行分頁（/users?username=joe&page=1）。

如果我只考慮了功能性，流動很可能是

1. 客戶端插入joe到輸入元素，點擊搜索。
2. 點擊搜索按鈕觸發Action（如Action.getUser）。
3. 的Action向服務器請求並接收結果
4. 的Dispatcher調度的結果有效載荷給任何（通常是Store）是感興趣的Action的功能。更迭「由Action
5. 的視圖（Component）通過聽取Store重新呈現接收到新的結果的狀態變更」
6. 的Store。

它按預期工作。但是，我希望客戶能夠爲當前過濾結果添加書籤，並且能夠在稍後再回到同一頁面。這意味着我需要在某個地方保存有關客戶所做搜索術語的明確信息，這通常是網址（我是對嗎？）。因此，我需要使用查詢參數更新網址以保存搜索詞（/users?username=joe&page=1）。

我很困惑的是何時何地更新網址？我現在想出的是以下兩個選項 - 它們看起來並不乾淨。

選項1

1. 客戶端插入joe到所述輸入元件，並點擊搜索。
2. 單擊搜索按鈕會觸發ReactRouter與新查詢參數（/users?username=joe&page=1）的轉換。
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調度的結果有效載荷給任何（通常是Store）是感興趣的Action的功能。更迭「由Action
5. 的視圖（Component）通過聽取Store重新呈現接收到新的結果的狀態變更」
6. 的Store。 不知怎麼（我不知道怎麼回事，但）它的網址更新取決於其props（如this.props.searchusername，並this.props.searchpage）

什麼是處理查詢參數的最佳做法是什麼？ （或者這可能不是特定於查詢參數） 我完全誤解了設計模式或架構？預先感謝您的支持。

有些文章我讀過

• 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?

Answer 1

不能完全確定你的

的意思，這意味着我將需要更新的URL保存信息（/用戶？用戶名=喬·佩奇& = 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將重新加載和顯示正確結果

Answer 2

我認爲最好的做法是提交按鈕只設置位置查詢（用戶名）。剩下的部分應該由分配爲路由器組件的主要響應組件來處理。通過這種方式，你可以肯定，任何時候一個回訪或股份的網址，就可以得到同樣的結果。這也是非常通用的。

事情是這樣的：

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」的發送到服務器進行搜索。通過這種方式，你不會需要遍歷這需要上市以來用戶已經服務器發送相關數據的關心組件的代碼。

在我與使用位置查詢體驗反應過來，我已經很滿足於自己的反應週期和性能。我強烈建議保持每個不同的應用程序狀態與url的相關性。