反應Redux認證

Question

我有以下情況，我有一個REST API和一個React + Redux應用程序。

當用戶登錄時，我將令牌保存到localStorage，基於此，如果用戶返回該頁面，則使用令牌調用服務器/api/whoami { token } ，在那里我驗證令牌並返回用於更新Redux存儲的用戶詳細信息。

我的問題是，如果刷新並且我想在componentDidMount做某事，即使用戶登錄Redux存儲區尚未更新，因為對/api/whoami的請求尚未完成。

我怎樣才能等到對/api/whoami的請求完成並且設置了用戶然后呈現我的應用程序？

對於此類問題還有其他解決方案嗎？

謝謝！

Answer 1

在您的情況下，可以使用所謂的Aync操作 ，並在獲取詳細信息時顯示加載組件。

在這里，您將不得不使用笨拙的中間件 。 它包含在一個單獨的名為redux-thunk軟件包中。 當動作創建者返回一個函數時，該函數將由Redux Thunk中間件執行。 在這里詳細閱讀

運行功能：在開始進行提取操作之前，將isLoading設置為true分派和操作，在收到響應后，您將分派另一個將isLoading: false設置為isLoading: false並且在顯示中僅提出以下條件：如果isLoading為true返回加載組件，否則返回配置文件組件

Answer 2

我想您知道react-redux並且熟悉一些概念，例如action ， store和reducer 。

如何等待/api/whoami的請求完成？

使用redux-thunk ， [redux-saga][1]類的中間件 ...我建議您使用redux-saga因為它是一個旨在產生副作用的庫（例如，異步事物（如數據獲取和不純凈的事物，如訪問）瀏覽器緩存）在React / Redux應用程序中變得越來越容易。

如何設置用戶然后呈現我的應用程序？

通過使用中間件 ，您可以在請求運行時呈現加載視圖，並在請求完成后呈現所需的內容。

閱讀redux-saga官方文檔了解更多信息和用法示例。