重新加載後在狀態中保留用戶活動

我創建了一個應用程序，用戶可以使用react和redux搜索與電影相關的信息。搜索用戶可以應用一些過濾器（例如，持續時間）。我希望此過濾器處於活動狀態，直到用戶在用戶重新加載頁面後取消選擇它們。重新加載後在狀態中保留用戶活動

問題： 當前場景用戶應用過濾器應用程序將調度事件並將過濾器信息存儲在Redux狀態中。

但是，只要用戶刷新關於過濾器的頁面信息就會丟失。

解決方案嘗試： 我曾嘗試使用會話存儲和本地存儲一個解決辦法，但我不相信有解決方案。

如果有人能解決這個問題，如果可以的話，這將是很好的。

來源

2016-09-15 cauchy

什麼是與本地存儲解決方案的問題？過濾器必須存儲在某處***，並且某處要麼是用戶瀏覽器，要麼是您的服務器 – Tyrsius

當我使用本地存儲過濾器信息時，即使在關閉它之後，過濾器信息仍在瀏覽器中。爲了避免我使用會話存儲。還有一件事我沒有發現使用會話存儲有什麼問題，但我想知道是否有更好的解決方案。 – cauchy

如果您不希望在瀏覽器關閉後存儲它，那麼會話存儲或會話cookie是您的* only *解決方案。其他任何東西都會在瀏覽器關閉時生存下來 – Tyrsius

對於一些簡單的狀態，如過濾器的當前值，最好使用位置。

例如，您有以下頁面：http://example.com/users。
然後你可以像這樣保存過濾器：http://example.com/users?group=admin。

這種方法的好處很簡單：您明確告訴用戶頁面的實際狀態，他可以複製該頁面，保存書籤或發送給其他人。

要實現這一陣營的代碼，你可以做以下的（我假設你有陣營路由器在你的應用程序）：

class UsersPage extends React.Component { 

    // should be called somewhere in onClick 
    filterUserGroup(groupName) { 
    this.props.router.push({ 
     pathname: this.props.location.pathname, 
     query: { 
      group: groupName 
     } 
    }); 
    } 

    componentWillReceiveProps(nextProps) { 
    if(nextProps.location !== this.props.location) { 
     //filter was changed, you can apply new filter value 
     this.setState({ 
      selectedGroup: nextProps.location.query.group 
     }); 
    } 
    } 

}

來源

2016-09-16 10:43:17

重新加載後在狀態中保留用戶活動

回答

相關問題