2017-05-25 249 views
0

我正在一個大的React App中工作。在我的頂級父組件中,我通過Flux動作分派將一些信息(來自登錄服務的用戶數據)添加到本地存儲中。一旦該動作發出,應用程序的其餘部分就會呈現,但某些組件的可見性取決於本地存儲中數據的狀態(即用戶讀取權限)。請注意,這一切都在服務器端進行驗證,當我查詢收集數據以填充這些組件時,我只想以最有效的方式呈現它們。從LocalStorage添加和檢索項目是否存在延遲?

由於這些組件不會在添加權限數據的操作發出之前嘗試呈現,因此我可以假設權限數據可用於從子組件的構造函數/ componentWillMount中的本地存儲讀取?還是我需要處理寫入本地存儲和讀取它之間的潛在延遲?

編輯: 根據以下評論,我可以將我的用戶權限存儲在Store中,而不是解決此問題。

但是,我還從登錄服務獲取API的URI,這些URI可能會根據用戶而改變。此URI用於在掛載子組件時調度的操作調用的函數中的ajax調用。由於這是一個靜態實體,而不是狀態的一個組成部分,因此本地存儲似乎是在商店中佔據這個位置的更好的地方。所以上面的延遲問題仍然代表了這個方面,假設只要子組件掛載並且觸發了ajax調用,就可以從本地存儲中讀取URI了嗎?或者我需要處理潛在的延遲。

+1

_某些組件的可見性取決於該數據在本地存儲中的狀態._這是React/Redux中的錯誤方法。組件應該僅取決於來自Redux商店**的數據**。沒有直接依賴本地存儲!如果您想要將本地存儲數據序列化到本地存儲中,則必須訂閱商店中的更改或使用中間件。有關詳細信息,請參閱[此答案](https://stackoverflow.com/a/35675304/2118955) – hindmost

+0

謝謝,這是處理權限和視圖圖層的更好方法。不過,我還有一些問題,我認爲我的問題仍然代表他們,請參閱我的編輯。 –

+0

看來你仍然不明白Redux如何工作)。除了Redux商店以外,切勿爲應用程序狀態使用額外的源代碼。您只能使用本地存儲進行序列化,而不能用於實際狀態存儲。如果請求URI是依賴於用戶的,則根據當前用戶數據構建它們。我在這裏沒有看到任何問題。 – hindmost

回答

1

對localstorage的調用是同步的,因此您可以放心地假設,如果您在localstorage中設置了一個值,它將在將來的代碼行執行之前完成。