2017-06-16 64 views
0

我有以下情況,我有一個REST API和一個React + Redux應用程序。React Redux身份驗證

當用戶登錄時,我將令牌保存到localStorage,基於此,如果用戶回到頁面,我使用令牌撥打服務器/api/whoami { token },然後驗證令牌並返回用戶詳細信息,我將用它來更新我的Redux商店。

我的問題是,如果我刷新並且我想在componentDidMount中執行某些操作,即使用戶已登錄,Redux存儲區也未更新,因爲對/api/whoami的請求尚未完成。

我該如何等待,直到完成對/api/whoami的請求並且設置了用戶然後呈現我的應用程序?

這種問題還有其他解決方案嗎?

謝謝!

回答

1

您可以在您的情況下使用所謂的Aync動作,並在獲取細節時顯示加載組件。

在這裏您將不得不使用thunk中間件。它有一個名爲redux-thunk的獨立軟件包。當動作創建者返回一個函數時,該函數將由Redux Thunk中間件執行。閱讀詳細here

運作:開始之前提取操作,調度和行動,其設置isLoadingtrue並且您已經收到您的回覆後,你發送另一個動作將設置isLoading: false和你的顯示器上只放如果isLoading是真實的你返回一個加載組件其他條件返回成型件

+0

我已經這樣做了,但是如何等待請求完成呈現我的應用? – Anderson

+0

你最近的評論應該被添加到答案 – niceman

+0

在那裏,我剛剛更新了我的答案。 – aditya

0

我想你知道react-redux和你所熟悉的像actionstorereducer一些概念。

如何我可以等到到/api/whoami請求被做了什麼?

使用中間件redux-thunk[redux-saga][1] ...我建議你使用redux-saga,因爲它是一個庫,旨在使副作用(即異步之類的數據獲取和不純之類的東西訪問瀏覽器緩存)在React/Redux應用程序中更容易和更好。

如何設置用戶然後呈現我的應用程序?

隨着使用中間件,你可以請求運行時渲染加載視圖和渲染你想要什麼,當請求已經完成。

閱讀redux-saga官方文檔的更多信息和使用示例。